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 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 `<!doctype html>
@@ -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)}`);
docs-site/src/components/Header.astro
-5
View File
@@ -52,9 +52,6 @@ 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">
@@ -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 (
<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/styles/custom.css
-11
View File
@@ -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);
docs/getting-started/demo.md
+10 -8
View File
@@ -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)
frontend/src/docsDemoEntry.js
+59 -17
View File
@@ -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();
frontend/src/lib/webapp/previewMock.js
-1
View File
@@ -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",