Initial commit: TopSysOps site + admin panel

Multi-page public site (Next.js), Node/Express backend with Postgres,
and Vite admin/account app, restructured from a single-page layout
into dedicated service, promotions, cases, about, FAQ, and blog pages
for SEO.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky

public-site/app/blog/[slug]/page.jsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import Header from '../../../components/Header.jsx';
+import Footer from '../../../components/Footer.jsx';
+import Reveal from '../../../components/Reveal.jsx';
+import { serverApi } from '../../../lib/serverApi.js';
+
+function formatDate(iso) {
+  if (!iso) return '';
+  return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+export async function generateMetadata({ params }) {
+  const post = await serverApi.getBlogPost(params.slug);
+  if (!post) return { title: 'Статья не найдена' };
+  return {
+    title: post.title,
+    description: post.excerpt || undefined,
+  };
+}
+
+export default async function BlogPostPage({ params }) {
+  const post = await serverApi.getBlogPost(params.slug);
+  if (!post) notFound();
+
+  const articleSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: post.title,
+    ...(post.excerpt ? { description: post.excerpt } : {}),
+    ...(post.published_at ? { datePublished: post.published_at } : {}),
+    author: { '@type': 'Organization', name: 'TopSysOps' },
+  };
+
+  return (
+    <div>
+      {/* eslint-disable-next-line react/no-danger */}
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }} />
+
+      <Header />
+      <article className="max-w-2xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
+        <Link href="/blog" className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1 mb-8">
+          <ArrowLeft className="h-3.5 w-3.5" /> Ко всем статьям
+        </Link>
+
+        <Reveal>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mb-2 font-mono">{formatDate(post.published_at)}</p>
+          <h1 className="text-3xl font-bold mb-6 font-display">{post.title}</h1>
+          <div
+            className="prose prose-slate dark:prose-invert max-w-none prose-a:text-emerald-500"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: post.content || '' }}
+          />
+        </Reveal>
+      </article>
+      <Footer />
+    </div>
+  );
+}

public-site/app/blog/page.jsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import Header from '../../components/Header.jsx';
+import Footer from '../../components/Footer.jsx';
+import SectionHeading from '../../components/SectionHeading.jsx';
+import Reveal from '../../components/Reveal.jsx';
+import { serverApi } from '../../lib/serverApi.js';
+
+export const metadata = {
+  title: 'Блог',
+  description: 'Заметки об IT-инфраструктуре, кибербезопасности и автоматизации от TopSysOps.',
+};
+
+function formatDate(iso) {
+  if (!iso) return '';
+  return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+export default async function BlogListPage() {
+  const posts = await serverApi.getBlogPosts();
+
+  return (
+    <div>
+      <Header />
+      <section className="max-w-3xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
+        <SectionHeading eyebrow="blog --articles" title="Блог" desc="Заметки об IT-инфраструктуре, кибербезопасности и автоматизации." />
+
+        {posts.length === 0 && <p className="text-sm text-slate-400">Пока нет опубликованных статей - загляните позже.</p>}
+
+        <div className="space-y-4">
+          {posts.map((p, i) => (
+            <Reveal key={p.id} delay={i * 60}>
+              <Link
+                href={`/blog/${p.slug}`}
+                className="block rounded-lg border p-5 transition-colors hover:border-emerald-500 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800"
+              >
+                <p className="text-xs text-slate-400 dark:text-slate-500 mb-1 font-mono">{formatDate(p.published_at)}</p>
+                <h2 className="font-bold mb-2 font-display text-lg">{p.title}</h2>
+                {p.excerpt && <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">{p.excerpt}</p>}
+                <span className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1">
+                  Читать <ArrowRight className="h-3.5 w-3.5" />
+                </span>
+              </Link>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+      <Footer />
+    </div>
+  );
+}