feat: blog pubblico con filtri, paginazione e articolo

src/pages/blog/[slug].astro

@@ -0,0 +1,33 @@
+---
+import Base from '../../layouts/Base.astro';
+import Sidebar from '../../components/blog/Sidebar.astro';
+import { getDb } from '../../lib/db';
+import { getPublishedBySlug } from '../../lib/posts';
+export const prerender = false;
+
+const post = getPublishedBySlug(getDb(), Astro.params.slug!);
+if (!post) return Astro.redirect('/404');
+const fmt = new Intl.DateTimeFormat('it-IT', { dateStyle: 'long' });
+---
+<Base title={post.title} description={post.excerpt}>
+  <section class="section">
+    <div class="container art">
+      <article>
+        {post.cover && <img class="art__cover" src={post.cover} alt="" />}
+        <p class="art__meta">{post.published_at && fmt.format(new Date(post.published_at))} · {post.category}</p>
+        <h1>{post.title}</h1>
+        <div class="art__body" set:html={post.body_html} />
+      </article>
+      <Sidebar />
+    </div>
+  </section>
+</Base>
+
+<style>
+  .art { display: grid; grid-template-columns: 2.4fr 1fr; gap: 60px; }
+  .art__cover { width: 100%; margin-bottom: 24px; }
+  .art__meta { font-size: .8rem; color: var(--c-text-light); }
+  .art__body :global(img) { margin-block: 20px; }
+  .art__body :global(blockquote) { border-left: 3px solid var(--c-accent); margin: 24px 0; padding: 6px 0 6px 20px; font-style: italic; color: var(--c-heading); }
+  @media (max-width: 991px) { .art { grid-template-columns: 1fr; } }
+</style>