From fb1d6bf69a980e2494777a0bdf552b59ce10cf57 Mon Sep 17 00:00:00 2001
From: kbot <kbot@local>
Date: Mon, 6 Jul 2026 22:06:46 -0500
Subject: [PATCH] blog: dossier-style article header

---
 app/blog/[slug]/page.tsx | 72 ++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 6637a89..4e54a28 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -42,46 +42,40 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
     <>
       <ScrollToTop />
       <ReadingProgress />
-      <div className="mx-auto max-w-6xl px-6 py-16">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
-          <article className="min-w-0">
-            <header className="mb-12">
-              <time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
-              <h1 className="heading-xl text-ink mt-3 mb-2">
-                {post.title}
-              </h1>
-              <div className="flex items-center gap-4 font-mono text-xs text-ink-soft">
-                {post.author && <span>by {post.author}</span>}
-                <span>{post.readingTime} min read</span>
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
+        <article className="min-w-0">
+          <header className="mb-12">
+            <time className="section-label" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} · {post.author} · {post.readingTime} min</time>
+            <h1 className="heading-xl font-display text-ink mt-3 mb-2">
+              {post.title}
+            </h1>
+            {post.coverImage && (
+              <img
+                src={post.coverImage}
+                alt={`Featured image for article: ${post.title}`}
+                className="my-8 aspect-[16/9] w-full rounded-lg border border-border bg-surface object-cover shadow-card"
+                loading="eager"
+                decoding="async"
+                fetchPriority="high"
+              />
+            )}
+            {post.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-4">
+                {post.tags.map((tag) => (
+                  <Link key={tag} href={`/blog/tags/${tagToSlug(tag)}/`} className="rounded-sm bg-surface px-3 py-1 font-mono text-[11px] uppercase tracking-wider text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
+                    {tag}
+                  </Link>
+                ))}
               </div>
-              {post.coverImage && (
-                <img
-                  src={post.coverImage}
-                  alt={`Featured image for article: ${post.title}`}
-                  className="my-8 aspect-[16/9] w-full rounded-2xl border border-border bg-surface object-cover shadow-card"
-                  loading="eager"
-                  decoding="async"
-                  fetchPriority="high"
-                />
-              )}
-              {post.tags.length > 0 && (
-                <div className="flex flex-wrap gap-2 mt-4">
-                  {post.tags.map((tag) => (
-                    <Link key={tag} href={`/blog/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
-                      {tag}
-                    </Link>
-                  ))}
-                </div>
-              )}
-            </header>
-            <div className="prose prose-lg article-prose max-w-none min-w-0">
-              <PostContent />
-            </div>
-          </article>
-          <aside className="hidden lg:block">
-            <TableOfContents />
-          </aside>
-        </div>
+            )}
+          </header>
+          <div className="prose prose-lg article-prose max-w-none min-w-0">
+            <PostContent />
+          </div>
+        </article>
+        <aside className="hidden lg:block">
+          <TableOfContents />
+        </aside>
       </div>
     </>
   )