Alexey Pavlov
b1c09aa53f
- ArticleCard: реальные обложки с fallback на детерминированный градиент по id статьи - HeroBackground: 3 анимированных blob'а + dot-grid + плавный fade к контенту - Stats компонент: 4 карточки — статьи / минуты чтения / токены / просмотры - Reveal компонент: IntersectionObserver-based fade-in при скролле, respect prefers-reduced-motion - next.config: rewrites /uploads/* → engine, чтобы картинки работали с относительными путями - На странице статьи — обложка над контентом
95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
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 dynamic = 'force-dynamic';
|
|
|
|
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();
|
|
|
|
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 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 ink">
|
|
{article.title}
|
|
</h1>
|
|
|
|
<div className="flex items-center gap-4 text-sm mute pb-8 mb-8 border-b-soft">
|
|
<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>
|
|
|
|
{article.cover_url && (
|
|
<div className="mb-10 -mx-4 sm:mx-0">
|
|
<img
|
|
src={article.cover_url}
|
|
alt={article.title}
|
|
className="w-full rounded-xl"
|
|
style={{ aspectRatio: '16/9', objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="prose prose-lg max-w-none font-serif prose-headings:font-sans"
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
|
|
<div className="mt-16 pt-8 border-t-soft text-center">
|
|
<p className="mute mb-4">Хочешь такой же блог или канал в Telegram?</p>
|
|
<a href="https://app.zeropost.ru" className="btn btn-primary">
|
|
Открыть ZeroPost
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|