🚨 Fix type issues

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

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 
 import Layout from '@layouts/Layout.astro';
 import BlogHeader from '@components/BlogHeader.astro';
@@ -8,7 +8,7 @@ import Tags from '@components/Tags.astro';
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
 	return posts.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: { post },
 	}));
 }
@@ -17,10 +17,11 @@ const { post } = Astro.props;
 
 const { data } = post;
 
-const { Content } = await post.render();
+const { Content } = await render(post);
 ---
 
 <Layout title={data.title}>
+	<h1></h1>
 	<article>
 		<BlogHeader title={data.title} date={data.pubDate} />
 		<Content />

src/pages/blog/index.astro

@@ -1,36 +0,0 @@
----
-import { getCollection } from 'astro:content';
-
-import Layout from '@layouts/Layout.astro';
-import PostPreview from '@components/PostPreview.astro';
-
-const posts = await getCollection('blog');
----
-
-<Layout title="Blog">
-	{
-		posts
-			.sort(
-				(a, b) =>
-					new Date(b.data.pubDate).valueOf() -
-					new Date(a.data.pubDate).valueOf()
-			)
-			.slice(0, 10)
-			.map((post) => <PostPreview post={post} />)
-	}
-	{
-		posts.length < 6 ? null : (
-			<div class="all-posts">
-				<a href="/blog/archive/all">All Posts</a>
-			</div>
-		)
-	}
-</Layout>
-
-<style>
-	.all-posts {
-		text-align: center;
-		padding: 1rem;
-		font-size: 1.2rem;
-	}
-</style>

src/pages/blog/page/[page].astro

@@ -0,0 +1,65 @@
+---
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Page } from 'astro';
+
+import Layout from '@layouts/Layout.astro';
+import PostPreview from '@components/PostPreview.astro';
+
+export async function getStaticPaths({ paginate }) {
+	const allPosts = await getCollection('blog');
+
+	allPosts.sort(
+		(a, b) =>
+			Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
+	);
+
+	return paginate(allPosts, { pageSize: 10 });
+}
+
+interface Props {
+	page: Page<CollectionEntry<'blog'>>;
+}
+
+const { page } = Astro.props;
+---
+
+<Layout title="Blog Archive">
+	<ul>
+		{page.data.map((post) => <PostPreview post={post} />)}
+	</ul>
+	<div class="pagination">
+		{
+			page.currentPage !== 1 ? (
+				<a href={`/blog/page/${page.currentPage - 1}`}>Previous</a>
+			) : (
+				<span class="disabled">Previous</span>
+			)
+		}
+		{
+			page.currentPage !== page.lastPage ? (
+				<a href={`/blog/page/${page.currentPage + 1}`}>Next</a>
+			) : (
+				<span class="disabled">Next</span>
+			)
+		}
+	</div>
+</Layout>
+
+<style>
+	ul {
+		list-style: none;
+	}
+
+	.pagination {
+		display: flex;
+		justify-content: center;
+		margin-top: 2rem;
+		margin: auto;
+		gap: 1rem;
+	}
+
+	.disabled {
+		color: var(--text);
+		opacity: 0.5;
+	}
+</style>

src/pages/blog/tag/[tag].astro

@@ -8,6 +8,7 @@ export async function getStaticPaths() {
 	const posts = await getCollection('blog');
 
 	const tags = ['all'];
+
 	posts.forEach((post) =>
 		post.data.tags.forEach((tag) => {
 			if (!tags.includes(tag)) {
@@ -46,14 +47,19 @@ posts.sort(
 );
 ---
 
-<Layout title="Blog Archive">
+<Layout title={`Blog - ${tag}`}>
+	<h1>All posts tagged: {tag}</h1>
 	<ul>
 		{
-			posts.map(({ slug, data }) => (
+			posts.map((post) => (
 				<li>
-					<a href={`/posts/${slug}`}>{data.title}</a> -
+					{console.log(post)}
+					<a href={`/posts/${post.id}`}>{post.data.title}</a> -
 					<span>
-						{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
+						{format(
+							add(new Date(post.data.pubDate), { hours: 6 }),
+							'MMM do, y'
+						)}
 					</span>
 				</li>
 			))