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,31 +34,17 @@ export let metadata: {
 
 metadata = _metadata({...meta, heading: meta.heading})
 
-function Article({article}: { article: Article }) {
-    return (
-        <article>
-            <Card variant="inline">
-                <Card.Title href={`/writing/${article.slug}`}>
-                    {article.title}
-                </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">
-                    <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
-                        {format(article.date, 'd MMMM yyyy')}
-                    </Card.Eyebrow>
-                    <Views
-                        slug={article.slug}
-                        title={article.title}
-                        className="text-sm text-zinc-500 dark:text-zinc-400"
-                        shouldUpdateViews={false}
-                    />
-                </p>
-            </Card>
-        </article>
-    )
-}
-
 export default async function Writing() {
-    const articles = (await getAllArticles()).map(({component, ...meta}) => meta)
+    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 (
         <SimpleLayout
@@ -65,12 +52,33 @@ export default async function Writing() {
             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="space-y-20">
-                <div className="max-w-3xl space-y-16 mt-6">
+                {Object.entries(groupedArticles)
-                    {articles.map((article) => (
+                    .sort(([a], [b]) => parseInt(b) - parseInt(a))
-                        <Article key={article.slug} article={article}/>
+                    .map(([year, articles]) => (
-                    ))}
+                            <Section title={year} key={year}>
-                </div>
+                                <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>
+                                                <Views
+                                                    slug={article.slug}
+                                                    title={article.title}
+                                                    className="text-sm text-zinc-500 dark:text-zinc-400"
+                                                    shouldUpdateViews={false}
+                                                />
+                                            </p>
+                                        </Card>
+                                    ))}
+                                </ul>
+                            </Section>
+                        )
+                    )
+                }
             </div>
         </SimpleLayout>
     )