feat: categories — pages, nav, home block, admin editor select
This commit is contained in:
Alexey Pavlov
@@ -0,0 +1,88 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import ArticleCard from '@/components/ArticleCard';
|
||||
import { listCategories, getCategoryArticles } from '@/lib/engine';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
const COLOR_MAP = {
|
||||
emerald: { bg: 'bg-emerald-50 dark:bg-emerald-950', text: 'text-emerald-700 dark:text-emerald-300', border: 'border-emerald-200 dark:border-emerald-800' },
|
||||
red: { bg: 'bg-red-50 dark:bg-red-950', text: 'text-red-700 dark:text-red-300', border: 'border-red-200 dark:border-red-800' },
|
||||
amber: { bg: 'bg-amber-50 dark:bg-amber-950', text: 'text-amber-700 dark:text-amber-300', border: 'border-amber-200 dark:border-amber-800' },
|
||||
blue: { bg: 'bg-blue-50 dark:bg-blue-950', text: 'text-blue-700 dark:text-blue-300', border: 'border-blue-200 dark:border-blue-800' },
|
||||
};
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const { slug } = await params;
|
||||
const cats = await listCategories();
|
||||
const cat = cats.find(c => c.slug === slug);
|
||||
if (!cat) return { title: 'Категория не найдена' };
|
||||
return {
|
||||
title: `${cat.name} — ZeroPost`,
|
||||
description: cat.description,
|
||||
alternates: { canonical: `https://zeropost.ru/category/${slug}` },
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CategoryPage({ params }) {
|
||||
const { slug } = await params;
|
||||
const [cats, articles] = await Promise.all([
|
||||
listCategories(),
|
||||
getCategoryArticles(slug, { limit: 30 }),
|
||||
]);
|
||||
const cat = cats.find(c => c.slug === slug);
|
||||
if (!cat) notFound();
|
||||
|
||||
const colors = COLOR_MAP[cat.color] || COLOR_MAP.emerald;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<div className="container-wide pt-8 pb-16">
|
||||
|
||||
{/* Шапка категории */}
|
||||
<div className={`rounded-2xl border ${colors.border} ${colors.bg} px-6 py-8 mb-10`}>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="text-3xl">{cat.icon}</span>
|
||||
<h1 className={`text-2xl sm:text-3xl font-bold ${colors.text}`}>{cat.name}</h1>
|
||||
</div>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 max-w-xl">{cat.description}</p>
|
||||
<div className="mt-4 text-sm text-neutral-400">{articles.length} {articles.length === 1 ? 'статья' : articles.length < 5 ? 'статьи' : 'статей'}</div>
|
||||
</div>
|
||||
|
||||
{/* Навигация по категориям */}
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{cats.map(c => (
|
||||
<Link
|
||||
key={c.slug}
|
||||
href={`/category/${c.slug}`}
|
||||
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-colors ${
|
||||
c.slug === slug
|
||||
? `${(COLOR_MAP[c.color]||COLOR_MAP.emerald).bg} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).text} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).border}`
|
||||
: 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-300'
|
||||
}`}
|
||||
>
|
||||
<span>{c.icon}</span> {c.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Статьи */}
|
||||
{articles.length > 0 ? (
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{articles.map(a => <ArticleCard key={a.id} article={a} />)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20">
|
||||
<div className="text-4xl mb-4">{cat.icon}</div>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Статей пока нет</h2>
|
||||
<p className="text-sm text-neutral-500">Скоро здесь появятся материалы по теме «{cat.name}»</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
+30
-3
@@ -8,21 +8,22 @@ import NowBlock from '@/components/NowBlock';
|
||||
import NotesBlock from '@/components/NotesBlock';
|
||||
import SeriesGrid from '@/components/SeriesGrid';
|
||||
import Reveal from '@/components/Reveal';
|
||||
import { listArticles, listTags, getStats, getLive, listNotes, listSeries } from '@/lib/engine';
|
||||
import { listArticles, listTags, getStats, getLive, listNotes, listSeries, listCategories } from '@/lib/engine';
|
||||
import { Sparkles, ArrowRight } from 'lucide-react';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default async function HomePage() {
|
||||
let articles = [], tags = [], stats = null, live = null, notes = [], series = [];
|
||||
let articles = [], tags = [], stats = null, live = null, notes = [], series = [], categories = [];
|
||||
try {
|
||||
[articles, tags, stats, live, notes, series] = await Promise.all([
|
||||
[articles, tags, stats, live, notes, series, categories] = await Promise.all([
|
||||
listArticles({ limit: 13 }),
|
||||
listTags(),
|
||||
getStats(),
|
||||
getLive(),
|
||||
listNotes({ limit: 6 }),
|
||||
listSeries(),
|
||||
listCategories(),
|
||||
]);
|
||||
} catch (err) {
|
||||
console.error('Home load failed:', err.message);
|
||||
@@ -81,6 +82,32 @@ export default async function HomePage() {
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Категории */}
|
||||
{categories.length > 0 && (
|
||||
<section className="container-wide py-10">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest mute mb-5">Темы</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{categories.map(cat => {
|
||||
const colorMap = {
|
||||
emerald: 'bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 hover:border-emerald-400 dark:hover:border-emerald-600',
|
||||
red: 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 hover:border-red-400',
|
||||
amber: 'bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 hover:border-amber-400',
|
||||
blue: 'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:border-blue-400',
|
||||
};
|
||||
const cls = colorMap[cat.color] || colorMap.emerald;
|
||||
return (
|
||||
<Link key={cat.slug} href={`/category/${cat.slug}`}
|
||||
className={`flex flex-col gap-2 p-4 rounded-xl border transition-all ${cls}`}>
|
||||
<span className="text-2xl">{cat.icon}</span>
|
||||
<span className="font-semibold text-sm">{cat.name}</span>
|
||||
<span className="text-xs opacity-70 line-clamp-2">{cat.description}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Featured */}
|
||||
{featured && (
|
||||
<Reveal>
|
||||
|
||||
@@ -56,6 +56,9 @@ export default function Header() {
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden sm:flex items-center gap-1 text-sm">
|
||||
<Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
|
||||
<Link href="/category/cybersec" className="btn btn-ghost text-sm py-1.5">🔒 Безопасность</Link>
|
||||
<Link href="/category/automation" className="btn btn-ghost text-sm py-1.5">⚡ Автоматизация</Link>
|
||||
<Link href="/category/ai-dev" className="btn btn-ghost text-sm py-1.5">💻 Dev + AI</Link>
|
||||
<Link href="/archive" className="btn btn-ghost text-sm py-1.5">Архив</Link>
|
||||
<Link href="/notes" className="btn btn-ghost text-sm py-1.5">Заметки</Link>
|
||||
<Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function ArticleEditor({ article }) {
|
||||
const [content, setContent] = useState(article?.content || '');
|
||||
const [tags, setTags] = useState((article?.tags || []).join(', '));
|
||||
const [status, setStatus] = useState(article?.status || 'draft');
|
||||
const [category, setCategory] = useState(article?.category || 'ai-tools');
|
||||
const [seoTitle, setSeoTitle] = useState(article?.seo_title || '');
|
||||
const [seoDescr, setSeoDescr] = useState(article?.seo_descr || '');
|
||||
const [coverUrl, setCoverUrl] = useState(article?.cover_url || '');
|
||||
@@ -40,6 +41,7 @@ export default function ArticleEditor({ article }) {
|
||||
content: content.trim(),
|
||||
tags: tags.split(',').map(t => t.trim()).filter(Boolean),
|
||||
status,
|
||||
category,
|
||||
seo_title: seoTitle.trim() || null,
|
||||
seo_descr: seoDescr.trim() || null,
|
||||
cover_url: coverUrl.trim() || null,
|
||||
@@ -268,6 +270,19 @@ export default function ArticleEditor({ article }) {
|
||||
<option value="draft">Черновик</option>
|
||||
<option value="published">Опубликована</option>
|
||||
</select>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-neutral-500 mb-1">Категория</label>
|
||||
<select
|
||||
value={category}
|
||||
onChange={e => setCategory(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
>
|
||||
<option value="ai-tools">🤖 ИИ-инструменты</option>
|
||||
<option value="cybersec">🔒 Кибербезопасность</option>
|
||||
<option value="automation">⚡ Автоматизация</option>
|
||||
<option value="ai-dev">💻 Разработка с ИИ</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-neutral-500 mb-1">Теги (через запятую)</label>
|
||||
<input
|
||||
|
||||
+12
-1
@@ -19,9 +19,20 @@ async function call(path, options = {}) {
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function listArticles({ limit = 20, offset = 0, tag } = {}) {
|
||||
export async function listCategories() {
|
||||
try { return await call('/api/categories', { next: { revalidate: 3600 } }); }
|
||||
catch { return []; }
|
||||
}
|
||||
|
||||
export async function getCategoryArticles(slug, { limit = 20, offset = 0 } = {}) {
|
||||
try { return await call(`/api/categories/${slug}/articles?limit=${limit}&offset=${offset}`); }
|
||||
catch { return []; }
|
||||
}
|
||||
|
||||
export async function listArticles({ limit = 20, offset = 0, tag, category } = {}) {
|
||||
const params = new URLSearchParams({ limit, offset });
|
||||
if (tag) params.set('tag', tag);
|
||||
if (category) params.set('category', category);
|
||||
return call(`/api/articles?${params}`, { next: { revalidate: 60 } });
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user