feat: create post page template with dynamic routing and prose wrapper

src/pages/posts/[...slug].astro

@@ -0,0 +1,49 @@
+---
+import { getCollection, render } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import NavBar from '../../components/NavBar.astro';
+import PostHeader from '../../components/PostHeader.astro';
+import { getReadingTime } from '../../utils/reading-time';
+import '../../styles/prose.css';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('posts');
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: { post },
+  }));
+}
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+const readingTime = post.body ? getReadingTime(post.body) : undefined;
+---
+
+<BaseLayout title={post.data.title} description={post.data.summary}>
+  <NavBar slot="nav" />
+  <PostHeader
+    title={post.data.title}
+    date={post.data.date}
+    type={post.data.type}
+    readingTime={readingTime}
+  />
+  <article class="prose-wrapper">
+    <div class="prose">
+      <Content />
+    </div>
+  </article>
+</BaseLayout>
+
+<style>
+  .prose-wrapper {
+    max-width: var(--width-prose);
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: var(--space-12);
+  }
+</style>