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
This commit is contained in:
Alexey Pavlov
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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 });
|
||||
}
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+95
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user