Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
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"
|
|
style={{ borderColor: 'rgb(var(--accent) / 0.3)' }}
|
|
>
|
|
<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 leading-tight ink group-hover:accent transition-colors">
|
|
{article.title}
|
|
</h2>
|
|
{article.excerpt && (
|
|
<p className="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 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 ink group-hover:accent transition-colors leading-snug">
|
|
{article.title}
|
|
</h3>
|
|
{article.excerpt && (
|
|
<p className="mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
|
|
)}
|
|
<div className="flex items-center gap-3 text-xs 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>
|
|
);
|
|
}
|