initial commit

src/pages/posts/[year]/[title].astro

@@ -0,0 +1,102 @@
+---
+import { IconStar } from "@tabler/icons-react";
+import { fetchAllPosts } from "@data/posts.js";
+import { fetchGlobals } from "@data/globals.js";
+import { md } from '@utils/helpers.js';
+import OldPost from "@components/blocks/banners/OldPost.astro";
+import BlockRenderer from "@components/BlockRenderer.astro";
+import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
+import MastodonPost from "@components/blocks/MastodonPost.astro";
+import Layout from "@layouts/Layout.astro";
+import Coffee from "@components/blocks/banners/Coffee.astro";
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  const posts = await fetchAllPosts();
+
+  return posts.map((post) => {
+    const match = post.url.match(/^\/posts\/(\d{4})\/(.+)$/);
+    if (!match) throw new Error(`Invalid post URL: ${post.url}`);
+
+    const [, year, title] = match;
+
+    return {
+      params: { year, title },
+      props: { post },
+    };
+  });
+}
+
+const { post } = Astro.props;
+const { year, title } = Astro.params;
+const globals = await fetchGlobals();
+const currentUrl = Astro.url.pathname;
+const htmlContent = md(post.content);
+---
+
+<Layout
+  globals={globals}
+  pageTitle={post.title}
+  description={post.description}
+  ogImage={post.open_graph_image}
+  updated={post.updated}
+  currentUrl={currentUrl}
+>
+  <article class="standalone">
+    <div class="post-meta">
+      {post.featured && <IconStar size={16} />}
+      <time datetime={post.date}>
+        {
+          new Date(post.date).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })
+        }
+      </time>
+    </div>
+    <h3>{post.title}</h3>
+    <div>
+      {post.old_post && <OldPost />}
+      {
+        post.image && (
+          <img
+            srcset={`
+          ${globals.cdn_url}${post.image}?class=w200&type=webp 200w,
+          ${globals.cdn_url}${post.image}?class=w400&type=webp 400w,
+          ${globals.cdn_url}${post.image}?class=w800&type=webp 800w,
+          ${globals.cdn_url}${post.image}?class=w1600&type=webp 1600w
+        `}
+            sizes="(max-width: 450px) 200px,
+                (max-width: 850px) 400px,
+                (max-width: 1000px) 800px,
+                1200px"
+            src={`${globals.cdn_url}${post.image}?class=w200`}
+            alt={post.image_alt?.replace(/['"]/g, "")}
+            class="image-banner"
+            loading="eager"
+            decoding="async"
+            width="200"
+            height="auto"
+          />
+        )
+      }
+      <div set:html={htmlContent} />
+      {
+        post.blocks &&
+          post.blocks.map((block) => <BlockRenderer block={block} />)
+      }
+      <!-- {post.mastodon_url && <MastodonPost url={post.mastodon_url} />} -->
+      <AssociatedMedia
+        artists={post.artists}
+        books={post.books}
+        genres={post.genres}
+        movies={post.movies}
+        posts={post.posts}
+        shows={post.shows}
+      />
+      <Coffee />
+    </div>
+  </article>
+</Layout>