---
title: "Product Specification: Blog/CMS"
last_updated: "2025-02-19"
purpose: "Собрать требования к шаблону статьи и CMS-функциям для публикации контента."
summary: "Job stories для читателей и авторов, MVP-скоуп, партиал будущих фаз."
---

# Product Specification: Blog/CMS

## Job Stories

### Для читателей

1. **Когда я открываю статью на телефоне**, я хочу видеть красивую типографику и удобное чтение, чтобы наслаждаться контентом без напряжения глаз.

2. **Когда я читаю длинную статью**, я хочу видеть прогресс чтения, чтобы понимать сколько осталось.

3. **Когда я скроллю статью**, я хочу видеть визуальные разделители между секциями, чтобы легко ориентироваться в структуре.

4. **Когда я вижу интересную цитату**, я хочу чтобы она была визуально выделена, чтобы я мог легко её найти позже.

5. **Когда я хочу поделиться статьёй**, я хочу иметь кнопки шаринга, чтобы быстро отправить ссылку друзьям.

6. **Когда я открываю статью**, я хочу видеть примерное время чтения, чтобы понять успею ли я прочитать сейчас.

### Для автора (CMS)

7. **Когда я пишу новую статью**, я хочу простой редактор с markdown, чтобы быстро форматировать текст.

8. **Когда я добавляю изображения**, я хочу иметь разные варианты отображения (wide, full-width, grid), чтобы создавать визуально интересный контент.

9. **Когда я публикую статью**, я хочу автоматическую генерацию OG-тегов, чтобы статья красиво выглядела при шаринге.

10. **Когда я редактирую старую статью**, я хочу видеть превью изменений, чтобы убедиться что всё выглядит правильно.

11. **Когда я управляю блогом**, я хочу видеть аналитику просмотров, чтобы понимать какой контент популярен.

## MVP Scope

### Фаза 1: Статичный шаблон статьи
- HTML/CSS шаблон статьи
- Адаптивный дизайн (mobile-first)
- Parallax секции
- Split hero
- Progress bar
- Типографика с поддержкой кириллицы

### Фаза 2: Компоненты контента
- Blockquotes
- Image grids (single, double, wide)
- Audio player UI
- Share buttons

### Фаза 3: CMS интеграция
- Markdown редактор
- Превью
- Публикация

### Фаза 4: Аналитика и оптимизация
- Просмотры
- Время на странице
- SEO оптимизация

## Technical Stack

- **Frontend**: Vanilla HTML/CSS/JS (без фреймворков для простоты)
- **Fonts**: Inter (sans-serif), Playfair Display (serif)
- **Animations**: AOS (Animate on Scroll)
- **Hosting**: Static (Vercel/Netlify/GitHub Pages)