51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import { getPosts } from '@/lib/posts'
|
|
import { PostList } from '@/components/blog/PostList'
|
|
|
|
export default async function HomePage() {
|
|
const posts = await getPosts()
|
|
|
|
return (
|
|
<main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
|
|
<header className="editorial-hero mb-14 rounded-[2rem] border border-border px-6 py-12 shadow-card sm:px-10 sm:py-16">
|
|
<div className="relative z-10 max-w-3xl">
|
|
<p className="mb-4 font-mono text-xs uppercase tracking-[0.28em] text-ink-soft">
|
|
Minimal static journal
|
|
</p>
|
|
<h1 className="heading-xl mb-5 max-w-2xl text-ink sm:text-5xl">
|
|
Quiet notes on design, code, and the web.
|
|
</h1>
|
|
<p className="max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">
|
|
A small, fast blog for thoughtful essays, implementation notes, and experiments in readable interfaces.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section aria-labelledby="latest-heading" className="space-y-7">
|
|
<div className="flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="mb-2 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Latest</p>
|
|
<h2 id="latest-heading" className="heading-lg m-0 text-ink">
|
|
Recent writing
|
|
</h2>
|
|
</div>
|
|
<p className="max-w-md text-sm leading-6 text-ink-soft">
|
|
Fresh posts appear here as soon as they are published.
|
|
</p>
|
|
</div>
|
|
|
|
{posts.length > 0 ? (
|
|
<PostList posts={posts} />
|
|
) : (
|
|
<div className="empty-state">
|
|
<p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
|
|
<h3 className="heading-sm m-0 text-ink">The notebook is ready.</h3>
|
|
<p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
|
|
Add your first MDX post and it will show up here with the same polished card treatment.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|