docs: make demo open fullscreen

2026-05-28 00:19:22 +03:00
parent 4c2ee19957
commit 2b8bcd10b8
7 changed files with 190 additions and 153 deletions
@@ -1,42 +0,0 @@
-# Демо
-
-Это статический демо-режим Remnawave Minishop для документации. Он собирается вместе с docs-сайтом, использует моковые данные в браузере и не подключается к backend.
-
-<div class="demo-shell">
-  <div class="demo-shell__bar">
-    <div>
-      <strong>Remnawave Minishop demo</strong>
-      <span>Статическая сборка, моковые данные, без backend</span>
-    </div>
-    <a class="demo-shell__exit" href="/getting-started/overview/">Выйти в документацию</a>
-  </div>
-  <nav class="demo-shell__nav" aria-label="Сценарии демо">
-    <a href="/demo/runtime/app.html?screen=home&mock=tariffs" target="minishop-demo-frame">Главная</a>
-    <a href="/demo/runtime/app.html?screen=home&mock=traffic" target="minishop-demo-frame">Трафик</a>
-    <a href="/demo/runtime/app.html?screen=trial&mock=trial" target="minishop-demo-frame">Пробный период</a>
-    <a href="/demo/runtime/app.html?screen=devices&mock=devices" target="minishop-demo-frame">Устройства</a>
-    <a href="/demo/runtime/app.html?screen=install&mock=guides" target="minishop-demo-frame">Инструкции</a>
-    <a href="/demo/runtime/app.html?screen=support&mock=tariffs" target="minishop-demo-frame">Поддержка</a>
-    <a href="/demo/runtime/app.html?screen=settings&mock=tariffs" target="minishop-demo-frame">Настройки</a>
-  </nav>
-  <nav class="demo-shell__nav demo-shell__nav--admin" aria-label="Сценарии админки">
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=stats&mock=tariffs" target="minishop-demo-frame">Админка</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=users&mock=tariffs" target="minishop-demo-frame">Пользователи</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=payments&mock=tariffs" target="minishop-demo-frame">Платежи</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=tariffs&mock=tariffs" target="minishop-demo-frame">Тарифы</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=support&mock=tariffs" target="minishop-demo-frame">Тикеты</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=appearance&mock=tariffs" target="minishop-demo-frame">Внешний вид</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=translations&mock=tariffs" target="minishop-demo-frame">Переводы</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=backups&mock=tariffs" target="minishop-demo-frame">Бэкапы</a>
-    <a href="/demo/runtime/app.html?screen=admin&admin_section=settings&mock=tariffs" target="minishop-demo-frame">Настройки админки</a>
-  </nav>
-  <iframe
-    class="demo-shell__frame"
-    name="minishop-demo-frame"
-    title="Remnawave Minishop static demo"
-    src="/demo/runtime/app.html?screen=home&mock=tariffs"
-    loading="eager"
-  ></iframe>
-</div>
-
-Демо-рантайм генерируется во время сборки сайта документации и не является частью продовой сборки Mini App.
@@ -0,0 +1,28 @@
+# Демо-режим
+
+Демо-режим показывает статическую сборку Remnawave Minishop с моковыми данными. Он нужен для документации и предпросмотра интерфейса: Mini App, пользовательские сценарии и админка открываются в браузере без backend, базы данных и внешних API.
+
+[Открыть демо](/demo/)
+
+## Как собирается
+
+При сборке сайта документации запускается `docs-site/scripts/build-demo-runtime.mjs`. Скрипт:
+
+- собирает отдельный frontend-бандл в Vite mode `docs-demo`;
+- использует entrypoint `frontend/src/docsDemoEntry.js`, где подключены моковые данные и mock API;
+- дополнительно собирает обычный admin-бандл, чтобы админка работала внутри демо;
+- копирует JS/CSS, темы, default-brand ассеты и локали в `docs-site/public/demo/runtime/`;
+- генерирует `app.html`, который грузит demo runtime и встроенные переводы.
+
+Папка `docs-site/public/demo/runtime/` не хранится в репозитории. Она создается на build step и попадает в итоговый `docs-site/dist/`, поэтому Cloudflare Pages публикует демо вместе с остальным docs-сайтом.
+
+## Почему это не попадает в production
+
+Обычная production-сборка Mini App использует `frontend/src/main.js` и не импортирует `previewMock`, `mockApi` или demo entrypoint. Моковый runtime подключается только в Vite mode `docs-demo`, который вызывается из сборки документации.
+
+## Быстрые ссылки
+
+- [Главный экран демо](/demo/)
+- [Админка: пользователи](/demo/?screen=admin&admin_section=users&mock=tariffs)
+- [Пробный период](/demo/?screen=trial&mock=trial)
+- [Устройства](/demo/?screen=devices&mock=devices)