docs: make demo open fullscreen
This commit is contained in:
3252a8
@@ -13,6 +13,7 @@ export default defineConfig({
|
|||||||
plugins: [
|
plugins: [
|
||||||
starlightThemeNova({
|
starlightThemeNova({
|
||||||
nav: [
|
nav: [
|
||||||
|
{ label: 'Демо', href: '/demo/' },
|
||||||
{ label: 'Установка', href: '/getting-started/setup/' },
|
{ label: 'Установка', href: '/getting-started/setup/' },
|
||||||
{ label: 'GitHub', href: 'https://github.com/3252a8/remnawave-minishop' },
|
{ label: 'GitHub', href: 'https://github.com/3252a8/remnawave-minishop' },
|
||||||
{ label: 'Telegram', href: 'https://t.me/remnawave_minishop' }
|
{ label: 'Telegram', href: 'https://t.me/remnawave_minishop' }
|
||||||
@@ -59,7 +60,7 @@ export default defineConfig({
|
|||||||
label: 'Начало',
|
label: 'Начало',
|
||||||
items: [
|
items: [
|
||||||
{ label: 'Обзор', slug: 'getting-started/overview' },
|
{ label: 'Обзор', slug: 'getting-started/overview' },
|
||||||
{ label: 'Демо', slug: 'demo' },
|
{ label: 'Демо-режим', slug: 'getting-started/demo' },
|
||||||
{ label: 'Установка', slug: 'getting-started/setup' },
|
{ label: 'Установка', slug: 'getting-started/setup' },
|
||||||
{ label: 'Развертывание', slug: 'getting-started/deployment' },
|
{ label: 'Развертывание', slug: 'getting-started/deployment' },
|
||||||
{ label: 'Настройка окружения', slug: 'getting-started/configuration' },
|
{ label: 'Настройка окружения', slug: 'getting-started/configuration' },
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ const sourceDir = path.join(repoRoot, 'docs');
|
|||||||
const outputDir = path.join(siteRoot, 'src', 'content', 'docs');
|
const outputDir = path.join(siteRoot, 'src', 'content', 'docs');
|
||||||
|
|
||||||
const descriptions = {
|
const descriptions = {
|
||||||
'demo/index.md': 'Статический демо-режим Remnawave Minishop с моковыми данными для Mini App и админки.',
|
'getting-started/demo.md': 'Как устроен статический демо-режим Remnawave Minishop и почему он собирается только вместе с документацией.',
|
||||||
'index.md': 'Документация по запуску, настройке и сопровождению Telegram Mini App для Remnawave.',
|
'index.md': 'Документация по запуску, настройке и сопровождению Telegram Mini App для Remnawave.',
|
||||||
'getting-started/overview.md': 'Что входит в Remnawave Minishop и как связаны бот, Mini App, backend, worker и Remnawave Panel.',
|
'getting-started/overview.md': 'Что входит в Remnawave Minishop и как связаны бот, Mini App, backend, worker и Remnawave Panel.',
|
||||||
'getting-started/setup.md': 'Минимальный путь запуска Remnawave Minishop через Docker Compose.',
|
'getting-started/setup.md': 'Минимальный путь запуска Remnawave Minishop через Docker Compose.',
|
||||||
|
|||||||
@@ -51,6 +51,10 @@ function navIcon(href: string) {
|
|||||||
}
|
}
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isDemoHref(href: string) {
|
||||||
|
return href === '/demo/' || href === '/demo'
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="box-border flex h-full items-center gap-2">
|
<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 href = getI18nText(item.href, route)
|
||||||
const label = getI18nText(item.label, route)
|
const label = getI18nText(item.label, route)
|
||||||
const icon = navIcon(href)
|
const icon = navIcon(href)
|
||||||
|
const demo = isDemoHref(href)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
class:list={[
|
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',
|
'-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',
|
icon && 'minishop-header-link inline-flex items-center',
|
||||||
|
demo && 'minishop-demo-nav-link',
|
||||||
]}
|
]}
|
||||||
href={href}
|
href={href}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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>
|
||||||
+11
-109
@@ -30,6 +30,17 @@
|
|||||||
flex-shrink: 0;
|
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 {
|
.hero {
|
||||||
gap: clamp(2rem, 6vw, 5rem);
|
gap: clamp(2rem, 6vw, 5rem);
|
||||||
padding-block: clamp(3.5rem, 10vw, 6.5rem);
|
padding-block: clamp(3.5rem, 10vw, 6.5rem);
|
||||||
@@ -100,113 +111,4 @@
|
|||||||
padding: 0.08rem 0.28rem;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
Reference in New Issue
Block a user