feat: zeropost-web — публичный AI-блог на zeropost.ru

- Next.js 16, Tailwind с @tailwindcss/typography
- Главная: hero, featured-статья, сетка карточек, облако тегов
- /blog/[slug]: статья со SSG + revalidate 60s, prose typography
- /tag/[name]: фильтр по тегам
- /about: про проект
- /api/cron/generate: endpoint для авто-генерации (защищён x-cron-token)
- SEO: dynamic metadata, OG, sitemap-ready
- Лента грузится с zeropost-engine /api/articles

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.env*.local
+.env
+*.log

.npmrc

@@ -0,0 +1 @@
+prefix=

app/about/page.js

@@ -0,0 +1,48 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { Sparkles, Cpu, BookOpen, Zap } from 'lucide-react';
+
+export const metadata = { title: 'О проекте' };
+
+export default function AboutPage() {
+  return (
+    <>
+      <Header />
+      <main className="container-narrow pt-12 pb-16">
+        <div className="inline-flex items-center gap-2 text-xs text-accent bg-accent/10 border border-accent/20 px-3 py-1.5 rounded-full mb-6">
+          <Sparkles className="w-3.5 h-3.5" /> О ZeroPost
+        </div>
+        <h1 className="text-4xl sm:text-5xl font-bold leading-tight mb-6">
+          Эксперимент: блог, который ведёт ИИ
+        </h1>
+        <div className="prose prose-invert prose-lg max-w-none">
+          <p>
+            ZeroPost — это два связанных проекта: <strong>публичный блог</strong>, который ты сейчас читаешь, и <strong>сервис</strong> для ведения Telegram-каналов с помощью ИИ.
+          </p>
+          <p>
+            Идея простая: показать, что ИИ может писать тексты, которые не отдают «нейросетью». Без штампов вроде «в современном мире», без бесконечных списков и без воды.
+          </p>
+          <h2>Что под капотом</h2>
+          <ul>
+            <li><strong>Claude</strong> от Anthropic — основная модель, пишет тексты</li>
+            <li>Двухэтапная генерация: пишем → редактируем себя</li>
+            <li>Промпт-инжиниринг с правилами «человечности» и стоп-словами</li>
+            <li>Few-shot prompting на примерах хорошего стиля</li>
+          </ul>
+          <h2>Сервис для каналов</h2>
+          <p>
+            На <a href="https://app.zeropost.ru">app.zeropost.ru</a> есть кабинет, где можно:
+          </p>
+          <ul>
+            <li>Описать свой канал — нишу, аудиторию, тон, стиль</li>
+            <li>Дать примеры «эталонных» постов — и ИИ скопирует их манеру</li>
+            <li>Генерировать посты в один клик</li>
+            <li>Запретить определённые слова и темы</li>
+          </ul>
+          <p>Скоро добавим автопубликацию по расписанию и работу с медиа.</p>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}

app/api/cron/generate/route.js

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+import { generateArticle } from '@/lib/engine';
+
+/**
+ * POST /api/cron/generate — генерит одну новую статью.
+ * Защищено токеном CRON_TOKEN.
+ * Cron на сервере дёргает каждые N часов с темой из бэклога.
+ */
+export async function POST(req) {
+  const auth = req.headers.get('x-cron-token');
+  if (auth !== process.env.CRON_TOKEN) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  try {
+    const { topic, tags = [], keywords = [] } = await req.json();
+    if (!topic) return NextResponse.json({ error: 'topic required' }, { status: 400 });
+    const article = await generateArticle({ topic, tags, keywords, autoPublish: true });
+    return NextResponse.json({ ok: true, slug: article.slug, title: article.title });
+  } catch (err) {
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  }
+}

app/blog/[slug]/page.js

@@ -0,0 +1,84 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { getArticle } from '@/lib/engine';
+import { renderMarkdown, formatDate } from '@/lib/markdown';
+import { Clock, ArrowLeft } from 'lucide-react';
+
+export const revalidate = 60;
+
+export async function generateMetadata({ params }) {
+  const { slug } = await params;
+  const article = await getArticle(slug);
+  if (!article) return { title: 'Статья не найдена' };
+  return {
+    title: article.seo_title || article.title,
+    description: article.seo_descr || article.excerpt,
+    openGraph: {
+      title: article.title,
+      description: article.excerpt,
+      type: 'article',
+      publishedTime: article.published_at,
+      tags: article.tags || [],
+    },
+  };
+}
+
+export default async function ArticlePage({ params }) {
+  const { slug } = await params;
+  const article = await getArticle(slug);
+  if (!article) notFound();
+
+  // Убираю H1 из контента — он уже идёт в заголовке страницы
+  const contentWithoutH1 = article.content.replace(/^#\s+.+$/m, '').trim();
+  const html = renderMarkdown(contentWithoutH1);
+
+  return (
+    <>
+      <Header />
+      <article className="container-narrow pt-10 pb-16">
+        <Link href="/" className="btn-ghost text-sm mb-6 -ml-2">
+          <ArrowLeft className="w-4 h-4" /> Все статьи
+        </Link>
+
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          {(article.tags || []).map(t => (
+            <Link key={t} href={`/tag/${encodeURIComponent(t)}`} className="tag">#{t}</Link>
+          ))}
+        </div>
+
+        <h1 className="font-serif text-3xl sm:text-5xl font-bold leading-tight mb-5 tracking-tight">
+          {article.title}
+        </h1>
+
+        <div className="flex items-center gap-4 text-sm text-mute pb-8 mb-8 border-b border-border/60">
+          <span>{article.author}</span>
+          <span>·</span>
+          <span>{formatDate(article.published_at)}</span>
+          {article.reading_time && (
+            <>
+              <span>·</span>
+              <span className="inline-flex items-center gap-1">
+                <Clock className="w-3.5 h-3.5" /> {article.reading_time} мин чтения
+              </span>
+            </>
+          )}
+        </div>
+
+        <div
+          className="prose prose-invert prose-lg max-w-none font-serif prose-headings:font-sans"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+
+        <div className="mt-16 pt-8 border-t border-border/60 text-center">
+          <p className="text-mute mb-4">Хочешь такой же блог или канал в Telegram?</p>
+          <a href="https://app.zeropost.ru" className="btn-primary">
+            Открыть ZeroPost
+          </a>
+        </div>
+      </article>
+      <Footer />
+    </>
+  );
+}

app/globals.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html { @apply bg-bg text-ink; }
+  body { @apply font-sans antialiased; }
+  ::selection { @apply bg-accent/30; }
+}
+
+@layer components {
+  .btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed; }
+  .btn-primary { @apply btn bg-accent text-black hover:bg-accent2; }
+  .btn-ghost { @apply btn text-mute hover:bg-surface hover:text-white; }
+  .container-narrow { @apply max-w-3xl mx-auto px-4; }
+  .container-wide { @apply max-w-6xl mx-auto px-4; }
+  .article-card { @apply bg-surface border border-border rounded-2xl p-6 hover:border-accent/40 transition-colors; }
+  .tag { @apply inline-block text-xs px-2.5 py-1 rounded-full bg-surface2 text-mute hover:bg-surface hover:text-white transition-colors; }
+}

app/layout.js

@@ -0,0 +1,31 @@
+import './globals.css';
+
+export const metadata = {
+  title: {
+    default: 'ZeroPost — практические материалы про ИИ',
+    template: '%s — ZeroPost',
+  },
+  description: 'Блог про практическое применение искусственного интеллекта. Промпты, инструменты, кейсы — без воды.',
+  metadataBase: new URL('https://zeropost.ru'),
+  openGraph: {
+    type: 'website',
+    locale: 'ru_RU',
+    siteName: 'ZeroPost',
+  },
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="ru">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.js

@@ -0,0 +1,95 @@
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ArticleCard from '@/components/ArticleCard';
+import { listArticles, listTags } from '@/lib/engine';
+import { Sparkles, ArrowRight } from 'lucide-react';
+
+export const revalidate = 60;
+
+export default async function HomePage() {
+  let articles = [];
+  let tags = [];
+  try {
+    [articles, tags] = await Promise.all([
+      listArticles({ limit: 13 }),
+      listTags(),
+    ]);
+  } catch (err) {
+    console.error('Home load failed:', err.message);
+  }
+
+  const [featured, ...rest] = articles;
+
+  return (
+    <>
+      <Header />
+
+      {/* Hero */}
+      <section className="container-wide pt-12 pb-10 sm:pt-20 sm:pb-16">
+        <div className="max-w-3xl">
+          <div className="inline-flex items-center gap-2 text-xs text-accent bg-accent/10 border border-accent/20 px-3 py-1.5 rounded-full mb-6">
+            <Sparkles className="w-3.5 h-3.5" />
+            Блог, который ведёт ИИ
+          </div>
+          <h1 className="text-4xl sm:text-6xl font-bold tracking-tight leading-tight mb-5">
+            Практический ИИ.<br />
+            <span className="text-mute">Без воды и хайпа.</span>
+          </h1>
+          <p className="text-lg text-mute mb-8 max-w-2xl">
+            Промпты, кейсы, инструменты и разборы. Всё пишет ИИ — кроме редакторских заметок. Если хочешь так же вести свой Telegram-канал — попробуй наш сервис.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Link href="#articles" className="btn-primary">
+              Читать статьи <ArrowRight className="w-4 h-4" />
+            </Link>
+            <a href="https://app.zeropost.ru" className="btn-ghost">
+              Получить ассистента
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured */}
+      {featured && (
+        <section id="articles" className="container-wide pb-8">
+          <ArticleCard article={featured} featured />
+        </section>
+      )}
+
+      {/* Rest */}
+      {rest.length > 0 && (
+        <section className="container-wide pb-12">
+          <h2 className="text-sm font-medium uppercase tracking-widest text-mute mb-5">
+            Последние материалы
+          </h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {rest.map(a => <ArticleCard key={a.id} article={a} />)}
+          </div>
+        </section>
+      )}
+
+      {articles.length === 0 && (
+        <section className="container-wide py-20 text-center">
+          <p className="text-mute">Скоро здесь появятся первые статьи. ИИ уже работает над ними.</p>
+        </section>
+      )}
+
+      {/* Tags */}
+      {tags.length > 0 && (
+        <section className="container-wide pb-12">
+          <h2 className="text-sm font-medium uppercase tracking-widest text-mute mb-4">Темы</h2>
+          <div className="flex flex-wrap gap-2">
+            {tags.map(t => (
+              <Link key={t.tag} href={`/tag/${encodeURIComponent(t.tag)}`} className="tag">
+                #{t.tag} <span className="text-mute/60">({t.cnt})</span>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <Footer />
+    </>
+  );
+}

app/tag/[name]/page.js

@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ArticleCard from '@/components/ArticleCard';
+import { listArticles } from '@/lib/engine';
+import { ArrowLeft } from 'lucide-react';
+
+export const revalidate = 60;
+
+export async function generateMetadata({ params }) {
+  const { name } = await params;
+  return { title: `Статьи по теме #${decodeURIComponent(name)}` };
+}
+
+export default async function TagPage({ params }) {
+  const { name } = await params;
+  const tag = decodeURIComponent(name);
+  const articles = await listArticles({ tag, limit: 50 });
+
+  return (
+    <>
+      <Header />
+      <main className="container-wide pt-10 pb-16">
+        <Link href="/" className="btn-ghost text-sm mb-4 -ml-2">
+          <ArrowLeft className="w-4 h-4" /> Все статьи
+        </Link>
+        <h1 className="text-3xl sm:text-4xl font-bold mb-2">#{tag}</h1>
+        <p className="text-mute mb-8">{articles.length} {articles.length === 1 ? 'материал' : 'материалов'}</p>
+        {articles.length === 0 ? (
+          <p className="text-mute">Пока пусто.</p>
+        ) : (
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {articles.map(a => <ArticleCard key={a.id} article={a} />)}
+          </div>
+        )}
+      </main>
+      <Footer />
+    </>
+  );
+}

components/ArticleCard.js

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import { formatDate } from '@/lib/markdown';
+import { Clock } from 'lucide-react';
+
+export default function ArticleCard({ article, featured = false }) {
+  if (featured) {
+    return (
+      <Link
+        href={`/blog/${article.slug}`}
+        className="article-card block group p-8 sm:p-10 border-accent/30 hover:border-accent"
+      >
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          {(article.tags || []).slice(0, 3).map(t => (
+            <span key={t} className="tag">#{t}</span>
+          ))}
+        </div>
+        <h2 className="text-2xl sm:text-3xl font-bold mb-3 group-hover:text-accent2 transition-colors leading-tight">
+          {article.title}
+        </h2>
+        {article.excerpt && (
+          <p className="text-mute text-base sm:text-lg leading-relaxed line-clamp-3 mb-4">
+            {article.excerpt}
+          </p>
+        )}
+        <div className="flex items-center gap-4 text-xs text-mute">
+          <span>{formatDate(article.published_at)}</span>
+          {article.reading_time && (
+            <span className="inline-flex items-center gap-1">
+              <Clock className="w-3 h-3" /> {article.reading_time} мин
+            </span>
+          )}
+        </div>
+      </Link>
+    );
+  }
+
+  return (
+    <Link href={`/blog/${article.slug}`} className="article-card block group">
+      <div className="flex flex-wrap items-center gap-2 mb-3">
+        {(article.tags || []).slice(0, 2).map(t => (
+          <span key={t} className="tag">#{t}</span>
+        ))}
+      </div>
+      <h3 className="text-lg font-semibold mb-2 group-hover:text-accent2 transition-colors leading-snug">
+        {article.title}
+      </h3>
+      {article.excerpt && (
+        <p className="text-mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
+      )}
+      <div className="flex items-center gap-3 text-xs text-mute">
+        <span>{formatDate(article.published_at)}</span>
+        {article.reading_time && (
+          <span className="inline-flex items-center gap-1">
+            <Clock className="w-3 h-3" /> {article.reading_time} мин
+          </span>
+        )}
+      </div>
+    </Link>
+  );
+}

components/Footer.js

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-border/60 mt-20">
+      <div className="container-wide py-10 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-mute">
+        <div>
+          © {new Date().getFullYear()} ZeroPost — генерируется ИИ, читается людьми
+        </div>
+        <div className="flex items-center gap-4">
+          <Link href="/about" className="hover:text-white transition-colors">О проекте</Link>
+          <a href="https://app.zeropost.ru" className="hover:text-white transition-colors">Сервис</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Header.js

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import { Sparkles, Github } from 'lucide-react';
+
+export default function Header() {
+  return (
+    <header className="border-b border-border/60 sticky top-0 z-20 bg-bg/85 backdrop-blur-md">
+      <div className="container-wide flex items-center justify-between py-4">
+        <Link href="/" className="flex items-center gap-2 group">
+          <div className="w-8 h-8 rounded-lg bg-accent/15 flex items-center justify-center group-hover:bg-accent/25 transition-colors">
+            <Sparkles className="w-4 h-4 text-accent" />
+          </div>
+          <span className="font-bold text-lg tracking-tight">ZeroPost</span>
+        </Link>
+        <nav className="flex items-center gap-1 sm:gap-4 text-sm">
+          <Link href="/" className="btn-ghost text-sm py-1.5">Статьи</Link>
+          <Link href="/about" className="btn-ghost text-sm py-1.5">О проекте</Link>
+          <a href="https://app.zeropost.ru" className="btn-primary text-sm py-1.5">
+            Открыть кабинет
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": { "@/*": ["./*"] }
+  }
+}

lib/engine.js

@@ -0,0 +1,45 @@
+const ENGINE_URL = process.env.ENGINE_URL || 'http://127.0.0.1:3040';
+const ENGINE_SECRET = process.env.ENGINE_SECRET || 'zeropost_internal_2026';
+
+async function call(path, options = {}) {
+  const res = await fetch(`${ENGINE_URL}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      'x-internal-secret': ENGINE_SECRET,
+      ...(options.headers || {}),
+    },
+    cache: options.cache || 'no-store',
+    next: options.next,
+  });
+  if (!res.ok) {
+    const txt = await res.text();
+    throw new Error(`Engine ${res.status}: ${txt}`);
+  }
+  return res.json();
+}
+
+export async function listArticles({ limit = 20, offset = 0, tag } = {}) {
+  const params = new URLSearchParams({ limit, offset });
+  if (tag) params.set('tag', tag);
+  return call(`/api/articles?${params}`, { next: { revalidate: 60 } });
+}
+
+export async function getArticle(slug) {
+  try {
+    return await call(`/api/articles/${slug}`, { next: { revalidate: 60 } });
+  } catch {
+    return null;
+  }
+}
+
+export async function listTags() {
+  return call('/api/articles/tags', { next: { revalidate: 300 } });
+}
+
+export async function generateArticle(data) {
+  return call('/api/articles/generate', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}

lib/markdown.js

@@ -0,0 +1,16 @@
+import { marked } from 'marked';
+
+marked.setOptions({
+  gfm: true,
+  breaks: false,
+});
+
+export function renderMarkdown(md) {
+  return marked.parse(md || '');
+}
+
+export function formatDate(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
+}

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+};

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "zeropost-web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3042",
+    "build": "next build",
+    "start": "next start -p 3042"
+  },
+  "dependencies": {
+    "next": "^16.2.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": "0.408.0",
+    "pg": "^8.21.0",
+    "tailwindcss": "3.4.7",
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.39",
+    "@tailwindcss/typography": "0.5.13",
+    "marked": "13.0.2",
+    "gray-matter": "4.0.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

tailwind.config.js

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        bg: '#0a0a0a',
+        surface: '#141414',
+        surface2: '#1c1c1c',
+        border: '#2a2a2a',
+        accent: '#10b981',
+        accent2: '#34d399',
+        ink: '#e5e7eb',
+        mute: '#9ca3af',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        serif: ['"Source Serif Pro"', 'Georgia', 'serif'],
+      },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            '--tw-prose-body': theme('colors.ink'),
+            '--tw-prose-headings': '#ffffff',
+            '--tw-prose-links': theme('colors.accent2'),
+            '--tw-prose-bold': '#ffffff',
+            '--tw-prose-quotes': theme('colors.mute'),
+            '--tw-prose-quote-borders': theme('colors.accent'),
+            '--tw-prose-code': theme('colors.accent2'),
+            '--tw-prose-pre-bg': theme('colors.surface2'),
+            '--tw-prose-pre-code': theme('colors.ink'),
+            '--tw-prose-bullets': theme('colors.mute'),
+            '--tw-prose-counters': theme('colors.mute'),
+            '--tw-prose-hr': theme('colors.border'),
+          },
+        },
+      }),
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};