feat: initial commit

src/pages/watching/shows/[slug].astro

@@ -0,0 +1,113 @@
+---
+import { parseISO, format } from "date-fns";
+import Layout from "@layouts/Layout.astro";
+import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
+import Warning from "@components/blocks/banners/Warning.astro";
+import { fetchGlobalData } from "@utils/data/global/index.js";
+import { md } from "@utils/helpers/general.js";
+import icons from "@cdransf/astro-tabler-icons";
+
+const { globals, show } = await fetchGlobalData(Astro, Astro.url.pathname);
+
+if (!show) return Astro.redirect("/404", 404);
+
+const {
+  IconArrowLeft,
+  IconHeart,
+  IconNeedle,
+  IconCircleCheck,
+} = icons;
+const pageTitle = `${show.title} / TV`;
+const description = show.description || `Details about ${show.title}.`;
+const alt = `${show.title} / ${show.year}`;
+---
+
+<Layout
+  pageTitle={pageTitle}
+  description={description}
+  fullUrl={Astro.url.pathname}
+  ogImage={show.backdrop}
+>
+  <a class="back-link" href="/watching" title="Go back to the watching index page">
+    <div set:html={IconArrowLeft({ size: 18 })}/> Back to watching
+  </a>
+  <article class="watching focus">
+    <img
+      srcset={`
+        ${globals.cdn_url}${show.backdrop}?class=bannersm&type=webp 256w,
+        ${globals.cdn_url}${show.backdrop}?class=bannermd&type=webp 512w,
+        ${globals.cdn_url}${show.backdrop}?class=bannerbase&type=webp 1024w
+      `}
+      sizes="(max-width: 450px) 256px,
+        (max-width: 850px) 512px,
+        1024px"
+      src={`${globals.cdn_url}${show.backdrop}?class=bannersm&type=webp`}
+      alt={alt}
+      class="image-banner"
+      loading="eager"
+      decoding="async"
+      width="256"
+      height="180"
+    />
+    <div class="media-meta">
+      <span class="title">
+        <strong>{show.title}</strong>
+        {show.year && ` (${show.year})`}
+      </span>
+      {
+        show.favorite && (
+          <span class="sub-meta favorite">
+            <div set:html={IconHeart({ size: 18 })}/> This is one of my favorite shows!
+          </span>
+        )
+      }
+      {
+        show.tattoo && (
+          <span class="sub-meta tattoo">
+            <div set:html={IconNeedle({ size: 18 })}/> I have a tattoo inspired by this show!
+          </span>
+        )
+      }
+      {
+        show.collected && (
+          <span class="sub-meta collected">
+            <div set:html={IconCircleCheck({ size: 18 })}/> This show is in my collection!
+          </span>
+        )
+      }
+      {
+        show.episode?.formatted_episode && (
+          <span class="sub-meta">
+            I last watched{" "}
+            <strong class="highlight-text">{show.episode.formatted_episode}</strong>{" "}
+            on {format(parseISO(show.episode.last_watched_at), "PPPP")}.
+          </span>
+        )
+      }
+    </div>
+
+    {show.review && (
+      <>
+        <h2>My thoughts</h2>
+        <Warning text="There are probably spoilers after this banner — this is a warning about them." />
+        <div set:html={md(show.review)}/>
+      </>
+    )}
+
+    <AssociatedMedia
+      artists={show.artists}
+      books={show.books}
+      genres={show.genres}
+      movies={show.movies}
+      posts={show.posts}
+      shows={show.related_shows}
+    />
+
+    {show.description && (
+      <>
+        <h2>Overview</h2>
+        <div set:html={md(show.description)}/>
+      </>
+    )}
+  </article>
+</Layout>