all-posts page, page titles, index page

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>

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>

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>