2023-02-04 23:12:00 +00:00
|
|
|
import React from 'react'
|
2023-01-14 19:31:05 +00:00
|
|
|
import {GetStaticProps} from 'next'
|
2022-12-06 12:54:34 +00:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import {Card} from '@/components/Card'
|
2023-02-02 21:32:09 +00:00
|
|
|
import {SimpleLayout} from '@/components/layouts/SimpleLayout'
|
2023-02-04 23:12:00 +00:00
|
|
|
import {Views} from '@/components/Views'
|
2022-12-06 12:54:34 +00:00
|
|
|
import {getAllArticles} from '@/lib/getAllArticles'
|
|
|
|
|
import {formatDate} from '@/lib/formatDate'
|
2023-01-14 19:31:05 +00:00
|
|
|
import {Article} from 'types'
|
|
|
|
|
|
|
|
|
|
function Article({article}: { article: Article }) {
|
2022-12-06 12:54:34 +00:00
|
|
|
return (
|
2023-01-05 20:03:09 +00:00
|
|
|
<article>
|
2023-02-07 23:39:38 +00:00
|
|
|
<Card variant="inline">
|
2022-12-06 12:54:34 +00:00
|
|
|
<Card.Title href={`/writing/${article.slug}`}>
|
|
|
|
|
{article.title}
|
|
|
|
|
</Card.Title>
|
2023-02-10 22:14:47 +00:00
|
|
|
<p className="flex order-first space-x-1 z-10 mb-3 md:mb-0 md:ml-4 md:order-last flex-shrink-0">
|
2023-02-04 23:12:00 +00:00
|
|
|
<Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
|
|
|
|
|
{formatDate(article.date)}
|
|
|
|
|
</Card.Eyebrow>
|
|
|
|
|
<Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
|
|
|
|
|
</p>
|
2022-12-06 12:54:34 +00:00
|
|
|
</Card>
|
|
|
|
|
</article>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-14 19:31:05 +00:00
|
|
|
export default function ArticlesIndex({articles}: { articles: Article[] }) {
|
2022-12-06 12:54:34 +00:00
|
|
|
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-02-07 23:39:38 +00:00
|
|
|
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none">
|
2023-02-04 23:12:00 +00:00
|
|
|
<div className="max-w-3xl space-y-16 mt-6">
|
2022-12-06 12:54:34 +00:00
|
|
|
{articles.map((article) => (
|
|
|
|
|
<Article key={article.slug} article={article}/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SimpleLayout>
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-14 19:31:05 +00:00
|
|
|
export const getStaticProps: GetStaticProps = async () => {
|
2022-12-06 12:54:34 +00:00
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
articles: (await getAllArticles()).map(({component, ...meta}) => meta),
|
2023-01-14 19:31:05 +00:00
|
|
|
}
|
2022-12-06 12:54:34 +00:00
|
|
|
}
|
2023-01-14 19:31:05 +00:00
|
|
|
}
|
