docs: add interactive demo page

docs-site/astro.config.mjs

@@ -59,6 +59,7 @@ export default defineConfig({
           label: 'Начало',
           items: [
             { label: 'Обзор', slug: 'getting-started/overview' },
+            { label: 'Демо', slug: 'demo' },
             { label: 'Установка', slug: 'getting-started/setup' },
             { label: 'Развертывание', slug: 'getting-started/deployment' },
             { label: 'Настройка окружения', slug: 'getting-started/configuration' },

docs-site/scripts/sync-docs.mjs

@@ -8,6 +8,7 @@ const sourceDir = path.join(repoRoot, 'docs');
 const outputDir = path.join(siteRoot, 'src', 'content', 'docs');
 
 const descriptions = {
+  'demo/index.md': 'Статический демо-режим Remnawave Minishop с моковыми данными для Mini App и админки.',
   'index.md': 'Документация по запуску, настройке и сопровождению Telegram Mini App для Remnawave.',
   'getting-started/overview.md': 'Что входит в Remnawave Minishop и как связаны бот, Mini App, backend, worker и Remnawave Panel.',
   'getting-started/setup.md': 'Минимальный путь запуска Remnawave Minishop через Docker Compose.',

docs-site/src/styles/custom.css

@@ -99,4 +99,114 @@
     border-radius: 5px;
     padding: 0.08rem 0.28rem;
   }
+
+  .demo-shell {
+    overflow: hidden;
+    margin-block: 1.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 8px;
+    background: var(--sl-color-bg);
+  }
+
+  .demo-shell__bar {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1rem;
+    border-bottom: 1px solid var(--sl-color-gray-5);
+    background: var(--sl-color-bg-nav);
+  }
+
+  .demo-shell__bar strong,
+  .demo-shell__bar span {
+    display: block;
+  }
+
+  .demo-shell__bar strong {
+    color: var(--sl-color-white);
+    font-size: 0.95rem;
+  }
+
+  .demo-shell__bar span {
+    color: var(--sl-color-gray-2);
+    font-size: 0.82rem;
+  }
+
+  .demo-shell__exit {
+    flex: 0 0 auto;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 6px;
+    padding: 0.4rem 0.65rem;
+    color: var(--sl-color-white);
+    font-size: 0.84rem;
+    text-decoration: none;
+  }
+
+  .demo-shell__exit:hover {
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-accent);
+  }
+
+  .demo-shell__nav {
+    display: flex;
+    gap: 0.45rem;
+    overflow-x: auto;
+    padding: 0.7rem 1rem 0;
+    scrollbar-width: thin;
+  }
+
+  .demo-shell__nav--admin {
+    padding-top: 0.5rem;
+    padding-bottom: 0.7rem;
+    border-bottom: 1px solid var(--sl-color-gray-5);
+  }
+
+  .demo-shell__nav a {
+    flex: 0 0 auto;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    padding: 0.34rem 0.62rem;
+    color: var(--sl-color-gray-1);
+    font-size: 0.82rem;
+    line-height: 1.2;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .demo-shell__nav a:hover {
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-accent);
+  }
+
+  .demo-shell__frame {
+    display: block;
+    width: 100%;
+    height: min(78vh, 52rem);
+    min-height: 42rem;
+    border: 0;
+    background: #0b0f17;
+  }
+
+  @media (max-width: 42rem) {
+    .demo-shell {
+      margin-inline: calc(var(--sl-content-pad-x, 1rem) * -1);
+      border-inline: 0;
+      border-radius: 0;
+    }
+
+    .demo-shell__bar {
+      display: grid;
+      align-items: start;
+    }
+
+    .demo-shell__exit {
+      width: fit-content;
+    }
+
+    .demo-shell__frame {
+      height: 46rem;
+      min-height: 46rem;
+    }
+  }
 }

docs/demo/index.md

@@ -0,0 +1,42 @@
+# Демо
+
+Это статический демо-режим 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.