austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

docs: add interactive demo page

Browse Source
This commit is contained in:
3252a8
2026-05-27 23:56:52 +03:00
parent 8217d13cd6
commit 4c2ee19957
4 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/astro.config.mjs
+1
View File
@@ -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
+1
View File
@@ -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
+110
View File
@@ -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
+42
View File
@@ -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.