openspec: архив change header-typewriter (спека site-header-typewriter в specs/)

2026-09-19 17:48:38 +00:00
parent 2af0530f8a
commit 64fb3a000f
5 changed files with 85 additions and 0 deletions
@@ -0,0 +1,85 @@
+# site-header-typewriter Specification
+
+## Purpose
+Логотип `dedinit()` в шапке сайта анимирован эффектом печатной машинки:
+внутри скобок блочный курсор печатает темы блога, замирает, стирает их и
+переходит к следующей — обыгрывая название как вызов функции `dedinit(...)`.
+
+## Requirements
+
+### Requirement: Анимация «печатная машинка» в логотипе
+
+Система SHALL анимировать текст в скобках логотипа `dedinit()` на всех
+страницах сайта: блочный курсор печатает слово по одному символу, удерживает
+его ~1 секунду, стирает по одному символу, мигает на пустом месте и печатает
+следующее слово — бесконечным циклом по списку тем блога.
+
+#### Scenario: Логотип печатает слова по циклу
+
+- **GIVEN** открыта любая страница сайта (`/` или внутренняя), JS включён
+- **WHEN** страница загружена
+- **THEN** в `dedinit()` между скобками присутствует контейнер
+  `#dedinit-typewriter` с блочным мигающим курсором, и текст посимвольно
+  печатается из списка тем (например, `linux` → `llm` → `politics` → ...)
+
+#### Scenario: Цикл без остановки
+
+- **GIVEN** анимация запущена
+- **WHEN** прошло более 3 слов печати/стирания
+- **THEN** анимация продолжает цикл (после последнего слова переходит к
+  первому), не останавливаясь и не накапливая ошибок
+
+### Requirement: Бесшовный вывод (прогрессивное улучшение)
+
+Система SHALL оставаться декоративным улучшением: при выключенном JS логотип
+остаётся обычным текстом `dedinit()`; при его включении — анимация
+накладывается, не ломая вёрстку и навигацию шапки.
+
+#### Scenario: JS отключён — логотип статичен
+
+- **GIVEN** браузер с отключённым JavaScript
+- **WHEN** страница загружена
+- **THEN** в шапке отображается обычный текст `dedinit()` без скобочного
+  контейнера и без ошибок
+
+### Requirement: Доступность (prefers-reduced-motion)
+
+Система SHALL уважать системную настройку `prefers-reduced-motion: reduce`:
+при ней показывать первое слово списка статически, без анимации и мигания.
+
+#### Scenario: Уменьшение движения
+
+- **GIVEN** у пользователя включено `prefers-reduced-motion: reduce`
+- **WHEN** страница загружена
+- **THEN** внутри скобок логотипа отображается первое слово списка статично,
+  курсор не мигает (CSS `animation: none`), JS-цикл не запускается
+
+### Requirement: Минимальный размер и отсутствие зависимостей
+
+Система SHALL реализовывать эффект без внешних зависимостей (без Alpine.js,
+без jQuery): инлайн-скрипт и CSS суммарно не более ~2 КБ.
+
+#### Scenario: Нет внешних библиотек
+
+- **GIVEN** собранный сайт
+- **WHEN** просматривается HTML страницы
+- **THEN** в `<head>`/футере не подключено никаких сторонних JS-библиотек для
+  эффекта (только собственный инлайн-скрипт и CSS темы)
+
+### Requirement: Список тем конфигурируется
+
+Система SHALL позволять задавать список тем через `hugo.toml`
+(`[params.typewriter] words = [...]`), со встроенным фолбэком по умолчанию
+(`linux, llm, politics, homelab, nix`) при его отсутствии.
+
+#### Scenario: Слова из конфига
+
+- **GIVEN** в `hugo.toml` задан `[params.typewriter] words = ["linux","llm","politics"]`
+- **WHEN** страница собрана и открыта
+- **THEN** анимация печатает именно эти слова, в заданном порядке
+
+#### Scenario: Конфиг не задан
+
+- **GIVEN** в `hugo.toml` нет `[params.typewriter]`
+- **WHEN** страница собрана и открыта
+- **THEN** используется фолбэк-список по умолчанию, анимация работает