43 lines
1.5 KiB
TypeScript

import Link from 'next/link'
import PostCard from '@/components/blog/PostCard'
import { getAllPosts } from '@/app/blog/utils'
export const metadata = {
title: 'Blog',
description: 'Read my blog.',
}
export default async function Page() {
const posts = await getAllPosts()
const hasRepo = Boolean(process.env.BLOG_REPO)
const repo = process.env.BLOG_REPO
const repoPath = process.env.BLOG_PATH || ''
const repoBranch = process.env.BLOG_BRANCH || 'main'
const sourceLabel = hasRepo
? `Local MDX + GitHub (${repo}${repoPath ? `/${repoPath}` : ''}@${repoBranch})`
: 'Local MDX'
return (
<section className="mx-auto max-w-5xl px-4 md:px-6">
<div className="mb-2">
<Link
href="/"
className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-700 transition-colors hover:bg-black/[0.04] hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-neutral-100"
aria-label="Back to home"
>
<span className="underline-offset-4 hover:underline">Back home</span>
</Link>
</div>
<h1 className="font-semibold text-2xl mb-6 tracking-tighter">My Blog</h1>
<div className="mb-4 text-xs text-neutral-600 dark:text-neutral-400">
Content source: {sourceLabel}
</div>
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
{posts.map((post) => (
<PostCard key={post.slug} post={post} />
))}
</div>
</section>
)
}