8 files changed, 99 insertions, 74 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..4571a5c
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,22 @@
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	header {
+		padding-bottom: 1rem;
+		text-align: right;
+	}
+
+	a {
+		text-decoration: none;
+		margin-right: 1.5rem;
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+</style>
+
+<header>
+	<a href="/">Home</a>
+	<a href="/blog/">Blog</a>
+</header>
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
deleted file mode 100644
index 0d656df..0000000
--- a/src/components/Pagination.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-type Props = {
-	readonly nextUrl?: string;
-	readonly prevUrl?: string;
-};
-
-const { nextUrl, prevUrl } = Astro.props;
----
-
-<style lang="scss">
-	div {
-		text-align: center;
-	}
-
-	span {
-		margin: 0 2em;
-	}
-</style>
-
-<div>
-	{
-		prevUrl && (
-			<span>
-				<a href={prevUrl}>&lt; Prev</a>
-			</span>
-		)
-	}
-	{
-		nextUrl && (
-			<span>
-				<a href={nextUrl}>Next &gt;</a>
-			</span>
-		)
-	}
-</div>
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro
new file mode 100644
index 0000000..703189e
--- /dev/null
+++ b/src/components/PostElement.astro
@@ -0,0 +1,32 @@
+---
+import { type CollectionEntry } from "astro:content";
+import dayjs from "dayjs";
+
+type Props = {
+	readonly post: CollectionEntry<"blog">;
+};
+
+const { post } = Astro.props;
+const { remarkPluginFrontmatter } = await post.render();
+const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+---
+
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	small {
+		font-size: $fontSizeBase * 0.75;
+		opacity: 0.5;
+	}
+</style>
+
+<li>
+	<a href={`/blog/${post.slug}`}>{post.data.title}</a>
+	<div>
+		<small>
+			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+			<span>•</span>
+			<span>{remarkPluginFrontmatter.minutesRead}</span>
+		</small>
+	</div>
+</li>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ca8826a..0209c58 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,6 +1,7 @@
 ---
 import Analytics from "../components/Analytics.astro";
 import Head from "../components/Head.astro";
+import Header from "../components/Header.astro";
 import "../scss/global.scss";
 
 type Props = {
@@ -19,6 +20,10 @@ const { description, title } = Astro.props;
 
 	<body>
 		<main>
+			<section>
+				<Header />
+			</section>
+
 			<slot />
 		</main>
 		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
deleted file mode 100644
index 6d513b2..0000000
--- a/src/pages/[...page].astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-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";
-
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-export const getStaticPaths = (async ({ paginate }) => {
-	const posts = await getCollection("blog", ({ data }) => {
-		return data.draft !== true;
-	});
-
-	posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
-
-	return paginate(posts, {
-		pageSize: 10,
-	});
-}) satisfies GetStaticPaths;
-
-const { page } = Astro.props;
----
-
-<Layout>
-	<section style={{ "margin-top": "3rem" }}>
-		{page.data.map((post) => <PostSummary post={post} />)}
-	</section>
-
-	<section>
-		<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
-	</section>
-</Layout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 41b0f5c..c4e542c 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -33,10 +33,12 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 <Layout description={post.data.description} title={post.data.title}>
 	<article>
 		<section>
+			<h1>{post.data.title}</h1>
+		</section>
+
+		<section>
 			<p>
 				<small>
-					<a href="/">&lt; Home</a>
-					<span>&nbsp;•&nbsp;</span>
 					Posted
 					<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
 					by&nbsp;{post.data.author}
@@ -47,10 +49,6 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
 		</section>
 
 		<section>
-			<h1>{post.data.title}</h1>
-		</section>
-
-		<section>
 			<Content />
 		</section>
 
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..48d33e8
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,19 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../../layouts/BaseLayout.astro";
+import PostElement from "../../components/PostElement.astro";
+
+const posts = await getCollection("blog", ({ data }) => {
+	return data.draft !== true;
+});
+
+posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+---
+
+<Layout>
+	<section style={{ "margin-top": "3rem" }}>
+		<ul>
+			{posts.map((post) => <PostElement post={post} />)}
+		</ul>
+	</section>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 0000000..56ccdff
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/BaseLayout.astro";
+import PostSummary from "../components/PostSummary.astro";
+
+const posts = await getCollection("blog", ({ data }) => {
+	return data.draft !== true;
+});
+
+posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+---
+
+<Layout>
+	<section style={{ "margin-top": "3rem" }}>
+		{posts.map((post) => <PostSummary post={post} />)}
+	</section>
+</Layout>