docs: refine static demo experience

2026-05-28 00:55:11 +03:00
parent 2b8bcd10b8
commit 62e950f5c4
6 changed files with 87 additions and 42 deletions
@@ -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();