Revert

package-lock.json

@@ -5806,9 +5806,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.4.0",
+      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-oLnWs9Hak/LOlKjeSpOwD6JMks8BeICEdYMJBf6P4Lac/pO9tKiv/XhXnAM7nNfSkZahjlCZu9sS50zL8fSnsw==",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
       "peer": true,
       "dependencies": {

server/default.nix

@@ -1,4 +1,9 @@
-{ pkgs, config, ... }:
+{
+  pkgs,
+  config,
+  lib,
+  ...
+}:
 {
   imports = [
     ./hardware-configuration.nix
@@ -53,6 +58,22 @@
             proxyWebsockets = true;
           };
         };
+        "git.thilohohlt.com" = {
+          enableACME = true;
+          forceSSL = true;
+          locations."/" = {
+            proxyPass = "http://localhost:${toString config.services.gitea.settings.server.HTTP_PORT}";
+            proxyWebsockets = true;
+          };
+        };
+        "music.thilohohlt.com" = {
+          enableACME = true;
+          forceSSL = true;
+          locations."/" = {
+            proxyPass = "http://localhost:${toString config.services.navidrome.settings.Port}";
+            proxyWebsockets = true;
+          };
+        };
       };
     };
     redlib = {
@@ -60,8 +81,53 @@
       port = 2222;
       address = "127.0.0.1";
     };
+    gitea = {
+      enable = true;
+      database = {
+        type = "postgres";
+        host = "/run/postgresql";
+        port = 5432;
+      };
+      settings = {
+        server = {
+          HTTP_ADDR = "127.0.0.1";
+          HTTP_PORT = 3333;
+        };
+        service = {
+          DISABLE_REGISTRATION = true;
+        };
+        session = {
+          COOKIE_SECURE = true;
+        };
+      };
+    };
+    navidrome = {
+      enable = true;
+      settings = {
+        Port = 4444;
+        Address = "127.0.0.1";
+        MusicFolder = "/home/thohlt/Music";
+      };
+    };
+    postgresql = {
+      enable = true;
+      ensureDatabases = [ "gitea" ];
+      ensureUsers = [
+        {
+          name = "gitea";
+          ensureDBOwnership = true;
+        }
+      ];
+    };
   };
 
+  systemd.tmpfiles.rules = [
+    "a /home/thohlt - - - - u:navidrome:--x"
+    "A /home/thohlt/Music - - - - u:navidrome:r-X,d:u:navidrome:r-X"
+  ];
+
+  systemd.services.navidrome.serviceConfig.ProtectHome = lib.mkForce false;
+
   security = {
     acme = {
       acceptTerms = true;
@@ -80,5 +146,5 @@
     ];
   };
 
-  system.stateVersion = "25.10";
+  system.stateVersion = "25.11";
 }

src/components/Nav.astro

@@ -6,7 +6,7 @@ import Button from "./Button.astro";
 const routes = ["blog", "tracks", "services"];
 ---
 
-<nav class="sticky top-0 z-10 max-w-none bg-white dark:bg-neutral-800">
+<nav class="sticky top-0 z-20 max-w-none bg-white dark:bg-neutral-800">
   <div
     class="mx-auto flex max-w-screen-xl items-center justify-between gap-4 ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
   >

src/components/Track.astro

@@ -17,30 +17,16 @@ const videoId = youtubeLink.split("v=")[1];
 const thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
 ---
 
-<figure
+<a
-  class="relative flex flex-col border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
+  href={youtubeLink}
+  class="relative mt-4 block p-4 duration-300 after:absolute after:inset-0 after:z-0 after:bg-[rgba(255,255,255,0.75)] after:content-[''] first:mt-0 hover:scale-105 dark:after:bg-[rgba(38,38,38,0.75)]"
+  style={`word-break: break-word; background-image: url('${thumbnail}'); background-size: cover; background-position: center;`}
 >
-  <span
+  <div
-    class="absolute -start-2 -top-2 border border-neutral-400 bg-white px-2 text-lg font-bold dark:border-neutral-500 dark:bg-neutral-800"
+    class="relative z-10 flex flex-col gap-2 text-neutral-900 dark:text-white"
-    >{index}</span
-  >
-  <a href={youtubeLink}>
-    <img
-      src={thumbnail}
-      alt={`Cover for the song '${title}' by artist(s) '${artist}'`}
-      class="aspect-video w-full border-b border-neutral-400 dark:border-neutral-500"
-    />
-  </a>
-  <figcaption
-    class="flex flex-1 flex-col p-6 text-center"
-    style="word-break: break-word;"
   >
     <p class="text-lg font-bold">{title}</p>
-    <p class="mb-3">{uniqueArtists}</p>
+    <p>{uniqueArtists}</p>
-    <p
+    <p class="text-sm">{album}</p>
-      class="mt-auto border-t border-neutral-400 pt-3 text-sm dark:border-neutral-500"
+  </div>
-    >
+</a>
-      {album}
-    </p>
-  </figcaption>
-</figure>

src/pages/tracks.astro

@@ -10,16 +10,7 @@ const tracks = await getCollection("tracks");
   title="Tracks"
   description="My entire music playlist. It contains all kinds of songs."
 >
-  <p class="mb-8 text-center">
+  <div class="not-prose">
-    My entire music playlist. It contains all kinds of songs. <br />
-    Current total amount of songs: <strong class="text-lg"
-      >{tracks.length}</strong
-    >
-    <br />
-  </p>
-  <div
-    class="not-prose relative start-1/2 -ms-[min(50vw-1rem,50ch)] grid max-w-[calc(min(100vw-2rem,100ch))] grid-cols-[repeat(auto-fit,minmax(min(100%,200px),1fr))] place-content-center gap-6"
-  >
     {
       tracks.map(({ data: { title, artist, album, youtubeLink } }, index) => (
         <Track {title} {artist} {album} {youtubeLink} index={++index} />