From 62e950f5c42d040a38833c1ca7ae20c9ca467668 Mon Sep 17 00:00:00 2001 From: 3252a8 <3252a8@proton.me> Date: Thu, 28 May 2026 00:55:11 +0300 Subject: [PATCH] docs: refine static demo experience --- docs-site/scripts/build-demo-runtime.mjs | 18 ++++++ docs-site/src/components/Header.astro | 5 -- docs-site/src/styles/custom.css | 11 ---- docs/getting-started/demo.md | 18 +++--- frontend/src/docsDemoEntry.js | 76 ++++++++++++++++++------ frontend/src/lib/webapp/previewMock.js | 1 - 6 files changed, 87 insertions(+), 42 deletions(-) diff --git a/docs-site/scripts/build-demo-runtime.mjs b/docs-site/scripts/build-demo-runtime.mjs index e8fac26..87911a8 100644 --- a/docs-site/scripts/build-demo-runtime.mjs +++ b/docs-site/scripts/build-demo-runtime.mjs @@ -11,6 +11,8 @@ const templatesDir = path.join(repoRoot, 'backend', 'bot', 'app', 'web', 'templa const themesDir = path.join(repoRoot, 'backend', 'bot', 'app', 'web', 'themes'); const localesDir = path.join(repoRoot, 'locales'); const runtimeBase = '/demo/runtime'; +const installGuidesConfigUrl = + 'https://raw.githubusercontent.com/legiz-ru/my-remnawave/main/sub-page/subpage-config/multiapp.json'; const isWindows = process.platform === 'win32'; const npmExecPath = process.env.npm_execpath || ''; @@ -102,6 +104,19 @@ async function demoI18nPayload() { return jsonScriptPayload({ ru: JSON.parse(ru), en: JSON.parse(en) }); } +async function installGuidesConfigPayload() { + const response = await fetch(installGuidesConfigUrl, { + headers: { accept: 'application/json' }, + }); + if (!response.ok) { + throw new Error( + `Unable to download demo install guides config (${response.status} ${response.statusText})`, + ); + } + const config = await response.json(); + return `${JSON.stringify(config, null, 2)}\n`; +} + async function appHtml() { const i18n = await demoI18nPayload(); return ` @@ -144,6 +159,9 @@ await Promise.all([ copyDirectory(path.join(templatesDir, 'default-brand'), path.join(runtimeDir, 'default-brand')), copyDirectory(themesDir, path.join(runtimeDir, 'themes'), copyThemeFile), writeFile(path.join(runtimeDir, 'app.html'), html, 'utf8'), + installGuidesConfigPayload().then((payload) => + writeFile(path.join(runtimeDir, 'subscription-guides-config.json'), payload, 'utf8'), + ), ]); console.log(`Built static docs demo runtime at ${path.relative(repoRoot, runtimeDir)}`); diff --git a/docs-site/src/components/Header.astro b/docs-site/src/components/Header.astro index 9ce168a..f38ebc4 100644 --- a/docs-site/src/components/Header.astro +++ b/docs-site/src/components/Header.astro @@ -52,9 +52,6 @@ function navIcon(href: string) { return undefined } -function isDemoHref(href: string) { - return href === '/demo/' || href === '/demo' -} ---
@@ -74,14 +71,12 @@ function isDemoHref(href: string) { const href = getI18nText(item.href, route) const label = getI18nText(item.label, route) const icon = navIcon(href) - const demo = isDemoHref(href) return ( diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css index 7bc7793..26df0af 100644 --- a/docs-site/src/styles/custom.css +++ b/docs-site/src/styles/custom.css @@ -30,17 +30,6 @@ 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); diff --git a/docs/getting-started/demo.md b/docs/getting-started/demo.md index c17b12c..f6fc556 100644 --- a/docs/getting-started/demo.md +++ b/docs/getting-started/demo.md @@ -4,6 +4,15 @@ [Открыть демо](/demo/) +## Быстрые ссылки + +- [Главный экран демо](/demo/) +- [Инструкции подключения](/demo/?screen=install&mock=guides) +- [Админка: пользователи](/demo/?screen=admin&admin_section=users&mock=tariffs) +- [Админка: бэкапы](/demo/?screen=admin&admin_section=backups&mock=tariffs) +- [Пробный период](/demo/?screen=trial&mock=trial) +- [Устройства](/demo/?screen=devices&mock=devices) + ## Как собирается При сборке сайта документации запускается `docs-site/scripts/build-demo-runtime.mjs`. Скрипт: @@ -11,7 +20,7 @@ - собирает отдельный frontend-бандл в Vite mode `docs-demo`; - использует entrypoint `frontend/src/docsDemoEntry.js`, где подключены моковые данные и mock API; - дополнительно собирает обычный admin-бандл, чтобы админка работала внутри демо; -- копирует JS/CSS, темы, default-brand ассеты и локали в `docs-site/public/demo/runtime/`; +- копирует 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-сайтом. @@ -19,10 +28,3 @@ ## Почему это не попадает в 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) diff --git a/frontend/src/docsDemoEntry.js b/frontend/src/docsDemoEntry.js index 8bbb683..d759c34 100644 --- a/frontend/src/docsDemoEntry.js +++ b/frontend/src/docsDemoEntry.js @@ -8,6 +8,7 @@ import "./styles.css"; const RUNTIME_BASE = "/demo/runtime"; const DEFAULT_FAVICON_DIGEST = "19b2a242e5b7bc2d"; +const DEMO_HOME_LOGO_SCALE = 68; function runtimePath(path) { return `${RUNTIME_BASE}/${String(path || "").replace(/^\/+/, "")}`; @@ -24,35 +25,76 @@ function copyThemeAssets(catalog) { } } +function applyDemoThemeTokens(catalog) { + const themes = catalog?.themes || []; + for (const theme of themes) { + theme.tokens = theme.tokens || {}; + const currentScale = Number(theme.tokens.home_logo_scale); + if (!Number.isFinite(currentScale) || currentScale > DEMO_HOME_LOGO_SCALE) { + theme.tokens.home_logo_scale = DEMO_HOME_LOGO_SCALE; + } + } +} + +async function loadInstallGuidesConfig() { + const response = await fetch(runtimePath("subscription-guides-config.json"), { + cache: "no-store", + }); + if (!response.ok) { + throw new Error(`demo_install_guides_config_load_failed:${response.status}`); + } + const config = await response.json(); + DEV_MOCK.data.settings.subscription_guides_enabled = true; + DEV_MOCK.data.subscription_guides = { + ...DEV_MOCK.data.subscription_guides, + enabled: true, + config, + }; +} + function prepareMockConfig() { const logoUrl = runtimePath("default-brand/default-logo.webp"); const faviconUrl = runtimePath(`default-brand/favicons/${DEFAULT_FAVICON_DIGEST}/icon-180.png`); DEV_MOCK.config.logoUrl = logoUrl; DEV_MOCK.config.faviconUrl = faviconUrl; + DEV_MOCK.config.languages = (DEV_MOCK.config.languages || []).filter( + (item) => item?.code !== "uk" + ); DEV_MOCK.config.adminJsAsset = runtimePath("subscription_webapp_admin.js"); DEV_MOCK.config.adminCssAsset = runtimePath("subscription_webapp_admin.css"); DEV_MOCK.config.apiBase = "/api"; + applyDemoThemeTokens(DEV_MOCK.config.themesCatalog); + applyDemoThemeTokens(DEV_MOCK.data.themes_catalog); copyThemeAssets(DEV_MOCK.config.themesCatalog); copyThemeAssets(DEV_MOCK.data.themes_catalog); } -const params = new URLSearchParams(window.location.search); -applyPreviewMock(params.get("mock")); -prepareMockConfig(); +async function bootstrap() { + const params = new URLSearchParams(window.location.search); + applyPreviewMock(params.get("mock")); + prepareMockConfig(); + try { + await loadInstallGuidesConfig(); + } catch (error) { + console.warn(error); + } -const target = document.getElementById("app"); -if (target) { - target.replaceChildren(); - mount(App, { - target, - props: { - mockRuntime: { - source: DEV_MOCK, - applyPreviewMock: () => {}, - mockApi, - PreviewBoard, - docsDemo: true, + const target = document.getElementById("app"); + if (target) { + target.replaceChildren(); + mount(App, { + target, + props: { + mockRuntime: { + source: DEV_MOCK, + applyPreviewMock: () => {}, + mockApi, + PreviewBoard, + docsDemo: true, + }, }, - }, - }); + }); + } } + +void bootstrap(); diff --git a/frontend/src/lib/webapp/previewMock.js b/frontend/src/lib/webapp/previewMock.js index 36484dd..bc8e5a1 100644 --- a/frontend/src/lib/webapp/previewMock.js +++ b/frontend/src/lib/webapp/previewMock.js @@ -224,7 +224,6 @@ export const DEV_MOCK = { languages: [ { code: "ru", label: "Русский", flag: "🇷🇺", base: true }, { code: "en", label: "English", flag: "🇬🇧", base: true }, - { code: "uk", label: "Українська", flag: "🇺🇦", base: false }, ], emailAuthEnabled: true, telegramLoginBotUsername: "preview_bot",