feat: group blog posts by year in index page

- Implemented functionality to categorize blog posts by publication year.
- Updated the blog index page to display posts organized under their respective years for improved navigation.

1 files changed, 24 insertions, 3 deletions

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 48d33e8..0c33b66 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,4 +1,5 @@
 ---
+import type { CollectionEntry } from "astro:content";
 import { getCollection } from "astro:content";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
@@ -8,12 +9,32 @@ const posts = await getCollection("blog", ({ data }) => {
 });
 
 posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc, post) => {
+	const year = post.data.pubDate.getFullYear().toString();
+	if (!acc[year]) {
+		acc[year] = [];
+	}
+	acc[year].push(post);
+	return acc;
+}, {});
+
+const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
 ---
 
 <Layout>
 	<section style={{ "margin-top": "3rem" }}>
-		<ul>
-			{posts.map((post) => <PostElement post={post} />)}
-		</ul>
+		{
+			years.map((year) => (
+				<div>
+					<div style={{ "margin-bottom": "1rem" }}>{year}</div>
+					<ul>
+						{postsByYear[year].map((post) => (
+							<PostElement post={post} />
+						))}
+					</ul>
+				</div>
+			))
+		}
 	</section>
 </Layout>