feat: added page for displaying blog articles from original markdown blobs

src/pages/blog/[slug].astro

@@ -0,0 +1,58 @@
+---
+import BaseLayout from "@/layouts/base.astro";
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog", (p) => !p.data.draft);
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<BaseLayout title={post.data.title}>
+  <article
+    class="prose prose-invert prose-headings:font-extrabold prose-sm sm:prose-base mx-auto max-w-none px-4 py-6 pb-16 sm:max-w-3xl sm:px-6 sm:py-8 lg:px-8"
+  >
+    <header class="not-prose mb-6 sm:mb-8">
+      <h1
+        class="text-xl leading-tight font-extrabold tracking-tight sm:text-2xl md:text-3xl"
+      >
+        {post.data.title}
+      </h1>
+      <p class="text-muted-foreground mt-3 text-sm">
+        {
+          new Date(post.data.pubDate).toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "2-digit",
+          })
+        }
+      </p>
+      {
+        post.data.description && (
+          <p class="text-muted-foreground mt-3 text-sm leading-relaxed sm:text-base">
+            {post.data.description}
+          </p>
+        )
+      }
+      {
+        post.data.tags?.length ? (
+          <ul class="text-muted-foreground mt-4 flex flex-wrap gap-2 text-xs">
+            {post.data.tags.map((t) => (
+              <li class="bg-muted rounded px-2 py-1">{t}</li>
+            ))}
+          </ul>
+        ) : null
+      }
+    </header>
+
+    <div class="prose-content">
+      <Content />
+    </div>
+  </article>
+</BaseLayout>

src/styles/global.css

@@ -265,3 +265,23 @@
 .fade-in-top {
   animation: fade-in-top 2s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
+
+@media (max-width: 640px) {
+  .prose pre {
+    font-size: 0.75rem !important;
+    overflow-x: auto !important;
+    white-space: pre !important;
+    max-width: calc(100vw - 3rem) !important;
+    padding: 0.75rem !important;
+  }
+
+  .prose code:not(pre code) {
+    font-size: 0.75rem !important;
+    word-break: break-all !important;
+  }
+
+  .prose {
+    max-width: 100% !important;
+    overflow-x: hidden !important;
+  }
+}