From 6e4a28f955a0cca1ba170459b838ec8518e34215 Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Sat, 10 May 2025 23:14:20 +0100
Subject: [PATCH] Group articles by year

---
 app/writing/page.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/writing/page.tsx b/app/writing/page.tsx
index 47b8d3e..139c490 100644
--- a/app/writing/page.tsx
+++ b/app/writing/page.tsx
@@ -57,7 +57,16 @@ function Article({article}: { article: Article }) {
 }
 
 export default async function Writing() {
-    const articles = (await getAllArticles()).map(({component, ...meta}) => meta)
+    const articles = (await getAllArticles(true))
+        .map(({component, ...meta}) => meta)
+        .reduce<{ [year: string]: Article[] }>((acc, article) => {
+            const year = new Date(article.date).getFullYear()
+            if (!acc[year]) {
+                acc[year] = []
+            }
+            acc[year].push(article)
+            return acc
+        }, {})
 
     return (
         <SimpleLayout
@@ -67,9 +76,16 @@ export default async function Writing() {
         >
             <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none">
                 <div className="max-w-3xl space-y-16 mt-6">
-                    {articles.map((article) => (
-                        <Article key={article.slug} article={article}/>
-                    ))}
+                    {Object.entries(articles)
+                        .sort(([a], [b]) => parseInt(b) - parseInt(a))
+                        .map(([year, articles]) => (
+                            <React.Fragment key={year}>
+                                <h2 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">{year}</h2>
+                                {articles.map((article) => (
+                                    <Article key={article.slug} article={article}/>
+                                ))}
+                            </React.Fragment>
+                        ))}
                 </div>
             </div>
         </SimpleLayout>