feat: мобильная версия + поиск + SEO-инфраструктура

Мобилка:
- Header: hide-on-scroll, мобильный burger-menu, тонкая адаптация
- Hero: текст и кнопки оптимизированы под узкие экраны (full-width buttons)
- ArticleCard featured: на мобилке в столбик, картинка сверху
- Stats: компактная сетка 2x2 с уменьшенным шрифтом
- Глобально: scroll-behavior smooth, safe-area-inset, tap targets 40px+
- prefers-reduced-motion respected

Страница статьи:
- ReadingProgress: прогресс-бар сверху при скролле
- ScrollToTop: круглая кнопка наверху после 800px скролла
- ShareButton: Web Share API на мобилках, копирование URL на десктопе
- Related articles: подбираем по пересечению тегов (max 3)
- Мобильная типографика: prose-base sm:prose-lg, leading-relaxed

SEO/инфра:
- /api/search: простой поиск по title/excerpt/tags с подсветкой и скорингом
- SearchBox: оверлей с / хоткеем, дебаунс 250ms, мобиле-friendly
- /rss.xml: полноценный RSS-фид
- sitemap.xml: динамический через next sitemap()
- robots.txt: динамический
- viewport metadata + theme-color для светлой/тёмной темы
- alternates rel=alternate type=application/rss+xml
This commit is contained in:
Alexey Pavlov
2026-05-31 09:43:11 +03:00
parent 9e77f920c1
commit 4702614896
15 changed files with 595 additions and 77 deletions
+33
View File
@@ -0,0 +1,33 @@
'use client';
import { useEffect, useState } from 'react';
import { ArrowUp } from 'lucide-react';
export default function ScrollToTop() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => setVisible(window.scrollY > 800);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
function scrollUp() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
return (
<button
onClick={scrollUp}
aria-label="Наверх"
className={`fixed z-30 right-4 sm:right-6 bottom-4 sm:bottom-6 w-11 h-11 rounded-full flex items-center justify-center shadow-lg transition-all ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}
style={{
background: 'rgb(var(--accent))',
color: 'white',
marginBottom: 'env(safe-area-inset-bottom)',
}}
>
<ArrowUp className="w-5 h-5" />
</button>
);
}