From 3376c53b2ee91041d5eaa0f9274da0affd7d4a9d Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Thu, 12 Sep 2024 16:36:57 +0000
Subject: [PATCH] Refactor Astro components and layouts

---
 src/components/Head.astro           |  6 +++-
 src/components/PostElement.astro    |  5 +++
 src/components/PostPagination.astro | 47 -----------------------------
 src/layouts/BaseLayout.astro        |  5 +++
 src/layouts/PageLayout.astro        |  9 ------
 src/pages/blog/[...slug].astro      | 19 +++---------
 src/pages/index.astro               |  2 +-
 7 files changed, 21 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/PostPagination.astro
 delete mode 100644 src/layouts/PageLayout.astro

diff --git a/src/components/Head.astro b/src/components/Head.astro
index 42ae32b..7a575a9 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,6 +1,10 @@
 ---
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+type Props = {
+	readonly description?: string;
+	readonly title?: string;
+};
 
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description } = Astro.props;
 ---
 
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro
index 889cc47..2f98130 100644
--- a/src/components/PostElement.astro
+++ b/src/components/PostElement.astro
@@ -1,6 +1,11 @@
 ---
+import { type CollectionEntry } from "astro:content";
 import dayjs from "dayjs";
 
+type Props = {
+	readonly post: CollectionEntry<"blog">;
+};
+
 const { post } = Astro.props;
 ---
 
diff --git a/src/components/PostPagination.astro b/src/components/PostPagination.astro
deleted file mode 100644
index 6ae6bef..0000000
--- a/src/components/PostPagination.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-const { prevPost, nextPost } = Astro.props;
----
-
-<style lang="scss">
-	.pagination {
-		overflow: hidden;
-		padding: 5rem 0;
-		width: 100%;
-	}
-
-	@media (width <=684px) {
-		.pagination {
-			padding: 2rem 0;
-		}
-	}
-
-	.prev,
-	.next {
-		max-width: 40%;
-	}
-
-	.prev {
-		float: left;
-	}
-
-	.next {
-		float: right;
-	}
-</style>
-
-<div class="pagination">
-	{
-		prevPost && (
-			<span class="prev">
-				<a href={`/blog/${prevPost.slug}`}>&lt; {prevPost.data.title}</a>
-			</span>
-		)
-	}
-	{
-		nextPost && (
-			<span class="next">
-				<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} &gt;</a>
-			</span>
-		)
-	}
-</div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 54c9128..f867900 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,6 +3,11 @@ import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import "../scss/global.scss";
 
+type Props = {
+	readonly description?: string;
+	readonly title?: string;
+};
+
 const { title, description } = Astro.props;
 ---
 
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
deleted file mode 100644
index eff37fb..0000000
--- a/src/layouts/PageLayout.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import BaseLayout from "./BaseLayout.astro";
-
-const { title, description } = Astro.props;
----
-
-<BaseLayout title={title} description={description}>
-	<slot />
-</BaseLayout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 9262a66..6754653 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,25 +1,20 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
 import Comments from "../../components/Comments.astro";
-import Layout from "../../layouts/PageLayout.astro";
-import Pagination from "../../components/PostPagination.astro";
+import Layout from "../../layouts/BaseLayout.astro";
 
 export async function getStaticPaths() {
 	const posts = await getCollection("blog");
-	const total = posts.length;
 
-	return posts.map((post, index) => ({
+	return posts.map((post) => ({
 		params: { slug: post.slug },
-		props: {
-			post,
-			prevPost: index + 1 === total ? null : posts[index + 1],
-			nextPost: index === 0 ? null : posts[index - 1],
-		},
+		props: post,
 	}));
 }
+
 type Props = CollectionEntry<"blog">;
 
-const { post, prevPost, nextPost } = Astro.props;
+const post = Astro.props;
 const { Content, remarkPluginFrontmatter } = await post.render();
 ---
 
@@ -47,10 +42,6 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 			<Content />
 		</section>
 
-		<section>
-			<Pagination prevPost={prevPost} nextPost={nextPost} />
-		</section>
-
 		<section>
 			<Comments />
 		</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4380bbc..6df8f31 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Element from "../components/PostElement.astro";
-import Layout from "../layouts/PageLayout.astro";
+import Layout from "../layouts/BaseLayout.astro";
 
 const posts = await getCollection("blog");
 ---