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

docs: make demo open fullscreen

Browse Source
This commit is contained in:
3252a8
2026-05-28 00:19:22 +03:00
parent 4c2ee19957
commit 2b8bcd10b8
7 changed files with 190 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/astro.config.mjs
+2 -1
View File
@@ -13,6 +13,7 @@ export default defineConfig({
plugins: [
starlightThemeNova({
nav: [
{ label: 'Демо', href: '/demo/' },
{ label: 'Установка', href: '/getting-started/setup/' },
{ label: 'GitHub', href: 'https://github.com/3252a8/remnawave-minishop' },
{ label: 'Telegram', href: 'https://t.me/remnawave_minishop' }
@@ -59,7 +60,7 @@ export default defineConfig({
label: 'Начало',
items: [
{ label: 'Обзор', slug: 'getting-started/overview' },
{ label: 'Демо', slug: 'demo' },
{ label: 'Демо-режим', slug: 'getting-started/demo' },
{ label: 'Установка', slug: 'getting-started/setup' },
{ label: 'Развертывание', slug: 'getting-started/deployment' },
{ label: 'Настройка окружения', slug: 'getting-started/configuration' },
docs-site/scripts/sync-docs.mjs
+1 -1
View File
@@ -8,7 +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 и админки.',
'getting-started/demo.md': 'Как устроен статический демо-режим Remnawave Minishop и почему он собирается только вместе с документацией.',
'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/components/Header.astro
+6
View File
@@ -51,6 +51,10 @@ function navIcon(href: string) {
}
return undefined
}
function isDemoHref(href: string) {
return href === '/demo/' || href === '/demo'
}
---
<div class="box-border flex h-full items-center gap-2">
@@ -70,12 +74,14 @@ function navIcon(href: string) {
const href = getI18nText(item.href, route)
const label = getI18nText(item.label, route)
const icon = navIcon(href)
const demo = isDemoHref(href)
return (
<a
class:list={[
'-m-1.5 rounded-md p-1.5 text-(--sl-color-gray-3) no-underline hover:text-(--sl-color-white) focus-visible:outline-offset-0',
icon && 'minishop-header-link inline-flex items-center',
demo && 'minishop-demo-nav-link',
]}
href={href}
>
docs-site/src/pages/demo.astro
+142
View File
@@ -0,0 +1,142 @@
---
const defaultDemoSrc = '/demo/runtime/app.html?screen=home&mock=tariffs';
const docsHref = '/getting-started/demo/';
---
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05080f" />
<title>Remnawave Minishop Demo</title>
<style>
:root {
color-scheme: dark;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
background: #05080f;
color: #f8fafc;
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
background: #05080f;
}
.demo-topbar {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
min-height: 3.25rem;
padding: max(0.7rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
0.7rem max(1rem, env(safe-area-inset-left));
border-bottom: 1px solid rgb(148 163 184 / 20%);
background: rgb(5 8 15 / 94%);
backdrop-filter: blur(16px);
}
.demo-topbar__title {
min-width: 0;
}
.demo-topbar__title strong,
.demo-topbar__title span {
display: block;
}
.demo-topbar__title strong {
color: #00fe7a;
font-size: 0.95rem;
line-height: 1.2;
}
.demo-topbar__title span {
overflow: hidden;
color: #cbd5e1;
font-size: 0.82rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo-topbar__back {
flex: 0 0 auto;
border: 1px solid rgb(0 254 122 / 45%);
border-radius: 7px;
padding: 0.48rem 0.72rem;
color: #f8fafc;
font-size: 0.86rem;
font-weight: 650;
line-height: 1;
text-decoration: none;
}
.demo-topbar__back:hover {
border-color: #00fe7a;
color: #00fe7a;
}
.demo-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #05080f;
}
@media (max-width: 42rem) {
.demo-topbar {
align-items: flex-start;
gap: 0.75rem;
}
.demo-topbar__title span {
white-space: normal;
}
}
</style>
</head>
<body>
<header class="demo-topbar">
<div class="demo-topbar__title">
<strong>Remnawave Minishop demo</strong>
<span>Демо-режим: статическая сборка с моковыми данными, без backend</span>
</div>
<a class="demo-topbar__back" href={docsHref}>Вернуться к документации</a>
</header>
<iframe
id="demo-frame"
class="demo-frame"
title="Remnawave Minishop static demo"
src={defaultDemoSrc}
loading="eager"
></iframe>
<script is:inline>
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 || ''}`;
</script>
</body>
</html>
docs-site/src/styles/custom.css
+11 -109
View File
@@ -30,6 +30,17 @@
flex-shrink: 0;
}
.minishop-demo-nav-link {
border: 1px solid rgb(0 254 122 / 38%);
color: var(--sl-color-white);
background: rgb(0 254 122 / 8%);
}
.minishop-demo-nav-link:hover {
border-color: #00fe7a;
color: #00fe7a;
}
.hero {
gap: clamp(2rem, 6vw, 5rem);
padding-block: clamp(3.5rem, 10vw, 6.5rem);
@@ -100,113 +111,4 @@
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
@@ -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.
docs/getting-started/demo.md
+28
View File
@@ -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)