start working on posts with placeholder content

src/components/Post.astro

@@ -0,0 +1,95 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import { render } from 'astro:content';
+import { formatDate } from '@lib/datefmt';
+
+export interface Props {
+    entry: CollectionEntry<'posts'>,
+    prevSlug: string | null,
+    nextSlug: string | null,
+};
+
+const { entry, prevSlug, nextSlug } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<style>
+/* 3-column grid: left gutter, center content, and right gutter */
+article {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
+    /* a bit of breathing room for narrow screens */
+    padding: 0 var(--content-padding);
+}
+
+.left-gutter {
+    grid-column: 1 / 2;
+    justify-self: end;
+}
+
+.right-gutter {
+    grid-column: 3 / 4;
+    justify-self: start;
+}
+
+.title {
+    grid-column: 2 / 3;
+}
+
+.subtitle {
+    font-size: 0.9em;
+    font-style: italic;
+    margin-top: -0.75rem;
+}
+
+.post {
+    grid-column: 2 / 3;
+}
+
+footer {
+    grid-column: 2 / 3;
+    margin-bottom: 2.5rem;
+    display: flex;
+    justify-content: space-between;
+
+    & a {
+        font-size: 1.25rem;
+        color: var(--content-color-faded);
+        text-decoration: underline;
+        text-underline-offset: 0.25em;
+        text-decoration-color: transparent;
+
+        transition: 150ms;
+
+        &:hover {
+            text-decoration-color: currentColor;
+            text-decoration: underline;
+        }
+    }
+}
+</style>
+
+<article>
+    <header class="title">
+        <h1>{ entry.data.title }</h1>
+        <p class="subtitle">{ formatDate(entry.data.date) }</p>
+    </header>
+
+    <div class="left-gutter" />
+
+    <section class="post">
+        <Content />
+    </section>
+
+    <div class="right-gutter" />
+
+    <footer>
+        {prevSlug && (
+            <a href={`/${prevSlug}`} data-astro-prefetch>Older</a>
+        )}
+        {nextSlug && (
+            <a href={`/${nextSlug}`} data-astro-prefetch>Newer</a>
+        )}
+    </footer>
+</article>