Fetch track thumbnails remotely

Author: thiloho

src/components/Nav.astro

@@ -3,17 +3,17 @@ import Logo from "../content/TH.svg";
 import Icon from "./Icon.astro";
 import Button from "./Button.astro";
 
-const routes = ["blog", "tracks"];
+const routes = ["blog", "tracks", "services"];
 ---
 
 <nav class="sticky top-0 z-10 max-w-none bg-white dark:bg-neutral-800">
   <div
-    class="mx-auto flex max-w-screen-xl items-center justify-between ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
+    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"
   >
     <a href="/" title="Home">
       <Logo width={42} height={42} />
     </a>
-    <div class="flex">
+    <div class="flex overflow-x-auto">
       {
         routes.map((route) => (
           <Button href={`/${route}`}>

src/components/TableOfContents.astro

@@ -11,7 +11,7 @@ const { headings } = Astro.props;
 
 <details
   id="toc"
-  class="sticky top-10 z-10 -translate-y-px border border-neutral-300 bg-white lg:top-2 dark:border-neutral-600 dark:bg-neutral-800"
+  class="sticky top-10 z-10 -translate-y-px border border-neutral-300 bg-white xl:top-2 dark:border-neutral-600 dark:bg-neutral-800"
 >
   <summary
     title="Table of contents"

src/components/Track.astro

@@ -1,28 +1,46 @@
 ---
-import { Image } from "astro:assets";
-
 interface Props {
   title: string;
   artist: string;
   album: string;
   youtubeLink: string;
-  cover: any;
+  index: number;
 }
 
-const { title, artist, album, youtubeLink, cover } = Astro.props;
+const { title, artist, album, youtubeLink, index } = Astro.props;
+
+const uniqueArtists = [...new Set(artist.split(",").map((a) => a.trim()))].join(
+  ", ",
+);
+
+const videoId = youtubeLink.split("v=")[1];
+const thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
 ---
 
-<figure>
+<figure
+  class="relative flex flex-col border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
+>
+  <span
+    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"
+    >{index}</span
+  >
   <a href={youtubeLink}>
-    <Image
-      src={cover}
+    <img
+      src={thumbnail}
       alt={`Cover for the song '${title}' by artist(s) '${artist}'`}
-      class="border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
+      class="aspect-video w-full border-b border-neutral-400 dark:border-neutral-500"
     />
   </a>
-  <figcaption class="flex flex-col p-4 text-center">
+  <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>{artist}</p>
-    <p class="text-sm">{album}</p>
+    <p class="mb-3">{uniqueArtists}</p>
+    <p
+      class="mt-auto border-t border-neutral-400 pt-3 text-sm dark:border-neutral-500"
+    >
+      {album}
+    </p>
   </figcaption>
 </figure>

src/content.config.ts

@@ -13,15 +13,13 @@ const blog = defineCollection({
 
 const tracks = defineCollection({
   loader: file("./src/content/tracks.json"),
-  schema: ({ image }) =>
-    z.object({
-      id: z.number().positive(),
-      title: z.string(),
-      youtubeLink: z.string().url(),
-      artist: z.string(),
-      album: z.string(),
-      cover: image(),
-    }),
+  schema: z.object({
+    id: z.number().positive(),
+    title: z.string(),
+    youtubeLink: z.string().url(),
+    artist: z.string(),
+    album: z.string(),
+  }),
 });
 
 export const collections = { blog, tracks };