feat: add fullscreen docs demo routes

docs-site/astro.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig({
       plugins: [
         starlightThemeNova({
           nav: [
-            { label: 'Демо', href: '/demo/' },
+            { label: 'Демо', href: '/demo/home' },
             { label: 'Установка', href: '/getting-started/setup/' },
             { label: 'GitHub', href: 'https://github.com/3252a8/remnawave-minishop' },
             { label: 'Telegram', href: 'https://t.me/remnawave_minishop' }

docs-site/package.json

@@ -5,7 +5,7 @@
     "sync:docs": "node ./scripts/sync-docs.mjs",
     "build:demo": "node ./scripts/build-demo-runtime.mjs",
     "dev": "npm run sync:docs && npm run build:demo && astro dev",
-    "build": "npm run sync:docs && npm run build:demo && astro build",
+    "build": "npm run sync:docs && npm run build:demo && astro build && node ./scripts/materialize-demo-routes.mjs",
     "preview": "astro preview"
   },
   "dependencies": {

docs-site/public/_redirects

@@ -0,0 +1,20 @@
+# Cloudflare Pages rewrites for the static docs demo SPA.
+# Keep these scoped to app routes so runtime JS/CSS/assets are served directly.
+/demo/runtime /demo/runtime/app.html 200
+/demo/runtime/ /demo/runtime/app.html 200
+/demo/runtime/home /demo/runtime/app.html 200
+/demo/runtime/home/* /demo/runtime/app.html 200
+/demo/runtime/install /demo/runtime/app.html 200
+/demo/runtime/install/* /demo/runtime/app.html 200
+/demo/runtime/trial /demo/runtime/app.html 200
+/demo/runtime/trial/* /demo/runtime/app.html 200
+/demo/runtime/invite /demo/runtime/app.html 200
+/demo/runtime/invite/* /demo/runtime/app.html 200
+/demo/runtime/devices /demo/runtime/app.html 200
+/demo/runtime/devices/* /demo/runtime/app.html 200
+/demo/runtime/support /demo/runtime/app.html 200
+/demo/runtime/support/* /demo/runtime/app.html 200
+/demo/runtime/settings /demo/runtime/app.html 200
+/demo/runtime/settings/* /demo/runtime/app.html 200
+/demo/runtime/admin /demo/runtime/app.html 200
+/demo/runtime/admin/* /demo/runtime/app.html 200

docs-site/public/demo/demo-shell.js

@@ -0,0 +1,160 @@
+const frame = document.getElementById("demo-frame");
+const runtimeBase = "/demo/runtime";
+const demoBase = "/demo";
+const defaultMock = "tariffs";
+const stateMocks = new Set([
+  "tariffs",
+  "depleted",
+  "no-subscription",
+  "trial",
+  "expiring",
+  "traffic",
+  "devices",
+]);
+const routeMocks = new Set([...stateMocks, "guides", "install"]);
+const params = new URLSearchParams(window.location.search);
+
+const normalizePath = (value) => {
+  const raw = String(value || "").trim();
+  if (!raw) return "/home";
+  const withSlash = raw.startsWith("/") ? raw : `/${raw}`;
+  return withSlash.replace(/\/{2,}/g, "/").replace(/\/+$/, "") || "/home";
+};
+
+const normalizeRouteMock = (value) => {
+  const mock = String(value || "").trim().toLowerCase();
+  return routeMocks.has(mock) ? mock : defaultMock;
+};
+
+const normalizeStateMock = (value) => {
+  const mock = normalizeRouteMock(value);
+  return stateMocks.has(mock) ? mock : defaultMock;
+};
+
+const routeFromPublicPath = () => {
+  const pathname = window.location.pathname.replace(/\/+$/, "") || "/";
+  const lowerPathname = pathname.toLowerCase();
+  if (lowerPathname === demoBase) return "";
+  if (!lowerPathname.startsWith(`${demoBase}/`)) return "";
+
+  const publicRoute = pathname.slice(demoBase.length);
+  if (!publicRoute || publicRoute.toLowerCase().startsWith("/runtime")) return "";
+  return normalizePath(publicRoute);
+};
+
+const routeFromParams = () => {
+  const publicRoute = routeFromPublicPath();
+  if (publicRoute) return publicRoute;
+
+  const explicitPath = params.get("path");
+  if (explicitPath) return normalizePath(explicitPath);
+
+  const screen = String(params.get("screen") || "home")
+    .trim()
+    .toLowerCase();
+  if (screen === "admin") {
+    const adminSection = String(params.get("admin_section") || "stats")
+      .trim()
+      .toLowerCase();
+    return `/admin/${adminSection || "stats"}`;
+  }
+  if (
+    [
+      "home",
+      "install",
+      "trial",
+      "invite",
+      "devices",
+      "support",
+      "settings",
+    ].includes(screen)
+  ) {
+    return `/${screen}`;
+  }
+  return "/home";
+};
+
+const initialRoute = routeFromParams();
+params.set("mock", normalizeRouteMock(params.get("mock")));
+params.delete("path");
+params.delete("screen");
+params.delete("admin_section");
+params.set("path", initialRoute);
+frame.src = `${runtimeBase}/app.html?${params.toString()}${window.location.hash || ""}`;
+
+const routeFromRuntimeUrl = (url) => {
+  if (url.origin !== window.location.origin) return "";
+  if (!url.pathname.toLowerCase().startsWith(runtimeBase.toLowerCase())) return "";
+  const runtimePath = normalizePath(url.pathname.slice(runtimeBase.length) || "/home");
+  if (runtimePath === "/app.html") {
+    return normalizePath(url.searchParams.get("path") || "/home");
+  }
+  return runtimePath;
+};
+
+const materializedRouteFromRuntime = (route) => {
+  const normalized = normalizePath(route);
+  if (/^\/admin\/users\/-?\d+$/i.test(normalized)) return "/admin/users";
+  if (/^\/admin\/payments\/\d+$/i.test(normalized)) return "/admin/payments";
+  if (/^\/admin\/payments\/users\/-?\d+$/i.test(normalized)) return "/admin/payments";
+  if (/^\/admin\/support\/\d+$/i.test(normalized)) return "/admin/support";
+  if (/^\/support\/\d+$/i.test(normalized)) return "/support";
+  return normalized;
+};
+
+const publicPathFromRoute = (route) => `${demoBase}${materializedRouteFromRuntime(route)}`;
+const topbar = document.querySelector(".demo-topbar");
+const toggle = document.querySelector(".demo-topbar__toggle");
+const hide = document.querySelector(".demo-topbar__hide");
+const stateSelect = document.querySelector(".demo-topbar__state-select");
+
+const syncParentUrlFromFrame = () => {
+  try {
+    const frameUrl = new URL(frame.contentWindow.location.href);
+    const route = routeFromRuntimeUrl(frameUrl);
+    if (!route) return;
+
+    const nextUrl = new URL(window.location.href);
+    nextUrl.pathname = publicPathFromRoute(route);
+    nextUrl.searchParams.delete("path");
+
+    const mock = normalizeRouteMock(frameUrl.searchParams.get("mock") || params.get("mock"));
+    if (mock === defaultMock) nextUrl.searchParams.delete("mock");
+    else nextUrl.searchParams.set("mock", mock);
+    if (stateSelect) stateSelect.value = normalizeStateMock(mock);
+
+    nextUrl.searchParams.delete("screen");
+    nextUrl.searchParams.delete("admin_section");
+    const nextPath = `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`;
+    const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    if (nextPath !== currentPath) window.history.replaceState(null, "", nextPath);
+  } catch (_error) {
+    // The iframe is same-origin in docs builds; this keeps local oddities harmless.
+  }
+};
+
+frame.addEventListener("load", syncParentUrlFromFrame);
+window.setInterval(syncParentUrlFromFrame, 750);
+
+const setCollapsed = (collapsed) => {
+  topbar?.toggleAttribute("data-collapsed", collapsed);
+  toggle?.setAttribute("aria-expanded", String(!collapsed));
+};
+
+toggle?.addEventListener("click", () => setCollapsed(false));
+hide?.addEventListener("click", () => setCollapsed(true));
+if (stateSelect) stateSelect.value = normalizeStateMock(params.get("mock"));
+stateSelect?.addEventListener("change", () => {
+  const mock = normalizeStateMock(stateSelect.value);
+  const nextParams = new URLSearchParams(window.location.search);
+  nextParams.delete("path");
+  nextParams.delete("screen");
+  nextParams.delete("admin_section");
+  if (mock === defaultMock) nextParams.delete("mock");
+  else nextParams.set("mock", mock);
+
+  const query = nextParams.toString();
+  const publicUrl = `${demoBase}/home${query ? `?${query}` : ""}`;
+  window.history.replaceState(null, "", publicUrl);
+  frame.src = `${runtimeBase}/home?mock=${mock}`;
+});

docs-site/scripts/materialize-demo-routes.mjs

@@ -0,0 +1,65 @@
+import { copyFile, mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const siteRoot = path.resolve(fileURLToPath(new URL("..", import.meta.url)));
+const distRoot = path.join(siteRoot, "dist");
+
+const userRoutes = [
+  "home",
+  "install",
+  "trial",
+  "invite",
+  "devices",
+  "support",
+  "settings",
+];
+
+const adminRoutes = [
+  "stats",
+  "users",
+  "payments",
+  "promos",
+  "ads",
+  "broadcast",
+  "logs",
+  "support",
+  "tariffs",
+  "appearance",
+  "translations",
+  "backups",
+  "settings",
+];
+
+const demoRoutes = [
+  ...userRoutes.map((route) => `demo/${route}`),
+  "demo/admin",
+  ...adminRoutes.map((route) => `demo/admin/${route}`),
+];
+
+const runtimeRoutes = [
+  ...userRoutes.map((route) => `demo/runtime/${route}`),
+  "demo/runtime/admin",
+  ...adminRoutes.map((route) => `demo/runtime/admin/${route}`),
+];
+
+async function copyHtml(source, route) {
+  const targetDir = path.join(distRoot, route);
+  await mkdir(targetDir, { recursive: true });
+  await copyFile(source, path.join(targetDir, "index.html"));
+}
+
+const demoShell = path.join(distRoot, "demo", "index.html");
+const runtimeApp = path.join(distRoot, "demo", "runtime", "app.html");
+
+for (const route of demoRoutes) {
+  await copyHtml(demoShell, route);
+}
+
+for (const route of runtimeRoutes) {
+  await copyHtml(runtimeApp, route);
+}
+
+console.log(
+  `Materialized ${demoRoutes.length} public demo routes and ${runtimeRoutes.length} runtime routes`,
+);

docs-site/scripts/sync-docs.mjs

@@ -102,7 +102,7 @@ function extraFrontmatter(sourceRelativePath) {
     '    html: \'<img class="minishop-hero-screenshot" src="/remnawave-minishop.webp" alt="Интерфейс Remnawave Minishop" width="1920" height="1080" loading="eager" decoding="async" />\'',
     '  actions:',
     '    - text: "Демо"',
-    '      link: /demo/',
+    '      link: /demo/home',
     '      icon: right-arrow',
     '    - text: "Установка"',
     '      link: /getting-started/setup/',

docs-site/src/pages/demo.astro

@@ -1,5 +1,5 @@
 ---
-const defaultDemoSrc = '/demo/runtime/app.html?screen=home&mock=tariffs';
+const defaultDemoSrc = '/demo/runtime/app.html?path=/home&mock=tariffs';
 const docsHref = '/getting-started/demo/';
 ---
 
@@ -80,6 +80,43 @@ const docsHref = '/getting-started/demo/';
         line-height: 1.2;
       }
 
+      .demo-topbar__state {
+        display: flex;
+        flex: 0 1 24rem;
+        gap: 0.5rem;
+        align-items: center;
+        justify-content: flex-end;
+        min-width: 0;
+      }
+
+      .demo-topbar__state-label {
+        flex: 0 0 auto;
+        color: #94a3b8;
+        font-size: 0.78rem;
+        font-weight: 650;
+        line-height: 1;
+      }
+
+      .demo-topbar__state-select {
+        min-width: 13.25rem;
+        max-width: 100%;
+        border: 1px solid rgb(148 163 184 / 28%);
+        border-radius: 7px;
+        padding: 0.42rem 1.9rem 0.42rem 0.65rem;
+        background: rgb(15 23 42 / 82%);
+        color: #f8fafc;
+        cursor: pointer;
+        font: inherit;
+        font-size: 0.82rem;
+        font-weight: 650;
+        line-height: 1.2;
+      }
+
+      .demo-topbar__state-select:focus-visible {
+        outline: 2px solid rgb(0 254 122 / 72%);
+        outline-offset: 2px;
+      }
+
       .demo-topbar__back {
         flex: 0 0 auto;
         border: 1px solid rgb(0 254 122 / 45%);
@@ -158,6 +195,7 @@ const docsHref = '/getting-started/demo/';
 
         .demo-topbar__panel {
           display: flex;
+          flex-wrap: wrap;
           gap: 0.55rem;
           align-items: center;
           width: min(20rem, calc(100vw - 1.1rem));
@@ -182,6 +220,23 @@ const docsHref = '/getting-started/demo/';
           white-space: nowrap;
         }
 
+        .demo-topbar__state {
+          flex: 1 1 100%;
+          order: 3;
+          width: 100%;
+          justify-content: stretch;
+        }
+
+        .demo-topbar__state-label {
+          display: none;
+        }
+
+        .demo-topbar__state-select {
+          width: 100%;
+          min-width: 0;
+          font-size: 0.78rem;
+        }
+
         .demo-topbar__actions {
           gap: 0.35rem;
         }
@@ -229,6 +284,18 @@ const docsHref = '/getting-started/demo/';
         <div class="demo-topbar__title">
           <strong>remnawave-minishop demo</strong>
         </div>
+        <label class="demo-topbar__state">
+          <span class="demo-topbar__state-label">Состояние</span>
+          <select class="demo-topbar__state-select" aria-label="Состояние личного кабинета">
+            <option value="tariffs">По умолчанию</option>
+            <option value="depleted">Трафик закончился</option>
+            <option value="no-subscription">Нет подписки</option>
+            <option value="trial">Доступна пробная подписка</option>
+            <option value="expiring">Подписка скоро закончится</option>
+            <option value="traffic">Продажа трафика</option>
+            <option value="devices">Лимит устройств</option>
+          </select>
+        </label>
         <div class="demo-topbar__actions">
           <a class="demo-topbar__back" href={docsHref}>К документации</a>
           <button class="demo-topbar__hide" type="button" aria-label="Скрыть панель">
@@ -244,24 +311,6 @@ const docsHref = '/getting-started/demo/';
       src={defaultDemoSrc}
       loading="eager"
     ></iframe>
-    <script is:inline>
+    <script is:inline src="/demo/demo-shell.js"></script>
-      const frame = document.getElementById('demo-frame');
-      const params = new URLSearchParams(window.location.search);
-      if (!params.has('screen')) params.set('screen', 'home');
-      if (!params.has('mock')) params.set('mock', 'tariffs');
-      frame.src = `/demo/runtime/app.html?${params.toString()}${window.location.hash || ''}`;
-
-      const topbar = document.querySelector('.demo-topbar');
-      const toggle = document.querySelector('.demo-topbar__toggle');
-      const hide = document.querySelector('.demo-topbar__hide');
-
-      const setCollapsed = (collapsed) => {
-        topbar.toggleAttribute('data-collapsed', collapsed);
-        toggle.setAttribute('aria-expanded', String(!collapsed));
-      };
-
-      toggle.addEventListener('click', () => setCollapsed(false));
-      hide.addEventListener('click', () => setCollapsed(true));
-    </script>
   </body>
 </html>

docs-site/src/pages/demo/[...path].astro

@@ -0,0 +1,30 @@
+---
+import DemoShell from '../demo.astro';
+
+export function getStaticPaths() {
+  const userRoutes = ['home', 'install', 'trial', 'invite', 'devices', 'support', 'settings'];
+  const adminRoutes = [
+    'stats',
+    'users',
+    'payments',
+    'promos',
+    'ads',
+    'broadcast',
+    'logs',
+    'support',
+    'tariffs',
+    'appearance',
+    'translations',
+    'backups',
+    'settings',
+  ];
+
+  return [
+    ...userRoutes.map((path) => ({ params: { path } })),
+    { params: { path: 'admin' } },
+    ...adminRoutes.map((section) => ({ params: { path: `admin/${section}` } })),
+  ];
+}
+---
+
+<DemoShell />

docs/getting-started/demo.md

@@ -2,16 +2,16 @@
 
 Демо-режим показывает статическую сборку Remnawave Minishop с моковыми данными. Он нужен для документации и предпросмотра интерфейса: Mini App, пользовательские сценарии и админка открываются в браузере без backend, базы данных и внешних API.
 
-[Открыть демо](/demo/)
+[Открыть демо](/demo/home)
 
 ## Быстрые ссылки
 
-- [Главный экран демо](/demo/)
+- [Главный экран демо](/demo/home)
-- [Инструкции подключения](/demo/?screen=install&mock=guides)
+- [Инструкции подключения](/demo/install?mock=guides)
-- [Админка: пользователи](/demo/?screen=admin&admin_section=users&mock=tariffs)
+- [Админка: пользователи](/demo/admin/users)
-- [Админка: бэкапы](/demo/?screen=admin&admin_section=backups&mock=tariffs)
+- [Админка: бэкапы](/demo/admin/backups)
-- [Пробный период](/demo/?screen=trial&mock=trial)
+- [Пробный период](/demo/trial?mock=trial)
-- [Устройства](/demo/?screen=devices&mock=devices)
+- [Устройства](/demo/devices?mock=devices)
 
 ## Как собирается
 
@@ -21,7 +21,10 @@
 - использует entrypoint `frontend/src/docsDemoEntry.js`, где подключены моковые данные и mock API;
 - дополнительно собирает обычный admin-бандл, чтобы админка работала внутри демо;
 - копирует JS/CSS, темы, default-brand ассеты, локали и конфиг гайдов подключения в `docs-site/public/demo/runtime/`;
-- генерирует `app.html`, который грузит demo runtime и встроенные переводы.
+- генерирует `app.html`, который грузит demo runtime и встроенные переводы;
+- после Astro build материализует публичные страницы `/demo/home`, `/demo/install`, `/demo/admin/stats` и другие основные demo routes как статические `index.html`;
+- Cloudflare Pages rewrite-правила остаются только для внутреннего `/demo/runtime/*`, чтобы iframe мог использовать обычный History API без влияния на остальные страницы документации;
+- страницы `/demo/home`, `/demo/install`, `/demo/admin/*` и другие demo routes служат полноэкранной обвязкой с верхней панелью возврата в документацию, а внешняя страница синхронизирует читаемый адрес демо.
 
 Папка `docs-site/public/demo/runtime/` не хранится в репозитории. Она создается на build step и попадает в итоговый `docs-site/dist/`, поэтому Cloudflare Pages публикует демо вместе с остальным docs-сайтом.
 

frontend/src/docsDemoEntry.js

@@ -70,9 +70,19 @@ function prepareMockConfig() {
   copyThemeAssets(DEV_MOCK.data.themes_catalog);
 }
 
+function parentSearchParams() {
+  try {
+    if (window.parent === window) return null;
+    return new URLSearchParams(window.parent.location.search);
+  } catch (_error) {
+    return null;
+  }
+}
+
 async function bootstrap() {
   const params = new URLSearchParams(window.location.search);
-  applyPreviewMock(params.get("mock"));
+  const parentParams = parentSearchParams();
+  applyPreviewMock(params.get("mock") || parentParams?.get("mock"));
   prepareMockConfig();
   try {
     await loadInstallGuidesConfig();