Files
topsysops-app/public-site/app/blog/page.jsx
T
ogrechkoandClaude Sonnet 5 f53c8b1ed7 Fix missing H1 on list-style pages via SectionHeading template
SectionHeading always rendered its title as <h2>, so every page whose
only heading came from a shared section component (services hub,
promotions, cases, faq, contact, reviews, blog list) had no <h1> at
all. Add a level prop (default h2) and pass headingLevel="h1" from
each page where that section is the page's own top-level heading.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky
2026-08-26 00:00:24 +03:00

58 lines
2.3 KiB
React

import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import Header from '../../components/Header.jsx';
import Footer from '../../components/Footer.jsx';
import SectionHeading from '../../components/SectionHeading.jsx';
import Reveal from '../../components/Reveal.jsx';
import { serverApi } from '../../lib/serverApi.js';
export const metadata = {
title: 'Блог',
description: 'Заметки об IT-инфраструктуре, кибербезопасности и автоматизации от TopSysOps.',
alternates: { canonical: '/blog' },
};
function formatDate(iso) {
if (!iso) return '';
return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
}
export default async function BlogListPage() {
const posts = await serverApi.getBlogPosts();
return (
<div>
<Header />
<section className="max-w-3xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
<SectionHeading
eyebrow="blog --articles"
title="Блог"
desc="Заметки об IT-инфраструктуре, кибербезопасности и автоматизации."
level="h1"
/>
{posts.length === 0 && <p className="text-sm text-slate-400">Пока нет опубликованных статей - загляните позже.</p>}
<div className="space-y-4">
{posts.map((p, i) => (
<Reveal key={p.id} delay={i * 60}>
<Link
href={`/blog/${p.slug}`}
className="block rounded-lg border p-5 transition-colors hover:border-emerald-500 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800"
>
<p className="text-xs text-slate-400 dark:text-slate-500 mb-1 font-mono">{formatDate(p.published_at)}</p>
<h2 className="font-bold mb-2 font-display text-lg">{p.title}</h2>
{p.excerpt && <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">{p.excerpt}</p>}
<span className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1">
Читать <ArrowRight className="h-3.5 w-3.5" />
</span>
</Link>
</Reveal>
))}
</div>
</section>
<Footer />
</div>
);
}