Added Pagination component

astro.config.mjs

@@ -8,4 +8,10 @@ export default defineConfig({
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
 	},
+	redirects: {
+		"/blog": {
+			destination: "/",
+			status: 301,
+		},
+	},
 });

src/components/Pagination.astro

@@ -0,0 +1,46 @@
+---
+type Props = {
+	readonly prevUrl?: string;
+	readonly nextUrl?: string;
+};
+
+const { prevUrl, nextUrl } = Astro.props;
+---
+
+<style lang="scss">
+	.pagination {
+		overflow: hidden;
+		padding: 3rem 0;
+		width: 100%;
+	}
+
+	.prev,
+	.next {
+		max-width: 40%;
+	}
+
+	.prev {
+		float: left;
+	}
+
+	.next {
+		float: right;
+	}
+</style>
+
+<div class="pagination">
+	{
+		prevUrl && (
+			<span class="prev">
+				<a href={prevUrl}>&lt; Prev</a>
+			</span>
+		)
+	}
+	{
+		nextUrl && (
+			<span class="next">
+				<a href={nextUrl}>Next &gt;</a>
+			</span>
+		)
+	}
+</div>

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

@@ -0,0 +1,30 @@
+---
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import { getCollection } from "astro:content";
+import Layout from "../layouts/BaseLayout.astro";
+import Pagination from "../components/Pagination.astro";
+import PostSummary from "../components/PostSummary.astro";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const posts = await getCollection("blog");
+	posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+	return paginate(posts, {
+		pageSize: 5,
+	});
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { page } = Astro.props;
+---
+
+<Layout>
+	<section>
+		{page.data.map((post) => <PostSummary post={post} />)}
+	</section>
+
+	<section>
+		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+	</section>
+</Layout>

src/pages/index.astro

@@ -1,14 +0,0 @@
----
-import { getCollection } from "astro:content";
-import Element from "../components/PostElement.astro";
-import Layout from "../layouts/BaseLayout.astro";
-
-const posts = await getCollection("blog");
-posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
----
-
-<Layout>
-	<section>
-		{posts.map((post) => <Element post={post} />)}
-	</section>
-</Layout>