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

docs: refine static demo experience

Browse Source
This commit is contained in:
3252a8
2026-05-28 00:55:11 +03:00
parent 2b8bcd10b8
commit 62e950f5c4
6 changed files with 87 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/scripts/build-demo-runtime.mjs
+18
View File
@@ -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 themesDir = path.join(repoRoot, 'backend', 'bot', 'app', 'web', 'themes');
const localesDir = path.join(repoRoot, 'locales'); const localesDir = path.join(repoRoot, 'locales');
const runtimeBase = '/demo/runtime'; 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 isWindows = process.platform === 'win32';
const npmExecPath = process.env.npm_execpath || ''; const npmExecPath = process.env.npm_execpath || '';
@@ -102,6 +104,19 @@ async function demoI18nPayload() {
return jsonScriptPayload({ ru: JSON.parse(ru), en: JSON.parse(en) }); 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() { async function appHtml() {
const i18n = await demoI18nPayload(); const i18n = await demoI18nPayload();
return `<!doctype html> return `<!doctype html>
@@ -144,6 +159,9 @@ await Promise.all([
copyDirectory(path.join(templatesDir, 'default-brand'), path.join(runtimeDir, 'default-brand')), copyDirectory(path.join(templatesDir, 'default-brand'), path.join(runtimeDir, 'default-brand')),
copyDirectory(themesDir, path.join(runtimeDir, 'themes'), copyThemeFile), copyDirectory(themesDir, path.join(runtimeDir, 'themes'), copyThemeFile),
writeFile(path.join(runtimeDir, 'app.html'), html, 'utf8'), 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)}`); console.log(`Built static docs demo runtime at ${path.relative(repoRoot, runtimeDir)}`);
docs-site/src/components/Header.astro
-5
View File
@@ -52,9 +52,6 @@ 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">
@@ -74,14 +71,12 @@ function isDemoHref(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}
> >
docs-site/src/styles/custom.css
-11
View File
@@ -30,17 +30,6 @@
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);
docs/getting-started/demo.md
+10 -8
View File
@@ -4,6 +4,15 @@
[Открыть демо](/demo/) [Открыть демо](/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`. Скрипт: При сборке сайта документации запускается `docs-site/scripts/build-demo-runtime.mjs`. Скрипт:
@@ -11,7 +20,7 @@
- собирает отдельный frontend-бандл в Vite mode `docs-demo`; - собирает отдельный frontend-бандл в Vite mode `docs-demo`;
- использует entrypoint `frontend/src/docsDemoEntry.js`, где подключены моковые данные и mock API; - использует entrypoint `frontend/src/docsDemoEntry.js`, где подключены моковые данные и mock API;
- дополнительно собирает обычный admin-бандл, чтобы админка работала внутри демо; - дополнительно собирает обычный admin-бандл, чтобы админка работала внутри демо;
- копирует JS/CSS, темы, default-brand ассеты и локали в `docs-site/public/demo/runtime/`; - копирует JS/CSS, темы, default-brand ассеты, локали и конфиг гайдов подключения в `docs-site/public/demo/runtime/`;
- генерирует `app.html`, который грузит demo runtime и встроенные переводы. - генерирует `app.html`, который грузит demo runtime и встроенные переводы.
Папка `docs-site/public/demo/runtime/` не хранится в репозитории. Она создается на build step и попадает в итоговый `docs-site/dist/`, поэтому Cloudflare Pages публикует демо вместе с остальным docs-сайтом. Папка `docs-site/public/demo/runtime/` не хранится в репозитории. Она создается на build step и попадает в итоговый `docs-site/dist/`, поэтому Cloudflare Pages публикует демо вместе с остальным docs-сайтом.
@@ -19,10 +28,3 @@
## Почему это не попадает в production ## Почему это не попадает в production
Обычная production-сборка Mini App использует `frontend/src/main.js` и не импортирует `previewMock`, `mockApi` или demo entrypoint. Моковый runtime подключается только в Vite mode `docs-demo`, который вызывается из сборки документации. Обычная 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)
frontend/src/docsDemoEntry.js
+59 -17
View File
@@ -8,6 +8,7 @@ import "./styles.css";
const RUNTIME_BASE = "/demo/runtime"; const RUNTIME_BASE = "/demo/runtime";
const DEFAULT_FAVICON_DIGEST = "19b2a242e5b7bc2d"; const DEFAULT_FAVICON_DIGEST = "19b2a242e5b7bc2d";
const DEMO_HOME_LOGO_SCALE = 68;
function runtimePath(path) { function runtimePath(path) {
return `${RUNTIME_BASE}/${String(path || "").replace(/^\/+/, "")}`; 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() { function prepareMockConfig() {
const logoUrl = runtimePath("default-brand/default-logo.webp"); const logoUrl = runtimePath("default-brand/default-logo.webp");
const faviconUrl = runtimePath(`default-brand/favicons/${DEFAULT_FAVICON_DIGEST}/icon-180.png`); const faviconUrl = runtimePath(`default-brand/favicons/${DEFAULT_FAVICON_DIGEST}/icon-180.png`);
DEV_MOCK.config.logoUrl = logoUrl; DEV_MOCK.config.logoUrl = logoUrl;
DEV_MOCK.config.faviconUrl = faviconUrl; 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.adminJsAsset = runtimePath("subscription_webapp_admin.js");
DEV_MOCK.config.adminCssAsset = runtimePath("subscription_webapp_admin.css"); DEV_MOCK.config.adminCssAsset = runtimePath("subscription_webapp_admin.css");
DEV_MOCK.config.apiBase = "/api"; DEV_MOCK.config.apiBase = "/api";
applyDemoThemeTokens(DEV_MOCK.config.themesCatalog);
applyDemoThemeTokens(DEV_MOCK.data.themes_catalog);
copyThemeAssets(DEV_MOCK.config.themesCatalog); copyThemeAssets(DEV_MOCK.config.themesCatalog);
copyThemeAssets(DEV_MOCK.data.themes_catalog); copyThemeAssets(DEV_MOCK.data.themes_catalog);
} }
const params = new URLSearchParams(window.location.search); async function bootstrap() {
applyPreviewMock(params.get("mock")); const params = new URLSearchParams(window.location.search);
prepareMockConfig(); applyPreviewMock(params.get("mock"));
prepareMockConfig();
try {
await loadInstallGuidesConfig();
} catch (error) {
console.warn(error);
}
const target = document.getElementById("app"); const target = document.getElementById("app");
if (target) { if (target) {
target.replaceChildren(); target.replaceChildren();
mount(App, { mount(App, {
target, target,
props: { props: {
mockRuntime: { mockRuntime: {
source: DEV_MOCK, source: DEV_MOCK,
applyPreviewMock: () => {}, applyPreviewMock: () => {},
mockApi, mockApi,
PreviewBoard, PreviewBoard,
docsDemo: true, docsDemo: true,
},
}, },
}, });
}); }
} }
void bootstrap();
frontend/src/lib/webapp/previewMock.js
-1
View File
@@ -224,7 +224,6 @@ export const DEV_MOCK = {
languages: [ languages: [
{ code: "ru", label: "Русский", flag: "🇷🇺", base: true }, { code: "ru", label: "Русский", flag: "🇷🇺", base: true },
{ code: "en", label: "English", flag: "🇬🇧", base: true }, { code: "en", label: "English", flag: "🇬🇧", base: true },
{ code: "uk", label: "Українська", flag: "🇺🇦", base: false },
], ],
emailAuthEnabled: true, emailAuthEnabled: true,
telegramLoginBotUsername: "preview_bot", telegramLoginBotUsername: "preview_bot",