53 lines
2.5 KiB
TypeScript
53 lines
2.5 KiB
TypeScript
|
import Link from 'next/link';
|
||
|
|
import { getAllPosts } from '@/lib/mdx';
|
||
|
|
import { format } from 'date-fns';
|
||
|
|
|
||
|
|
export default function BlogIndex() {
|
||
|
|
const posts = getAllPosts();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-3xl mx-auto px-6 py-24 space-y-12 animate-fade-in">
|
||
|
|
<header className="space-y-4 text-center sm:text-left">
|
||
|
|
<h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Writing</h1>
|
||
|
|
<p className="text-zinc-500 dark:text-zinc-400 font-light">
|
||
|
|
Thoughts on software, design, and minimalism.
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="grid gap-10">
|
||
|
|
{posts.map((post) => (
|
||
|
|
<article key={post.slug} className="group relative flex flex-col space-y-3">
|
||
|
|
<div className="flex items-center gap-3 text-sm text-zinc-400 dark:text-zinc-500">
|
||
|
|
<time dateTime={post.date}>
|
||
|
|
{format(new Date(post.date), 'MMMM d, yyyy')}
|
||
|
|
</time>
|
||
|
|
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{post.tags?.map(tag => (
|
||
|
|
<span key={tag} className="text-xs uppercase tracking-wider">{tag}</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Link href={`/blog/${post.slug}`} className="block">
|
||
|
|
<h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
|
||
|
|
{post.title}
|
||
|
|
</h2>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<p className="text-zinc-600 dark:text-zinc-400 font-light leading-relaxed">
|
||
|
|
{post.description}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="pt-2">
|
||
|
|
<Link href={`/blog/${post.slug}`} className="text-sm font-medium text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 underline-offset-4 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all">
|
||
|
|
Read more
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|