portfolio/app/writing/page.tsx

import React from 'react'
import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Card} from '@/components/ui/Card'
import {Views} from '@/components/ui/Views'
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',
    heading: 'Writing on software engineering, and everything in between.',
    description: 'All of my long-form thoughts on software engineering, and more, displayed in chronological order.',
    type: 'website',
    alternates: {
        canonical: '/writing'
    }
}

export let metadata: {
    [p: string]: string | Object
    heading: string
    description: string
    title: string
    type: string
    openGraph: {
        images: string | Object
        description: string
        title: string
        type: string
    }
}

metadata = _metadata({...meta, heading: meta.heading})

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 (
        <SimpleLayout
            heading={meta.heading}
            description={meta.description}
            gradient="bg-gradient-to-r from-pink-500 to-violet-500"
        >
            <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>
                                                <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>
    )
}