diff --git a/src/components/Post.astro b/src/components/Post.astro
index 38b662a..58692f7 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -10,8 +10,8 @@ import { formatDate } from '@lib/datefmt';
 
 export interface Props {
     entry: CollectionEntry<'posts'>,
-    prevSlug: string | null,
-    nextSlug: string | null,
+    prevSlug?: string | null,
+    nextSlug?: string | null,
 };
 
 const { entry, prevSlug, nextSlug } = Astro.props;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0989573..a4705fd 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -2,6 +2,12 @@
 import '@styles/main.css';
 import '@fontsource-variable/baskervville-sc';
 import ThemeSwitcher from '@components/ThemeSwitcher.astro';
+
+export interface Props {
+    pageTitle: string,
+}
+
+const { pageTitle } = Astro.props;
 ---
 
 <html lang="en">
@@ -9,6 +15,8 @@ import ThemeSwitcher from '@components/ThemeSwitcher.astro';
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
 
+        <title>{pageTitle}</title>
+
         <!-- avoid FOUC by setting the color schme here in the header -->
         <script>
         const explicitPref = localStorage.getItem('theme-preference');
diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
index bafe232..b9132a7 100644
--- a/src/pages/[slug].astro
+++ b/src/pages/[slug].astro
@@ -5,7 +5,8 @@ import Post from '@components/Post.astro';
 
 export async function getStaticPaths() {
     const entries = await getCollection('posts');
-    entries.sort((a, b) => a.data.date.getTime() - b.data.date.getTime())
+    // unlike `/index` and `/posts`, we want to sort ascending by date here
+    entries.sort((a, b) => a.data.date.getTime() - b.data.date.getTime());
 
     // for each route, the page gets passed the entry itself, plus the previous and next slugs
     // (if any), so that it can render links to them
@@ -20,8 +21,9 @@ export async function getStaticPaths() {
 
 }
 
+const { entry, prevSlug, nextSlug } = Astro.props;
 ---
 
-<BaseLayout>
-    <Post {...Astro.props} />
+<BaseLayout pageTitle={entry.data.title}>
+    <Post {entry} {prevSlug} {nextSlug} />
 </BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 30a3849..3e8804e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,15 @@
 ---
+import { getCollection } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
+import Post from '@components/Post.astro';
+
+const entries = await getCollection('posts');
+entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+// there will always be at leaste one entry
+const entry = entries[0]!;
+const prevSlug = entries[1] ? entries[1]?.id : null;
 ---
 
-<BaseLayout>
-    <p>Index file</p>
+<BaseLayout pageTitle={entry.data.title}>
+    <Post {entry} {prevSlug} />
 </BaseLayout>
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
new file mode 100644
index 0000000..3faafa4
--- /dev/null
+++ b/src/pages/posts.astro
@@ -0,0 +1,63 @@
+---
+import '@styles/prose.css';
+
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '@layouts/BaseLayout.astro';
+
+// return all posts
+let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.PROD );
+entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+const posts = await Promise.all(entries.map(async entry => {
+    const { remarkPluginFrontmatter } = await render(entry);
+    return { ...entry, remarkPluginFrontmatter };
+}));
+---
+
+<BaseLayout pageTitle="Posts">
+    <div class="prose">
+        <h1>All Posts</h1>
+        <ul>
+            {posts.map( (p, idx) =>
+                <li>
+                    {idx > 0 && <hr></hr>}
+                    <h2>
+                        <a href={`/${p.id}`} data-astro-prefetch>
+                            {p.data.title}
+                        </a>
+                    </h2>
+                    <p>
+                        {p.remarkPluginFrontmatter.description}
+                    </p>
+                </li>
+            )}
+        </ul>
+    </div>
+</BaseLayout>
+
+<style>
+    div.prose {
+        max-width: var(--content-width);
+        padding: var(--content-padding);
+        margin: 0 auto;
+
+        & h2 a {
+            color: var(--content-color);
+        }
+    }
+
+    h1 {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+
+    ul {
+        list-style: none;
+    }
+
+    hr {
+        border: none;
+        height: 1px;
+        margin: 2.5rem 0;
+        background-color: var(--content-color);
+    }
+</style>
diff --git a/src/plugins.ts b/src/plugins.ts
new file mode 100644
index 0000000..14c316c
--- /dev/null
+++ b/src/plugins.ts
@@ -0,0 +1,38 @@
+import type { Root, Paragraph, PhrasingContent } from 'mdast';
+import type { VFile } from 'vfile';
+import { visit } from 'unist-util-visit';
+import { toString } from 'mdast-util-to-string';
+import { writeFileSync } from 'node:fs';
+
+
+export function remarkDescription() {
+    return (tree: Root, vfile: VFile) => {
+        if (vfile.basename == 'advent-of-languages-2024-04.mdx') {
+            writeFileSync('tree.json', JSON.stringify(tree, undefined, 4));
+        }
+
+        let description: string | null = null;
+
+        visit(tree, 'paragraph', (node: Paragraph) => {
+            if (description !== null) return;
+            description = summarize(node);
+        });
+
+        // Astro exposes this as `remarkPluginFrontmatter` from render()
+        const astro = (vfile.data.astro ??= { frontmatter: {} }) as { frontmatter: Record<string, unknown> };
+        astro.frontmatter.description = description;
+    };
+}
+
+
+/**
+ * Convert a paragraph node to a plain-text string, stripping any
+ * MDX JSX elements (e.g. <Sidenote>) so their content doesn't
+ * leak into the summary.
+ */
+function summarize(par: Paragraph): string {
+    const filtered = par.children.filter(
+        (child: PhrasingContent) => !(child.type as string).startsWith('mdxJsx')
+    );
+    return toString({ type: 'paragraph', children: filtered });
+}
