base with cms integrated
This commit is contained in:
Трапезников Кирилл Иванович
@@ -0,0 +1,113 @@
|
||||
import { pb, getPbImage } from "@/lib/pb";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, Calendar, Clock, ShieldCheck } from "lucide-react";
|
||||
|
||||
interface PBPost {
|
||||
id: string;
|
||||
collectionId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
content: string;
|
||||
image: string;
|
||||
lang: string;
|
||||
created: string;
|
||||
published: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ lang: string; slug: string }>;
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({ params }: Props) {
|
||||
const { lang, slug } = await params;
|
||||
const isRu = lang === "ru";
|
||||
|
||||
let post: PBPost;
|
||||
|
||||
try {
|
||||
post = await pb
|
||||
.collection("posts")
|
||||
.getFirstListItem<PBPost>(
|
||||
`slug = "${slug}" && lang = "${lang}" && published = true`,
|
||||
{ cache: "no-store" },
|
||||
);
|
||||
} catch (error) {
|
||||
// В продакшене лучше не логировать каждый 404, чтобы не забивать консоль
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen pt-32 pb-20 bg-background">
|
||||
<div className="container mx-auto max-w-3xl px-4">
|
||||
{/* Хлебные крошки / Назад */}
|
||||
<Link
|
||||
href={`/${lang}/blog`}
|
||||
className="inline-flex items-center gap-2 text-sm font-mono text-muted-foreground hover:text-primary mb-12 transition-colors group"
|
||||
>
|
||||
<ArrowLeft
|
||||
size={16}
|
||||
className="group-hover:-translate-x-1 transition-transform"
|
||||
/>
|
||||
<span className="opacity-50">root@netrunner:~#</span>
|
||||
<span>cd ../logs</span>
|
||||
</Link>
|
||||
|
||||
<article className="relative">
|
||||
{/* Обложка с неоновым свечением */}
|
||||
{post.image && (
|
||||
<div className="w-full h-[300px] md:h-[450px] rounded-3xl overflow-hidden mb-12 border border-border/50 shadow-2xl shadow-primary/10 relative">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={getPbImage(post, post.image)}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Шапка статьи */}
|
||||
<div className="flex flex-wrap items-center gap-6 text-[10px] font-mono text-primary mb-8 uppercase tracking-[0.2em]">
|
||||
<span className="flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full border border-primary/20">
|
||||
<Calendar size={12} />
|
||||
{new Date(post.created).toLocaleDateString(
|
||||
isRu ? "ru-RU" : "en-US",
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-2 text-muted-foreground">
|
||||
<Clock size={12} />
|
||||
{isRu ? "Чтение: 4 мин" : "Read: 4 min"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2 text-green-500/70">
|
||||
<ShieldCheck size={12} />
|
||||
{isRu ? "Проверено: Netrunner" : "Verified: Netrunner"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tighter mb-10 leading-[1.1] text-foreground">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
{/* Тело статьи с Tailwind Typography (prose) */}
|
||||
<div
|
||||
className="prose prose-invert prose-p:text-muted-foreground/90 prose-p:leading-relaxed prose-headings:text-foreground prose-headings:tracking-tighter prose-a:text-primary prose-strong:text-foreground prose-code:text-primary max-w-none text-lg selection:bg-primary/30"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
|
||||
{/* Футер статьи */}
|
||||
<div className="mt-20 pt-10 border-t border-border/30 flex justify-between items-center">
|
||||
<div className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest">
|
||||
End of transmission // node_th_01
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-2 h-2 bg-primary rounded-full animate-ping" />
|
||||
<div className="w-2 h-2 bg-primary rounded-full opacity-50" />
|
||||
<div className="w-2 h-2 bg-primary rounded-full opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { pb } from "@/lib/pb";
|
||||
import Link from "next/link";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
// Типизация записи из PocketBase
|
||||
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 isRu = lang === "ru";
|
||||
|
||||
let records: PBPost[] = [];
|
||||
|
||||
try {
|
||||
// Возвращаем фильтрацию: только нужный язык и только опубликованные
|
||||
records = await pb.collection("posts").getFullList<PBPost>({
|
||||
filter: `lang = "${lang}" && published = true`,
|
||||
sort: "-created",
|
||||
cache: "no-store", // Чтобы новые посты из админки появлялись сразу
|
||||
});
|
||||
} 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"
|
||||
>
|
||||
{isRu ? "Архив терминала" : "Terminal Archive"}
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tighter mb-12">
|
||||
{isRu ? "Data Logs" : "System Logs"}
|
||||
</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">
|
||||
{isRu
|
||||
? "[Записи не найдены в этом секторе]"
|
||||
: "[No records found in this sector]"}
|
||||
</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(
|
||||
isRu ? "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">
|
||||
{isRu ? "Дешифровать →" : "Decrypt entry →"}
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user