base with cms integrated

2026-04-18 21:16:55 +10:00
parent 6404495696
commit 4b11fec8cc
33 changed files with 2036 additions and 356 deletions
@@ -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>
+  );
+}