2022-12-06 12:54:34 +00:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
|
|
|
|
|
import {Card} from '@/components/Card'
|
|
|
|
|
import {SimpleLayout} from '@/components/SimpleLayout'
|
|
|
|
|
import {getAllArticles} from '@/lib/getAllArticles'
|
|
|
|
|
import {formatDate} from '@/lib/formatDate'
|
|
|
|
|
|
|
|
|
|
function Article({article}) {
|
|
|
|
|
return (
|
2023-01-05 20:03:09 +00:00
|
|
|
<article>
|
|
|
|
|
<Card small={true}>
|
2022-12-06 12:54:34 +00:00
|
|
|
<Card.Title href={`/writing/${article.slug}`}>
|
|
|
|
|
{article.title}
|
|
|
|
|
</Card.Title>
|
|
|
|
|
<Card.Eyebrow
|
|
|
|
|
as="time"
|
|
|
|
|
dateTime={article.date}
|
|
|
|
|
decorate={false}
|
2023-01-06 22:33:20 +00:00
|
|
|
className="flex-shrink-0 md:order-last md:mb-0"
|
2022-12-06 12:54:34 +00:00
|
|
|
>
|
|
|
|
|
{formatDate(article.date)}
|
|
|
|
|
</Card.Eyebrow>
|
|
|
|
|
</Card>
|
|
|
|
|
</article>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function ArticlesIndex({articles}) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Writing - Ryan Freeman</title>
|
|
|
|
|
<meta
|
|
|
|
|
name="description"
|
|
|
|
|
content="Writing on software engineering, and everything in between."
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:title"
|
|
|
|
|
content="Writing - Ryan Freeman"
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:description"
|
|
|
|
|
content="Writing on software engineering, and everything in between."
|
|
|
|
|
/>
|
|
|
|
|
</Head>
|
|
|
|
|
<SimpleLayout
|
|
|
|
|
title="Writing on software engineering, and everything in between."
|
|
|
|
|
intro="All of my long-form thoughts on software engineering, and more, displayed in chronological order."
|
|
|
|
|
gradient="bg-gradient-to-r from-pink-500 to-violet-500"
|
|
|
|
|
>
|
2023-01-05 20:03:09 +00:00
|
|
|
<div>
|
|
|
|
|
<div className="max-w-3xl space-y-16">
|
2022-12-06 12:54:34 +00:00
|
|
|
{articles.map((article) => (
|
|
|
|
|
<Article key={article.slug} article={article}/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SimpleLayout>
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps() {
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
articles: (await getAllArticles()).map(({component, ...meta}) => meta),
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
