all-posts page, page titles, index page

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>