Skip to content
BranchesTags

Repository files navigation

Open Stream Environment — сайт приложения

Статический лендинг для приложения Open Stream Environment (OSE) на Material Design 3. Без сборки и зависимостей: чистые HTML, CSS и небольшой JS. Две языковые версии — русская в корне, английская в en/. Публикуется на GitHub Pages.

Структура

index.html                     русский лендинг
en/index.html                  английский лендинг (перевод)
privacy.html                   политика конфиденциальности
en/privacy.html                она же по-английски
404.html                       страница «не найдено»
.nojekyll                      отключает обработку Jekyll (нужен только при сборке из ветки)
favicon.ico                    знак без надписи: 16/32/48 для поисковиков, старых браузеров и панели задач
robots.txt                     что можно обходить поисковикам + ссылка на sitemap
sitemap.xml                    карта сайта с обеими языковыми версиями
assets/css/style.css           все стили: M3-токены + компоненты
assets/js/main.js              тема, мобильное меню, ripple, версия из релизов, лайтбокс, мелочи
assets/img/app.svg             полный знак (шапка, подвал, SVG-фавикон)
assets/img/favicon-192.png     знак без надписи 192×192 для Android (см. site.webmanifest)
assets/img/favicon-512.png     он же 512×512
assets/img/apple-touch-icon.png  полный знак 180×180 для iOS
assets/img/main.webp           скриншот в hero
assets/img/*.webp              галерея в секции «Скриншоты»
assets/img/og.png              превью 1200×630 для соцсетей
site.webmanifest               иконки для «на главный экран» на Android
tools/convert-shots.py         PNG-скриншоты приложения -> WebP (нужен Pillow)
tools/make-favicons.py         favicon.ico, favicon-192.png и favicon-512.png — знак рисуется кодом
.github/workflows/pages.yml    деплой на GitHub Pages
.github/workflows/checks.yml   проверки на каждый пуш и pull request
.github/check-site.py          сами проверки: ссылки, размеры, hreflang, места подстановки
.github/stamp-release.py       версия и ссылки из релиза в разметку обеих страниц, на деплое

Проверки

python .github/check-site.py

Скрипту хватает стандартной библиотеки Python, из зависимостей — ничего. Он проверяет то, что не видно в браузере, пока страница не сломалась: все локальные src/href существуют, размеры <img> в разметке совпадают с настоящими размерами файлов (WebP и PNG он читает сам, без Pillow), og:image соответствует своему файлу, canonical каждой страницы указывает на неё саму, а hreflang — на обе языковые версии, в разметке и скриптах нет следов обращений к чужим серверам, места подстановки релиза (data-release-version, data-release-date, data-download-os) на месте в обоих лендингах, и stamp-release.py на поддельном релизе подставляет версию, дату и все три ссылки — по-русски на русской странице и по-английски на английской. Тот же скрипт стоит в pages.yml перед выкладкой: битая разметка не доедет до сайта.

Иконки

Знак есть в двух видах: полный (assets/img/app.svg — с надписью «OSE», тенями и свечением) и без надписи (те же два синих клина на #111318). Упрощённый нужен только там, где знак показывается мелко: на 16–48 px надпись превращается в грязное пятно, а клинья читаются.

Файл Вид знака Кому
assets/img/app.svg полный современные браузеры (Chrome, Edge, Firefox, Safari 16.4+) — объявлен первым
favicon.ico (в корне, 16/32/48) без надписи поисковики, старые Safari и встроенные браузеры приложений, закрепление на панели задач Windows, слепой запрос за /favicon.ico
assets/img/favicon-192.png без надписи «на главный экран» в Android, через site.webmanifest
assets/img/favicon-512.png без надписи то же, крупная форма для сплэша
assets/img/apple-touch-icon.png полный «на главный экран» в iOS (там 60–180 px, надпись видна)
assets/img/og.png полный превью 1200×630 для соцсетей

Всё растровое собирается одной командой:

python tools/make-favicons.py

Скрипт рисует знак кодом (Pillow), а не рендерит SVG: рендерить его здесь нечем — ни cairosvg, ни ImageMagick в системе нет. Поэтому геометрия клиньев задана и в app.svg, и в скрипте: поменяете клинья — поправьте координаты в двух местах. Тени из app.svg не переносятся: на мелком размере их не видно, а края мажут. Иконки для iOS и соцсетей скрипт не трогает — там нужен полный знак.

site.webmanifest лежит в корне и подключён со всех четырёх страниц (в en/ — через ../). start_url в нём намеренно нет: тогда добавленная на главный экран страница открывается сама собой, а не всегда русская. theme_color и background_color — #111318, фон знака.

Полный набор объявлений — index.html, en/index.html, privacy.html, en/privacy.html; на 404.html нет манифеста и apple-touch (для страницы ошибки они бессмысленны), остаются SVG и ICO. ICO лежит в корне сайта, а не в assets/img: так его находит и слепой запрос за /favicon.ico, который делают RSS-читалки и часть краулеров.

Откуда взялся контент

Всё фактическое содержимое сверено с README.md и CHANGELOG.md приложения (версия 4.0.2, 3 октября 2026):

  • Hero — что это приложение на Tauri 2 (Rust) с системным webview, а оверлей отдаётся локальным сервером и добавляется в OBS как Browser Source.
  • Возможности — редактор в стиле drag-and-drop, серверная очередь алертов, сцены и пульты, темы с 3D-вариантами, чат с ботом и автомодерацией, локальное хранение с шифрованием секретов.
  • Чипы под карточками — список виджетов из README.
  • Быстрый старт — npm install / npm run tauri:dev, адрес оверлея и настройки Browser Source.
  • FAQ — требования, подключение Twitch и DonationAlerts, где лежат данные, диагностика донатов, режимы «поверх игры», отчёты для поддержки.
  • Скачать — артефакты сборки и предупреждение о неподписанных сборках.
  • Звук, языки и диагностика — три карточки, добавленные последними: шумотека и озвучка донатов, RU/EN-интерфейс приложения и его же диагностика (логи сервисов, /healthz, отчёт для поддержки без секретов, бэкапы и автообновление).

Если формулировка разошлась с реальностью приложения — поправьте текст прямо в index.html.

Две языковые версии

Русская версия лежит в корне (index.html, privacy.html), английская — в en/. Это две отдельные разметки, а не перевод на лету: так поисковик видит английскую страницу целиком по-английски, а страница читается даже без JS.

  • Переключатель EN / RU в шапке (класс .lang-btn) и ссылки в подвалах ведут на ту же страницу другой версии.
  • Автопереброса по языку браузера нет намеренно: посетителя с Accept-Language: en никто не уводит на английскую версию и обратно не выпускает. Связь описана только для поисковиков — hreflang (ru, en, x-default → русская) в <head> каждой страницы и alternate в sitemap.xml.
  • Пути у английских страниц относительные, с ../ — как и везде на сайте, чтобы он работал и в корне домена, и в подкаталоге репозитория.
  • main.js и .github/stamp-release.py общие для обеих версий: язык берётся из <html lang="…"> — по нему stamp-release.py склоняет дату релиза («16 сентября 2026» против «September 16, 2026»), а main.js выбирает подписи лайтбокса.
  • Правя текст, правьте обе версии. Сверить это нечем: check-site.py проверяет ссылки, размеры, canonical/hreflang и подстановку релиза, но не смысл текстов между языками.

Что осталось проверить

  1. Лицензия — проверено: LICENSE в репозитории приложения есть, это GPLv3, все ссылки на сайте ведут куда надо. Если лицензия сменится — поправьте текст в FAQ, блоке «Скачать», подвалах и JSON-LD.

  2. Ссылки уже проставлены на github.com/Halantar-git/open-stream-environment: репозиторий, CHANGELOG, issues, releases/latest и README («Как установить»). Ссылки на файлы внутри репозитория (CHANGELOG.md, LICENSE) идут через blob/HEAD/…, а не через имя ветки: GitHub перенаправляет HEAD на ветку по умолчанию (проверено), поэтому переименование ветки их не сломает. Подставлять main руками не нужно.

  3. Скриншоты. Вставлены из приложения: в hero — assets/img/main.webp, в галерее #screens — остальные 9. Клик по скриншоту открывает его крупно: лайтбокс собран в assets/js/main.js без библиотек.

    Пересобрать из новых снимков: положить PNG в OSE_pic рядом с репозиторием и выполнить python tools/convert-shots.py (нужен Pillow — единственный инструмент с зависимостью). Размер не уменьшается: по нему выставлены width/height в разметке, их сверяет check-site.py. Кадры интерфейса идут без потерь, «игровые» — в качестве 90; всего 10 файлов ≈ 2.1 МБ вместо 12 МБ PNG.

    Что осталось на вычитку. width/height у poll2 исправлены на 1032 (в разметке стояло 1080). Alt-тексты выверены по описанию автора по всем десяти снимкам. По ходу правились ed-3 и stream-sc (темы Elite и Orbital), wheel-cfg (открытая панель), remote-full (пульт на мониторе, а не на телефоне, как я предполагал по имени файла), scene (вкладка «Сцены» в панели управления, а не полноэкранная сцена в OBS) и hud-mode (редактирование виджетов поверх игры). Остальные — main, poll2, term, history — совпали с тем, что уже стояло. Четыре снимка убраны из галереи, но исходники остались в OSE_pic и в конвертер больше не входят: wheel-new.webp (Колесо Фортуны), remote1.webp и remote2.webp (их заменил один горизонтальный remote-full.webp) и poll.webp (та же сцена голосования, что в poll2.webp). Снимки одни на обе версии, поэтому правки текста нужны в двух местах: index.html и en/index.html.

  4. Политика конфиденциальности (privacy.html и en/privacy.html) описывает сайт и приложение. Если в приложении появится новая интеграция или сбор данных — страницы нужно дополнить, иначе они начнут врать.

  5. Дата («Обновлено: …» / «Last updated: …») в обеих страницах политики проставлена руками — обновляйте вместе с правками текста.

  6. Тексты сборок. Сейчас везде написано, что для macOS есть только Apple Silicon (так и есть: релиз собирает arm64). Появится сборка под Intel — поправьте FAQ, блок «Скачать» и softwareRequirements в JSON-LD обеих версий.

Адрес сайта — https://ose-overlay.ru/ — уже проставлен в canonical, og:url, JSON-LD, SITE_ROOT (404.html), sitemap.xml и robots.txt.

Material Design 3

Стили написаны на официальных M3-токенах (assets/css/style.css), без фреймворков и внешних зависимостей.

  • Цветовые роли по схеме md.sys.color.*: primary / on-primary / primary-container / surface-container-low..highest / outline-variant / inverse-* и т.д. Палитра собрана из цветов иконки приложения: primary (светлая схема) = #005FAF, secondary = #386595 (второй синий с логотипа, он же цвет фокус-ринга), тёмная поверхность и background = #111318. Остальные роли — производные тона синей шкалы M3.
  • tertiary уведён в сине-голубую часть шкалы: в M3 он по умолчанию фиолетовый, а в логотипе фиолетового нет. В стилях сейчас не используется — это запас на будущее.
  • Тёмная схема — полный набор ролей; включается по системной настройке или кнопкой в шапке.
  • Типографика — шкала md.sys.typescale.* (display / headline / title / body / label). Заголовки в M3 — Regular (400), а не Bold.
  • Shape — corner-extra-small 4 → corner-extra-large 28 → corner-full.
  • Elevation — уровни 1–3 из спеки, без своих теней.
  • State layers — hover 8%, focus 10%, pressed 10% через --md-sys-state-*; на кнопках и icon button работает ripple (в main.js, отключается при prefers-reduced-motion).
  • Компоненты: top app bar, filled и outlined кнопки, icon button, assist chip, elevated cards, expansion panels (FAQ), баннер на primary-container, выпадающее меню в мобильной навигации.

Своя палитра

Возьмите палитру в Material Theme Builder, экспортируйте CSS-переменные и замените ими блоки :root, @media (prefers-color-scheme: dark) и :root[data-theme="dark"] в начале assets/css/style.css. Имена токенов менять не нужно — остальной файл на них и построен. В этих же блоках лежат два не-M3 токена — --page-wedge-left и --page-wedge-right (клинья на фоне страницы): при замене палитры их нужно сохранить, иначе клинья останутся без заливки.

Иконка приложения (assets/img/app.svg) — ваш собственный файл со своими цветами (#005FAF, #386595 на #111318); сайт её не перекрашивает, потому что SVG подключён через <img> и CSS-переменные внутри него не работают. При смене палитры сайта иконку можно не трогать — это айдентика.

Шрифт

В --md-ref-typeface-plain первым стоит Roboto, но извне он не подгружается — сайт остаётся без сторонних запросов. На Android и ChromeOS Roboto есть в системе, на Windows и macOS подставится системный шрифт. Если нужен Roboto везде, добавьте в <head>:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">

Локальный просмотр

Достаточно открыть index.html в браузере; английская версия — en/index.html. Если нужен http-сервер (с ним видно, как ведёт себя адрес /en/ без имени файла):

python -m http.server 8000

Публикация на GitHub Pages

Публикует workflow .github/workflows/pages.yml: он забирает файлы из корня репозитория и отдаёт их на Pages через actions/upload-pages-artifact и actions/deploy-pages.

  1. Запушьте репозиторий в GitHub (ветка main).
  2. Включите Pages: Settings → Pages → Source → GitHub Actions. Шаг обязательный — без него workflow падает на configure-pages с Get Pages site failed ... Not Found.
  3. Дальше публикация идёт сама: каждый пуш в main запускает workflow, плюс есть ручной запуск — Actions → Deploy to GitHub Pages → Run workflow. Адрес сайта — https://ose-overlay.ru/; как он подключается, описано в «Свой домен» ниже.

Первый пуш:

git init
git add .
git commit -m "Add app landing page for GitHub Pages"
git branch -M main
git remote add origin https://github.com/<логин>/<репозиторий>.git
git push -u origin main

Пути в проекте относительные, поэтому сайт работает и в подкаталоге (/<репозиторий>/), и в корне домена.

Куда именно лягут файлы: папку для публикации задаёт шаг upload-pages-artifact — если сайт ляжет в подкаталог репозитория приложения, поменяйте в .github/workflows/pages.yml path: . на нужную.

Как сайт получает свежую версию

Версия, дата и ссылки на файлы берутся из последнего релиза приложения, а релиз выходит в другом репозитории — пуша сюда он не делает. Поэтому выкладка запускается тремя способами:

  1. Пуш в main — обычный случай: поправили текст, сайт пересобрался.

  2. Расписание (schedule в pages.yml, раз в сутки в 03:00 UTC) — страховка: если релиз вышел, а в этот репозиторий ничего не пушили, страница через сутки подтянет новую версию сама.

  3. repository_dispatch с типом app-release — мгновенно: репозиторий приложения сам просит пересобрать сайт, когда релиз опубликован. Запрос отправляет отдельный workflow в репозитории приложения — .github/workflows/notify-site.yml:

    name: Notify the site

on:
  release:
    types: [published]

permissions:
  contents: read

jobs:
  dispatch:
    runs-on: ubuntu-latest
    steps:
      - name: Ask the site repo to redeploy
        env:
          TOKEN: ${{ secrets.SITE_DISPATCH_TOKEN }}
        run: |
          curl -fsS -X POST \
            -H "Accept: application/vnd.github+json" \
            -H "Authorization: Bearer $TOKEN" \
            https://api.github.com/repos/Halantar-git/ose-website/dispatches \
            -d '{"event_type":"app-release"}'

    SITE_DISPATCH_TOKEN — секрет в репозитории приложения: fine-grained PAT с доступом к ose-website и правом Contents: Read and write (обычный PAT — со scope repo). Событие release: published срабатывает именно при публикации релиза, а не при создании черновика, то есть тогда, когда версия становится видна в releases/latest — сайт не пересобирается впустую.

Поэтому запрос к api.github.com со страницы убран совсем: посетителю не нужен ни он, ни чужой лимит в 60 запросов в час, а политика конфиденциальности может честно говорить, что внешних запросов нет.

Одна оговорка про расписание: GitHub сам выключает schedule в репозитории, где 60 дней ничего не происходило. Для сайта это не критично — пуш и repository_dispatch работают в любом случае, — но если замечаете, что версия перестала обновляться сама, загляните в Actions → Deploy to GitHub Pages и включите workflow обратно.

Если сайт не обновился

  • Workflow упал на configure-pages с Get Pages site failed ... Not Found — у репозитория не включён Pages (шаг 2 выше). Включите и перезапустите прогон (Re-run all jobs).
  • После пуша не появилось ни одного прогона — значит источник Pages стоит не «GitHub Actions». В этом режиме деплоит только workflow, а сборка из ветки, наоборот, останавливается: сайт остаётся на последней удачной сборке и выглядит устаревшим, хотя в репозитории всё новое. Проверьте Settings → Pages → Source.

Свой домен

Домен — ose-overlay.ru; он уже проставлен в canonical, og:url, JSON-LD и SITE_ROOT (в 404.html это '/', потому что сайт лежит в корне домена).

Порядок важен: домен сначала добавляют в GitHub и только потом настраивают DNS. Если сделать наоборот, поддомен успеет занять кто-то другой.

  1. Верифицируйте домен через Settings → Pages → Custom domain — GitHub покажет TXT-запись для DNS. Это защита от захвата домена.

  2. Впишите домен туда же и нажмите Save. Публикация идёт через Actions, поэтому файл CNAME в репозитории не нужен: в этом режиме GitHub его не создаёт и игнорирует — домен живёт только в настройках Pages.

  3. У DNS-провайдера направьте домен на GitHub Pages:

    • ose-overlay.ru (apex) — записи A на 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153 и, по желанию, AAAA на 2606:50c0:8000::153, 2606:50c0:8001::153, 2606:50c0:8002::153, 2606:50c0:8003::153; если провайдер умеет ALIAS/ANAME, хватит одной записи на halantar-git.github.io;
    • www.ose-overlay.ru — CNAME на halantar-git.github.io.

    Заведите оба варианта: GitHub сам сделает редирект между apex и www.

  4. Когда DNS-записи разойдутся по интернету, включите Enforce HTTPS: сертификат может выдаваться до 24 часов.

Старый адрес https://halantar-git.github.io/ose-website/ после подключения домена будет перенаправлять на новый — GitHub делает это сам.

Мелочи, которые уже сделаны

  • Светлая и тёмная тема: следует системной, переключается кнопкой в шапке, выбор запоминается (localStorage).
  • Адаптив от 320 px, мобильное меню, prefers-reduced-motion.
  • Базовая доступность: skip-link, aria-*, видимый фокус (3px secondary по спеке M3), семантика.
  • SEO/соцсети: description, canonical на домен, Open Graph с превью 1200×630 (assets/img/og.png), Twitter card, JSON-LD SoftwareApplication, sitemap.xml и robots.txt.
  • Две языковые версии сайта с hreflang и переключателем EN / RU в шапке — подробности в разделе «Две языковые версии».
  • Фон страницы: два клина по краям окна той же композиции, что в баннере приложения. Занимают только поля за пределами 1200px контента, поэтому под текстом не бывают; на окнах уже 1300px скрываются совсем.
  • Пока страница наверху, шапка без заливки — клинья проходят сквозь неё и не обрываются на её высоте. С первым сдвигом страницы (8px) шапка становится обычной: заливается surface-container и получает тень. Флаг at-top ставит скрипт в <head> до первой отрисовки, дальше его тянет main.js; без JS шапка просто всегда залита, как было.
  • Версия, дата сборки и ссылки на файлы не вбиты руками: перед выкладкой .github/stamp-release.py подставляет значения последнего релиза в оба лендинга (index.html и en/index.html), поэтому у посетителя кнопки работают без запросов к API. Дату он склоняет по языку страницы. В самом репозитории значения могут отставать — их обновляет деплой.
  • Со страницы не уходит ни одного своего запроса: версию, дату и адреса файлов подставляет деплой, поэтому в браузере посетителя нет ни fetch к api.github.com, ни зависимости от чужих лимитов. Подсветка кнопки системы — это разбор userAgent, без сети.
  • Систему посетителя определяет браузер (userAgentData, иначе userAgent), и кнопка этой системы получает заливку вместо контура. iPadOS, Android и ChromeOS считаются неизвестными: файлы релиза на них не запускаются.
  • Иконки Windows, Linux и macOS в нижнем ряду — глифы из Simple Icons (CC0), вставлены прямо в разметку.
  • Скриншоты открываются крупно по клику: Esc, клик по фону или крестик закрывают, фокус возвращается на картинку, остальная страница на это время — inert. Без JS ссылка ведёт на сам файл.
  • theme-color для мобильных браузеров меняется вместе с темой.
  • Скриншоты — WebP вместо PNG (было 7,7 МБ, стало 0,8 МБ). Размеры картинок проставлены в разметке, поэтому при замене файлов их нужно поправить, иначе проверки это поймают. Пересжать можно, например, cwebp -q 82 -m 6 file.png -o file.webp.
  • privacy.html описывает, что делают с данными сайт и приложение, со ссылками на issues для исправлений.

About

ose-website

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages