Feat/post reformat

src/content.config.ts

@@ -19,6 +19,8 @@ const posts = defineCollection({
     publishedAt: z.coerce.date(),
     updatedAt: z.coerce.date().optional(),
 
+    blurb: z.string().optional(),
+
     draft: z.boolean().default(false),
 
     tags: z.array(z.string()).default([]),

src/content/posts/hello-world.md

@@ -2,6 +2,8 @@
 title: "Hello, world!"
 description: "The first post."
 publishedAt: 2026-09-21
+updatedAt: 2026-10-14
+blurb: "A brief introduction."
 tags:
   - hello-world
 ---

src/lib/client/tic-tac-toe.ts

@@ -64,7 +64,7 @@ export function initTicTacToe(root: HTMLElement): () => void {
         session.state.turn !== session.humanMark)
     )
       return;
-    console.log("[TicTacToe] Square pressed:", square);
+    //console.log("[TicTacToe] Square pressed:", square);
     commitMove(square);
     scheduleCpuTurn();
   }
@@ -102,7 +102,7 @@ export function initTicTacToe(root: HTMLElement): () => void {
   }
 
   function handleDifficultyPress(difficulty: Difficulty): void {
-    console.log("[TicTacToe] Difficulty pressed:", difficulty);
+    //("[TicTacToe] Difficulty pressed:", difficulty);
     if (session.difficulty === difficulty) return;
 
     cancelCpuTurn();

src/pages/posts/[...id].astro

@@ -2,6 +2,7 @@
 import { render } from "astro:content";
 import { getPosts } from "../../lib/posts/selectors";
 import ContentLayout from "../../layouts/ContentLayout.astro";
+import ItemBox from "../../components/ui/ItemBox.astro";
 
 export async function getStaticPaths() {
   const posts = await getPosts();
@@ -18,8 +19,121 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { Content } = await render(post);
+
+const publishedAt = post.data.publishedAt;
+const updatedAt = post.data.updatedAt;
+const blurb = post.data.blurb;
+
+const formatDate = (date: Date) =>
+  date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
 ---
 
 <ContentLayout title={post.data.title} description={post.data.description}>
-  <Content />
+  <div class="post">
+    <header class="post-header">
+      <h1>{post.data.title}</h1>
+    </header>
+
+    <div class="post-grid">
+      <div class="dates">
+        <span>Published {formatDate(publishedAt)}</span>
+
+        {updatedAt && (
+          <span class="updated">Updated {formatDate(updatedAt)}</span>
+        )}
+      </div>
+
+      {blurb && <p class="blurb">{blurb}</p>}
+
+      <div class="post-content">
+        <ItemBox>
+          <Content />
+        </ItemBox>
+      </div>
+    </div>
+  </div>
 </ContentLayout>
+
+<style>
+  .post {
+    width: min(var(--content-width), calc(100% - var(--space-8)));
+    margin-inline: auto;
+  }
+
+  .post-header {
+    margin-bottom: var(--space-6);
+  }
+
+  .post-header h1 {
+    margin-top: var(--space-2);
+    margin-bottom: var(--space-6);
+  }
+
+  .post-grid {
+    display: grid;
+    grid-template-columns: 14rem minmax(0, 60ch);
+
+    column-gap: var(--space-6);
+    row-gap: var(--space-8);
+
+    padding-top: var(--space-4);
+
+    border-top: var(--border-width) solid var(--color-border);
+  }
+
+  .dates {
+    grid-column: 1;
+    grid-row: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+
+    margin: 0;
+
+    color: var(--color-text);
+    line-height: 1.4;
+  }
+
+  .updated {
+    color: var(--color-text-muted);
+  }
+
+  .blurb {
+    grid-column: 2;
+    grid-row: 1;
+
+    align-self: baseline;
+
+    margin: 0;
+
+    color: var(--color-text);
+    font-size: 1.5rem;
+    line-height: 1.4;
+  }
+
+  .post-content {
+    grid-column: 2;
+    grid-row: 2;
+
+    min-width: 0;
+  }
+
+  @media (max-width: 700px) {
+    .post-grid {
+      grid-template-columns: 1fr;
+      row-gap: var(--space-6);
+    }
+
+    .dates,
+    .blurb,
+    .post-content {
+      grid-column: 1;
+      grid-row: auto;
+    }
+  }
+</style>