frnk ness collection

Закрытый музыкальный сайт с коллекцией релизов frnk ness: плеер, тексты с караоке и разборами строк, аккаунты, друзья, плейлисты, комнаты для совместного прослушивания, итоги года. Сайт для личного использования и не является стриминговым сервисом.

Адрес: https://frnkness.ru/. Без входа видна только заставка.

Что умеет

• Каталог и плеер: релизы и треки, мини и полноэкранный плеер, режим Поток, поиск, чарт
• Тексты и караоке: страница трека с текстом, разборами строк и описанием
• Аккаунты по нику и паролю (без почты) с кодом восстановления
• Друзья, избранное, плейлисты, топ-4, лента друзей
• Комнаты для совместного прослушивания
• Итоги года
• Админка (/admin.html): контент, тексты и караоке, статистика, пользователи, теги, обращения, ошибки

Технологии

Vue 3, TypeScript (strict), Vite, Vue Router (hash-режим), Tailwind CSS 4, Supabase (база, вход, Storage, Realtime, Edge Functions на Deno), Vitest, Playwright, PGlite (SQL-тесты на настоящем Postgres в WASM). Сайт публикуется на GitHub Pages из main.

Запуск

Нужен Node.js 18+.

npm install
npm run dev

Переменные окружения необязательные: без них используются значения по умолчанию из src/supabaseConfig.ts (боевой проект Supabase). Свои значения кладут в .env.local по образцу .env.example.

Команды

npm run dev             # локальный сервер
npm run typecheck       # проверка типов (.ts; шаблоны .vue проверяет сборка)
npm run test:run        # юнит-тесты и SQL-тесты на PGlite (используется в CI); npm test: режим наблюдения
npm run check:content   # проверка настоящего контента: реестр, файлы, разборы, .lrc
npm run build           # сборка в dist/ и проверка, что код админки не попал в сайт и в precache
npm run preview         # посмотреть собранный сайт
npm run test:e2e        # Playwright: сайт и админка (Supabase и GitHub замоканы)
npm run check:function  # типы Edge Functions через Deno (в CI не запускается)

Тесты работают на фикстуре tests/fixtures/catalog и не зависят от настоящего каталога: он меняется из админки. Правила работы в репозитории (обязательные проверки перед коммитом, формат текстов песен, правила для ассистента) в CLAUDE.md.

Устройство

src/
  main.ts, App.vue          корень сайта: шапка, RouterView, плеер
  site/                     сайт: router.ts, session.ts, pages/, components/, player/, social/, rooms/, recap/, services/
  admin/                    админка (admin.html → src/admin/main.ts), отдельные чанки admin-*
  runtime/                  экран блокировки и сессии прослушивания
  content/                  releases.json (реестр релизов) и site.json (промо, анонс): их правит админка
  content-check/            проверка контента для npm run check:content и правила деплоя
  utils/, types/            общие утилиты и типы
  sw.js                     service worker
supabase/
  migrations/               схема базы (только добавлять новые файлы, старые не менять)
  functions/                Edge Functions: admin-content, admin-users, account, register, recovery-request; общий код в _shared/
  audit/check_all.sql       «проверить всё» (права, закрытые таблицы и функции)
  setup/                    SQL для аварий
  tests/                    SQL-тесты прав и лимитов на PGlite
scripts/                    проверка контента, проверка сборки, страницы превью ссылок, CSP
e2e/                        Playwright-тесты
tests/fixtures/catalog/     фикстура каталога для тестов
audio/ images/ lyrics/ lyrics-books/   контент

Адреса сайта (hash-режим): #/, #/chart, #/release/<id>, #/track/<id>/<слаг>, #/u/<ник>, #/friends, #/feed, #/room/<id>, #/recap/<год>, #/me и другие, список в начале src/site/router.ts. Для отправки в мессенджеры сборка создаёт статические страницы /r/<релиз>/ и /t/<релиз>/<слаг>/ с превью, они перенаправляют на «#/…». Весь текст выводится шаблонами Vue с экранированием, v-html не используется.

Телефон и PWA

• Service worker (src/sw.js): оболочка сайта отдаётся из кэша сразу, сам он обновляется в фоне при каждом заходе и при возврате в приложение; новая версия включается сразу, страница перезагружается на неё (src/site/updates.ts), когда не играет музыка и никто не печатает. Аудио и PDF с текстами идут мимо service worker (iOS требует честные ответы на Range-запросы). Тексты (lyrics/, lyrics-index.json, track-notes.json) — сеть первой, не дольше 4 с. Каталог и site.json вшиты в чанки сборки, поэтому свежие вместе с оболочкой.
• Запуск звука (src/site/player/playbackGuard.ts): play() вызывается сразу в обработчике нажатия; если звук не пошёл, плеер повторяет попытку (1, 3 и 7 с, после возвращения сети — сразу), затем показывает «Нажми, чтобы играть». Причина каждого сбоя («Не удалось начать воспроизведение: …») попадает в журнал ошибок админки.
• Шрифты лежат в public/fonts/ (только кириллица и латиница, OFL) и подключены в src/assets/fonts.css; внешний хостинг шрифтов не нужен и закрыт в CSP.
• Обложки: при каждой сборке (в том числе при публикации из админки) для images/*.jpg|png создаются webp-копии images/<имя>-160|320|640|960.webp (vite.config.ts, src/utils/cover.ts); страницы подставляют их в srcset.
• Списки треков: в строке номер, название и кнопка «⋯» (нижняя панель TrackMenuSheet.vue); на компьютере — иконки как раньше.
• Правила для телефона (поля 16 px, цели нажатия от 40 px, безопасные зоны) — в src/assets/mobile.css.

Контент и id треков

• Релизы описаны в src/content/releases.json. Аудио лежит в audio/, обложки в images/, тексты в lyrics/, PDF с текстами в lyrics-books/.
• Рядом с текстом песни можно положить <имя текста>.notes.json с полями about («О треке») и annotations (разборы строк); строка ищется в тексте без учёта регистра и знаков по краям.
• Слаг трека берётся из имени файла с текстом без ведущего номера: 01-makanochki.txt → makanochki.
• Не переименовывать релизы и не переставлять треки в существующих релизах: статистика привязана к ключу <releaseId>-<индекс трека>. Админка и функция admin-content такие изменения не пропускают.
• Всё это умеет делать админка (разделы «Релизы», «Новый релиз», «Тексты», «Караоке»).

Деплой и эксплуатация

• Пуш в main публикует сайт через GitHub Actions (.github/workflows/deploy-pages.yml). Правки из админки это те же пуши в main.
• Проверки pull request: .github/workflows/ci.yml. PR с красным CI не мержится.
• Выпуск изменений базы и функций, проверка прав, аварийные действия, секреты, ручные настройки панелей, токен GitHub и лимиты: docs/operations.md.

Автор и лицензия

frnk ness: музыка и контент. mentanicarli: разработка. Только личное использование.