Add blog support

src/pages/blog/[slug].astro

@@ -0,0 +1,79 @@
+---
+import Layout from "~/layouts/PageLayout.astro";
+import Picture from "~/components/core/Picture.astro";
+
+import { SITE } from "~/config.mjs";
+import { getAllPosts } from "~/utils/getAllPosts";
+
+export async function getStaticPaths() {
+  const posts = await getAllPosts();
+
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+
+const title = `${post.title} — ${SITE.name}`;
+const description = post.description;
+const canonical = new URL(`blog/${post.slug}/`, Astro.site);
+
+const images = import.meta.glob("../../assets/images/*");
+
+const imageSrc =
+  typeof images[post.image] === "function"
+    ? (await images[post.image]())["default"]
+    : typeof post.image === "string"
+    ? post.image
+    : null;
+---
+
+<Layout
+  meta={{
+    title,
+    description,
+    canonical,
+    image: imageSrc,
+  }}
+>
+  <main class="mt-20">
+    <section class="py-8 sm:py-16 lg:py-20 mx-auto">
+      <article>
+        <header>
+          <p class="max-w-3xl mx-auto text-center">
+            <time datetime={post.pubDate}>
+              {
+                new Date(post.pubDate).toLocaleDateString("en-us", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })
+              }
+            </time> ~ {Math.ceil(post.readingTime)} min
+          </p>
+          <h1
+            class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
+          >
+            {post.title}
+          </h1>
+
+          <Picture
+            src={imageSrc}
+            class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+            widths={[400, 768, 900]}
+            sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
+            alt={post.description}
+            aspectRatio="16:9"
+          />
+        </header>
+        <div
+          class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+        >
+          <Fragment set:html={post.body} />
+        </div>
+      </article>
+    </section>
+  </main>
+</Layout>