94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { pb } from "@/lib/pb";
|
||
import Link from "next/link";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { getDictionary } from "@/lib/dictionaries";
|
||
|
||
interface PBPost {
|
||
id: string;
|
||
title: string;
|
||
slug: string;
|
||
excerpt: string;
|
||
lang: string;
|
||
created: string;
|
||
published: boolean;
|
||
}
|
||
|
||
interface Props {
|
||
params: Promise<{ lang: string }>;
|
||
}
|
||
|
||
export default async function BlogIndexPage({ params }: Props) {
|
||
const { lang } = await params;
|
||
const dict = await getDictionary(lang); // Подключаем словарь
|
||
|
||
let records: PBPost[] = [];
|
||
|
||
try {
|
||
// Передаём кастомный fetch с next.revalidate, чтобы PocketBase SDK использовал
|
||
// нативное ISR-кэширование Next.js (обновление раз в час) вместо запроса на
|
||
// каждый рендер — иначе SDK делает обычный fetch без опций кэша Next.js.
|
||
records = await pb.collection(`posts_${lang}`).getFullList<PBPost>({
|
||
filter: "published = true",
|
||
sort: "-created",
|
||
fetch: (url, config) =>
|
||
fetch(url, { ...config, next: { revalidate: 3600 } }),
|
||
});
|
||
} catch (err) {
|
||
console.error("Failed to fetch blog posts:", err);
|
||
}
|
||
|
||
return (
|
||
<main className="min-h-screen pt-32 pb-20 container mx-auto max-w-5xl px-4">
|
||
<Badge
|
||
variant="outline"
|
||
className="mb-6 border-primary/30 text-primary uppercase tracking-widest"
|
||
>
|
||
{dict.blog.archive}
|
||
</Badge>
|
||
|
||
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tighter mb-12">
|
||
{dict.blog.systemLogs}
|
||
</h1>
|
||
|
||
{records.length === 0 ? (
|
||
<div className="p-20 border border-dashed border-border/50 rounded-3xl text-center bg-card/10">
|
||
<p className="text-muted-foreground font-mono italic">
|
||
{dict.blog.emptySector}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{records.map((post) => (
|
||
<Link
|
||
href={`/${lang}/blog/${post.slug}`}
|
||
key={post.id}
|
||
className="group block"
|
||
>
|
||
<article className="p-8 border border-border/50 rounded-2xl bg-card/20 hover:bg-card/40 hover:border-primary/50 transition-all duration-300 h-full flex flex-col">
|
||
<div className="text-xs text-primary font-mono mb-4 flex items-center gap-2">
|
||
<span className="w-1.5 h-1.5 bg-primary rounded-full animate-pulse" />
|
||
{new Date(post.created).toLocaleDateString(
|
||
lang === "ru" ? "ru-RU" : "en-US",
|
||
)}
|
||
</div>
|
||
|
||
<h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors duration-300">
|
||
{post.title}
|
||
</h2>
|
||
|
||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-3">
|
||
{post.excerpt}
|
||
</p>
|
||
|
||
<div className="mt-8 pt-4 border-t border-border/30 text-xs font-bold uppercase tracking-widest text-primary/50 group-hover:text-primary transition-colors">
|
||
{dict.blog.decrypt}
|
||
</div>
|
||
</article>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</main>
|
||
);
|
||
}
|