Add tracks page

src/components/Nav.astro

@@ -1,7 +1,7 @@
 ---
-import Logo from "../img/TH.svg";
+import Logo from "../content/TH.svg";
 
-const routes = ["blog"];
+const routes = ["blog", "tracks"];
 ---
 
 <nav class="sticky top-0 z-10 max-w-none bg-white dark:bg-neutral-800">

src/img/icons/bars-arrow-down.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H17.25C17.6642 3.75 18 4.08579 18 4.5C18 4.91421 17.6642 5.25 17.25 5.25H3C2.58579 5.25 2.25 4.91421 2.25 4.5ZM2.25 9C2.25 8.58579 2.58579 8.25 3 8.25H12.75C13.1642 8.25 13.5 8.58579 13.5 9C13.5 9.41421 13.1642 9.75 12.75 9.75H3C2.58579 9.75 2.25 9.41421 2.25 9ZM17.25 8.25C17.6642 8.25 18 8.58579 18 9V19.1893L20.4697 16.7197C20.7626 16.4268 21.2374 16.4268 21.5303 16.7197C21.8232 17.0126 21.8232 17.4874 21.5303 17.7803L17.7803 21.5303C17.4874 21.8232 17.0126 21.8232 16.7197 21.5303L12.9697 17.7803C12.6768 17.4874 12.6768 17.0126 12.9697 16.7197C13.2626 16.4268 13.7374 16.4268 14.0303 16.7197L16.5 19.1893V9C16.5 8.58579 16.8358 8.25 17.25 8.25ZM2.25 13.5C2.25 13.0858 2.58579 12.75 3 12.75H12.75C13.1642 12.75 13.5 13.0858 13.5 13.5C13.5 13.9142 13.1642 14.25 12.75 14.25H3C2.58579 14.25 2.25 13.9142 2.25 13.5Z" fill="#0F172A"/>
-</svg>

src/img/icons/moon.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.45519 2.00395C7.68518 2.18765 7.78646 2.4889 7.71414 2.77423C7.57443 3.32547 7.5 3.90348 7.5 4.49996C7.5 8.36595 10.634 11.5 14.5 11.5C15.6435 11.5 16.721 11.2263 17.6724 10.7417C17.9347 10.608 18.2509 10.6402 18.4809 10.8239C18.7109 11.0076 18.8122 11.3089 18.7399 11.5942C17.8069 15.2755 14.4725 18 10.5 18C5.80558 18 2 14.1944 2 9.49996C2 6.19139 3.89048 3.32567 6.64671 1.92168C6.909 1.78807 7.22519 1.82025 7.45519 2.00395Z" fill="#0F172A"/>
-</svg>

src/img/icons/sun.svg

@@ -1,11 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 2C10.4142 2 10.75 2.33579 10.75 2.75V4.25C10.75 4.66421 10.4142 5 10 5C9.58579 5 9.25 4.66421 9.25 4.25V2.75C9.25 2.33579 9.58579 2 10 2Z" fill="#0F172A"/>
-<path d="M10 15C10.4142 15 10.75 15.3358 10.75 15.75V17.25C10.75 17.6642 10.4142 18 10 18C9.58579 18 9.25 17.6642 9.25 17.25V15.75C9.25 15.3358 9.58579 15 10 15Z" fill="#0F172A"/>
-<path d="M10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7Z" fill="#0F172A"/>
-<path d="M15.6568 5.40386C15.9497 5.11096 15.9497 4.63609 15.6568 4.3432C15.3639 4.0503 14.889 4.0503 14.5961 4.3432L13.5355 5.40386C13.2426 5.69675 13.2426 6.17162 13.5355 6.46452C13.8284 6.75741 14.3032 6.75741 14.5961 6.46452L15.6568 5.40386Z" fill="#0F172A"/>
-<path d="M6.46441 14.5962C6.7573 14.3034 6.7573 13.8285 6.46441 13.5356C6.17151 13.2427 5.69664 13.2427 5.40375 13.5356L4.34309 14.5962C4.05019 14.8891 4.05019 15.364 4.34309 15.6569C4.63598 15.9498 5.11085 15.9498 5.40375 15.6569L6.46441 14.5962Z" fill="#0F172A"/>
-<path d="M18 10C18 10.4142 17.6642 10.75 17.25 10.75H15.75C15.3358 10.75 15 10.4142 15 10C15 9.58579 15.3358 9.25 15.75 9.25H17.25C17.6642 9.25 18 9.58579 18 10Z" fill="#0F172A"/>
-<path d="M5 10C5 10.4142 4.66421 10.75 4.25 10.75H2.75C2.33579 10.75 2 10.4142 2 10C2 9.58579 2.33579 9.25 2.75 9.25H4.25C4.66421 9.25 5 9.58579 5 10Z" fill="#0F172A"/>
-<path d="M14.596 15.6568C14.8889 15.9497 15.3638 15.9497 15.6567 15.6568C15.9496 15.3639 15.9496 14.889 15.6567 14.5961L14.596 13.5355C14.3031 13.2426 13.8283 13.2426 13.5354 13.5355C13.2425 13.8284 13.2425 14.3032 13.5354 14.5961L14.596 15.6568Z" fill="#0F172A"/>
-<path d="M5.40363 6.46441C5.69653 6.7573 6.1714 6.7573 6.46429 6.46441C6.75719 6.17151 6.75719 5.69664 6.46429 5.40375L5.40363 4.34309C5.11074 4.05019 4.63587 4.05019 4.34297 4.34309C4.05008 4.63598 4.05008 5.11085 4.34297 5.40375L5.40363 6.46441Z" fill="#0F172A"/>
-</svg>

src/pages/tracks.astro

@@ -0,0 +1,58 @@
+---
+import PageLayout from "../layouts/PageLayout.astro";
+import { Image } from "astro:assets";
+import { parse } from "node:path";
+
+const albumCovers = await Astro.glob("../content/album-covers/*");
+
+const processedAlbumCovers = albumCovers.map((cover) => {
+  const filePathWithoutParams = cover.default.src.split("?")[0];
+  const filename = parse(filePathWithoutParams).name;
+
+  const lastDashIndex = filename.lastIndexOf(" - ");
+  const artists =
+    lastDashIndex !== -1 ? filename.substring(0, lastDashIndex) : filename;
+  const title =
+    lastDashIndex !== -1 ? filename.substring(lastDashIndex + 3) : "";
+
+  return { cover, filename, artists, title };
+});
+
+const sortedAlbumCovers = processedAlbumCovers.sort((a, b) =>
+  a.title.localeCompare(b.title),
+);
+---
+
+<PageLayout
+  title="Tracks"
+  description="Collection of some of my favourite music tracks."
+>
+  <p class="mb-16">
+    This is a collection of some of my favourite music tracks, each listed by
+    artist and song title. Click on an album cover to go straight to the song on
+    YouTube Music!
+  </p>
+  <div
+    class="not-prose relative start-1/2 end-1/2 -ms-[30vw] -me-[30vw] grid w-[60vw] max-w-[100vw] grid-cols-[repeat(auto-fit,minmax(min(100%,360px),1fr))] place-content-center gap-8"
+  >
+    {
+      sortedAlbumCovers.map(({ cover, filename, artists, title }) => (
+        <figure>
+          <a
+            href={`https://music.youtube.com/search?q=${encodeURIComponent(filename)}`}
+          >
+            <Image
+              src={cover.default}
+              alt={`Cover for the song '${filename}'`}
+              class="border border-neutral-400 duration-300 hover:scale-105 dark:border-neutral-500"
+            />
+          </a>
+          <figcaption class="flex flex-col p-4 text-center">
+            <p class="text-lg font-bold">{title}</p>
+            <p>{artists}</p>
+          </figcaption>
+        </figure>
+      ))
+    }
+  </div>
+</PageLayout>