3 files changed, 54 insertions, 35 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>