Group articles by year

app/writing/page.tsx

@@ -6,6 +6,7 @@ import {getAllArticles} from '@/lib/getAllArticles'
 import {metadata as _metadata} from '@/lib/generateMetadata'
 import type {Article} from '@/types'
 import {format} from 'date-fns'
+import {Section} from '@/components/ui/Section'
 
 const meta = {
     title: 'Writing',
@@ -33,14 +34,34 @@ export let metadata: {
 
 metadata = _metadata({...meta, heading: meta.heading})
 
-function Article({article}: { article: Article }) {
+export default async function Writing() {
+    const groupedArticles = (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 (
-        <article>
+        <SimpleLayout
-            <Card variant="inline">
+            heading={meta.heading}
-                <Card.Title href={`/writing/${article.slug}`}>
+            description={meta.description}
-                    {article.title}
+            gradient="bg-gradient-to-r from-pink-500 to-violet-500"
-                </Card.Title>
+        >
-                <p className="flex order-first space-x-1 z-10 mb-3 md:mb-0 md:ml-4 md:order-last flex-shrink-0">
+            <div className="space-y-20">
+                {Object.entries(groupedArticles)
+                    .sort(([a], [b]) => parseInt(b) - parseInt(a))
+                    .map(([year, articles]) => (
+                            <Section title={year} key={year}>
+                                <ul role="list" className="space-y-16">
+                                    {articles.map((article) => (
+                                        <Card key={article.slug} as="li">
+                                            <Card.Title href={`/writing/${article.slug}`}>{article.title}</Card.Title>
+                                            <p className="flex order-first space-x-1 z-10 mb-3">
                                                 <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
                                                     {format(article.date, 'd MMMM yyyy')}
                                                 </Card.Eyebrow>
@@ -52,25 +73,12 @@ function Article({article}: { article: Article }) {
                                                 />
                                             </p>
                                         </Card>
-        </article>
+                                    ))}
+                                </ul>
+                            </Section>
+                        )
                     )
                 }
-
-export default async function Writing() {
-    const articles = (await getAllArticles()).map(({component, ...meta}) => meta)
-
-    return (
-        <SimpleLayout
-            heading={meta.heading}
-            description={meta.description}
-            gradient="bg-gradient-to-r from-pink-500 to-violet-500"
-        >
-            <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}/>
-                    ))}
-                </div>
             </div>
         </SimpleLayout>
     )