41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
export const dynamic = 'force-dynamic';
|
|
import { pb, type BlogPost } from "@/lib/pb";
|
|
import Link from "next/link";
|
|
|
|
export const metadata = { title: "Blog" };
|
|
|
|
async function getPosts() {
|
|
try { return pb.collection("blog_posts").getList<BlogPost>(1, 20, { sort: "-created" }); }
|
|
catch { return null; }
|
|
}
|
|
|
|
export default async function BlogPage() {
|
|
const data = await getPosts();
|
|
const posts = data?.items ?? [];
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-6 py-12">
|
|
<div className="mb-12">
|
|
<div className="text-xs font-mono text-[var(--muted)] tracking-widest uppercase mb-2">Notizen</div>
|
|
<h1 style={{ fontFamily:"'Syne',sans-serif", fontWeight:800, fontSize:"2.25rem", letterSpacing:"-0.03em" }} className="text-[var(--ink)]">Blog</h1>
|
|
<p className="text-[var(--muted)] mt-2">Funde, Besonderheiten und Gedanken rund ums Sammeln.</p>
|
|
</div>
|
|
{posts.length === 0 ? (
|
|
<div className="text-center py-24 text-[var(--muted)]">
|
|
<div style={{ fontFamily:"'Syne',sans-serif", fontWeight:700, fontSize:"1.5rem" }} className="mb-2">Noch keine Beiträge</div>
|
|
<p className="text-sm">Schreib den ersten Eintrag über den PocketBase Admin.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{posts.map((post, i) => (
|
|
<article key={post.id} className={i < posts.length-1 ? "pb-8 border-b border-[var(--warm)]" : ""}>
|
|
<Link href={`/blog/${post.slug}`} className="block group">
|
|
<h2 style={{ fontFamily:"'Syne',sans-serif", fontWeight:700, fontSize:"1.35rem" }} className="mt-2 text-[var(--ink)] group-hover:text-[var(--accent)] transition-colors">{post.titel}</h2>
|
|
{post.inhalt && <p className="mt-2 text-[var(--muted)] text-sm leading-relaxed line-clamp-3">{post.inhalt.replace(/[#*`\[\]]/g,"").slice(0,220)}…</p>}
|
|
</Link>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|