Refactor Astro components and layouts

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

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

src/components/PostPagination.astro

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

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

src/layouts/PageLayout.astro

@@ -1,9 +0,0 @@
----
-import BaseLayout from "./BaseLayout.astro";
-
-const { title, description } = Astro.props;
----
-
-<BaseLayout title={title} description={description}>
-	<slot />
-</BaseLayout>

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 Layout from "../../layouts/BaseLayout.astro";
-import Pagination from "../../components/PostPagination.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: {
+		props: post,
-			post,
-			prevPost: index + 1 === total ? null : posts[index + 1],
-			nextPost: index === 0 ? null : posts[index - 1],
-		},
 	}));
 }
+
 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>

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