Group articles by year

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">
+                    {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>