the horrors

src/pages/blog/[id].astro

@@ -0,0 +1,24 @@
+---
+import Page from "~/layouts/Page.astro";
+import { getCollection, render } from "astro:content";
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { id: post.id },
+    props: { post },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<Page
+  title={post.data.title}
+  description={post.data.description}
+  date={post.data.date}
+  icon={post.data.icon}
+>
+  <Content />
+</Page>

src/pages/blog/index.astro

@@ -0,0 +1,12 @@
+---
+import Page from "~/layouts/Page.astro";
+import BlogPostList from "~/components/lists/BlogPostList.astro";
+---
+
+<Page
+  title="Post index"
+  description="A list of all my blog posts."
+  icon="fa-solid fa-blog"
+>
+  <BlogPostList collection="blog" />
+</Page>