🚨 Fix type issues

astro.config.mjs

@@ -13,5 +13,6 @@ export default defineConfig({
 	integrations: [mdx(), alpinejs()],
 	redirects: {
 		'/posts/[...slug]': '/blog/[...slug]',
+		'/blog': '/blog/page/1',
 	},
 });

src/components/BlogHeader.astro

@@ -25,11 +25,19 @@ const { title, date, slug } = Astro.props;
 		font-size: 1.3rem;
 	}
 
-	.calendar-icon {
-		transform: translateY(0.3rem);
-	}
-
 	strong {
 		font-weight: bolder;
 	}
+
+	.blog-header {
+		margin: 1rem 0;
+	}
+
+	.blog-header > h2 {
+		margin: 0;
+	}
+
+	.calendar-icon {
+		transform: translateY(0.3rem);
+	}
 </style>

src/components/PostPreview.astro

@@ -1,27 +1,18 @@
 ---
 import BlogHeader from '@components/BlogHeader.astro';
 import Tags from '@components/Tags.astro';
-
-interface Post {
-	data: {
-		title: string;
-		pubDate: Date;
-		tags: string[];
-	};
-	slug: string;
-}
+import type { CollectionEntry } from 'astro:content';
 
 interface Props {
-	post: Post;
+	post: CollectionEntry<'blog'>;
 }
 
 const { post } = Astro.props;
-const { data, slug } = post;
 ---
 
 <article>
-	<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
-	<Tags tags={data.tags} />
+	<BlogHeader title={post.data.title} date={post.data.pubDate} slug={post.id} />
+	<Tags tags={post.data.tags} />
 </article>
 
 <style>
@@ -31,6 +22,5 @@ const { data, slug } = post;
 
 	article:not(:first-child) {
 		border-top: var(--border);
-		padding-top: 20px;
 	}
 </style>

src/components/Tags.astro

@@ -10,7 +10,7 @@ const { tags } = Astro.props;
 	{
 		tags.sort().map((tag: string, index: number) => (
 			<>
-				<a class="tag" href={`/blog/archive/${tag}`}>
+				<a class="tag" href={`/blog/tag/${tag}`}>
 					{tag}
 				</a>
 				{index < tags.length - 1 ? ' | ' : ''}

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>
 			))