@4399ywkf/cli 0.0.21 → 1.0.2

package/dist/templates/gold.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const gold: ColorScaleItem = {
+  dark: [
+    '#070300',
+    '#2a1b00',
+    '#483000',
+    '#6a4900',
+    '#916400',
+    '#b77e00',
+    '#d59300',
+    '#eaa100',
+    '#f8aa00',
+    '#ffb224',
+    '#ffdcaf',
+    '#fff4eb',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(233, 100, 0, 0.03)',
+    'rgba(247, 159, 0, 0.17)',
+    'rgba(248, 166, 0, 0.29)',
+    'rgba(252, 174, 0, 0.42)',
+    'rgba(254, 175, 0, 0.57)',
+    'rgba(254, 175, 0, 0.72)',
+    'rgba(254, 175, 0, 0.84)',
+    'rgba(254, 175, 0, 0.92)',
+    'rgba(253, 173, 0, 0.98)',
+    '#ffb224',
+    '#ffdcaf',
+    '#fff4eb',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#fffdff',
+    '#fff9f7',
+    '#fff4eb',
+    '#ffeedc',
+    '#ffe6c8',
+    '#ffdcaf',
+    '#ffd190',
+    '#ffc368',
+    '#ee9e0b',
+    '#d59300',
+    '#6a4900',
+    '#070300',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(255,145,55,0.04)',
+    'rgba(255,155,55,0.08)',
+    'rgba(255, 117, 5, 0.16)',
+    'rgba(255, 134, 5, 0.20)',
+    'rgba(255, 141, 5, 0.26)',
+    'rgba(255, 146, 5, 0.32)',
+    'rgba(255, 150, 3, 0.44)',
+    'rgba(255, 155, 3, 0.6)',
+    'rgba(255, 165, 0, 0.86)',
+    '#d59300',
+    '#6a4900',
+    '#070300',
+  ],
+};
+
+export default gold;

package/dist/templates/gray.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const gray: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#0d0d0d',
+    '#1a1a1a',
+    '#202020',
+    '#2d2d2d',
+    '#444444',
+    '#555555',
+    '#666666',
+    '#6f6f6f',
+    '#777777',
+    '#aaaaaa',
+    '#dddddd',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(255, 255, 255, 0.06)',
+    'rgba(255, 255, 255, 0.10)',
+    'rgba(255, 255, 255, 0.16)',
+    'rgba(255, 255, 255, 0.24)',
+    'rgba(255, 255, 255, 0.28)',
+    'rgba(255, 255, 255, 0.32)',
+    'rgba(255, 255, 255, 0.38)',
+    'rgba(255, 255, 255, 0.44)',
+    'rgba(255, 255, 255, 0.5)',
+    'rgba(255, 255, 255, 0.66)',
+    'rgba(255, 255, 255, 0.84)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f8f8f8',
+    '#eeeeee',
+    '#e3e3e3',
+    '#dddddd',
+    '#cccccc',
+    '#bbbbbb',
+    '#aaaaaa',
+    '#999999',
+    '#888888',
+    '#666666',
+    '#333333',
+    '#080808',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(0, 0, 0, 0.03)',
+    'rgba(0, 0, 0, 0.06)',
+    'rgba(0, 0, 0, 0.12)',
+    'rgba(0, 0, 0, 0.18)',
+    'rgba(0, 0, 0, 0.24)',
+    'rgba(0, 0, 0, 0.32)',
+    'rgba(0, 0, 0, 0.38)',
+    'rgba(0, 0, 0, 0.44)',
+    'rgba(0, 0, 0, 0.5)',
+    'rgba(0, 0, 0, 0.68)',
+    'rgba(0, 0, 0, 0.84)',
+    'rgba(0, 0, 0, 0.98)',
+  ],
+};
+
+export default gray;

package/dist/templates/green.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const green: ColorScaleItem = {
+  dark: [
+    '#000503',
+    '#001d12',
+    '#002d1d',
+    '#003f28',
+    '#005232',
+    '#00653c',
+    '#007944',
+    '#1b8d4d',
+    '#3ba05a',
+    '#62c473',
+    '#96cd92',
+    '#cde6c3',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 250, 150, 0.02)',
+    'rgba(0, 242, 150, 0.12)',
+    'rgba(0, 250, 161, 0.18)',
+    'rgba(0, 252, 160, 0.25)',
+    'rgba(0, 248, 152, 0.33)',
+    'rgba(0, 252, 150, 0.4)',
+    'rgba(0, 252, 142, 0.48)',
+    'rgba(48, 252, 137, 0.56)',
+    'rgba(94, 254, 143, 0.63)',
+    'rgba(120, 254, 145, 0.71)',
+    'rgba(185, 253, 180, 0.81)',
+    'rgba(225, 253, 214, 0.91)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f4fdeb',
+    '#e7f8dd',
+    '#d8f2ce',
+    '#c7eabd',
+    '#b4e1ac',
+    '#a0d79b',
+    '#89cc8a',
+    '#71c179',
+    '#379d4a',
+    '#007944',
+    '#003f28',
+    '#000503',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(117, 230, 5, 0.06)',
+    'rgba(84, 205, 12, 0.10)',
+    'rgba(60, 190, 10, 0.14)',
+    'rgba(40, 174, 1, 0.26)',
+    'rgba(28, 164, 3, 0.33)',
+    'rgba(18, 155, 5, 0.4)',
+    'rgba(4, 146, 6, 0.47)',
+    'rgba(1, 144, 16, 0.56)',
+    'rgba(1, 143, 28, 0.67)',
+    '#007944',
+    '#003f28',
+    '#000503',
+  ],
+};
+
+export default green;

package/dist/templates/highlighter.ts

@@ -0,0 +1,34 @@
+
+import { ReactNode, type Ref } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+
+import { DivProps } from '@/types';
+
+export interface SyntaxHighlighterProps extends DivProps {
+  animated?: boolean;
+  children: string;
+  enableTransformer?: HighlighterProps['enableTransformer'];
+  language: HighlighterProps['language'];
+  ref?: Ref<HTMLDivElement>;
+  theme?: HighlighterProps['theme'];
+  variant?: HighlighterProps['variant'];
+}
+
+export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'> {
+  allowChangeLanguage?: boolean;
+  animated?: boolean;
+  bodyRender?: (props: { content: string; language: string; originalNode: ReactNode }) => ReactNode;
+  children: string;
+  copyable?: boolean;
+  defaultExpand?: boolean;
+  enableTransformer?: boolean;
+  fileName?: string;
+  fullFeatured?: boolean;
+  icon?: ReactNode;
+  language: string;
+  shadow?: boolean;
+  showLanguage?: boolean;
+  theme?: 'lobe-theme';
+  variant?: 'filled' | 'outlined' | 'borderless';
+  wrap?: boolean;
+}

package/dist/templates/hooks/useRouteTitle.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useLocation, matchRoutes } from 'react-router';
+import { useAppData } from '@config/router/appContext';
+
+const APP_NAME = process.env.APP_NAME!;
+
+export const useRouteTitle = () => {
+  const location = useLocation();
+  const { routes } = useAppData();
+
+  useEffect(() => {
+    // 将路由配置转换为适合 matchRoutes 的格式
+    const routesList = Object.keys(routes).map((key) => {
+      const route = routes[key];
+      return {
+        path: route.absPath,
+        meta: route.props,
+        id: key,
+      };
+    });
+    // 匹配当前路径的路由
+    const matchedRoutes = matchRoutes(routesList, location);
+
+    if (matchedRoutes && matchedRoutes.length > 0) {
+      // 找到最后一个匹配的路由（叶子路由）
+      const leafRoute = matchedRoutes[matchedRoutes.length - 1];
+      const title = leafRoute.route.meta?.title;
+
+      if (title) {
+        document.title = title;
+      } else {
+        document.title = APP_NAME;
+      }
+    }
+  }, [location.pathname, routes]);
+};

package/dist/templates/hooks/useSentry.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
+import { sentryPerformance, sentryContext, sentryError, sentrySession } from '@/utils/sentry';
+
+// 页面性能监控 Hook
+export const useSentryPageTracking = (pageName: string) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // ✨ 记录页面访问（保持会话活跃）
+    sentrySession.recordPageView(pageName, `${location.pathname}${location.search}`);
+
+    const cleanup = sentryPerformance.withSpan(`Page: ${pageName}`, 'navigation', () => {
+      sentryContext.setContext('page', {
+        name: pageName,
+        path: location.pathname,
+        search: location.search,
+      });
+
+      sentryPerformance.addBreadcrumb(`Navigation to ${pageName}`, 'navigation', 'info');
+
+      return () => {
+        // 清理函数
+      };
+    });
+
+    return cleanup;
+  }, [pageName, location]);
+};
+
+// 组件性能监控 Hook
+export const useSentryComponentTracking = (componentName: string) => {
+  useEffect(() => {
+    return sentryPerformance.withSpan(`Component: ${componentName}`, 'ui.react.mount', () => {
+      sentryPerformance.addBreadcrumb(`Component ${componentName} mounted`, 'ui', 'info');
+
+      return () => {
+        sentryPerformance.addBreadcrumb(`Component ${componentName} unmounted`, 'ui', 'info');
+      };
+    });
+  }, [componentName]);
+};
+
+// 错误处理 Hook
+export const useSentryErrorHandler = () => {
+  return {
+    captureError: (error: Error, context?: Record<string, any>) => {
+      sentryError.captureException(error, context);
+    },
+    captureMessage: (message: string, level?: 'info' | 'warning' | 'error') => {
+      sentryError.captureMessage(message, level);
+    },
+  };
+};
+
+// 点击事件追踪 Hook
+export const useSentryClickTracking = () => {
+  return {
+    trackClick: (
+      buttonName: string,
+      context?: {
+        buttonId?: string;
+        location?: string;
+        extraData?: Record<string, any>;
+      },
+    ) => {
+      const clickData = {
+        buttonName,
+        buttonId: context?.buttonId,
+        location: context?.location || window.location.pathname,
+        clickTime: new Date().toISOString(),
+        timestamp: Date.now(),
+        ...context?.extraData,
+      };
+
+      // ✨ 主动发送点击事件到 Sentry（这会立即发送）
+      sentryError.captureMessage(`Button Click: ${buttonName}`, 'info');
+
+      // 设置点击上下文（会包含在上面的消息中）
+      sentryContext.setContext('clickData', clickData);
+
+      // 记录用户操作（用于埋点统计）
+      sentrySession.recordUserAction(`Button Click: ${buttonName}`, clickData);
+
+      // 添加面包屑用于调试
+      sentryPerformance.addBreadcrumb(`Button clicked: ${buttonName}`, 'user.click', 'info');
+
+      // 设置点击上下文
+      sentryContext.setContext('lastClick', clickData);
+    },
+  };
+};

package/dist/templates/index.css

@@ -0,0 +1,282 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.module__app {
+  height: calc(100vh - 50px) !important;
+  position: relative;
+  width: 100%;
+  -webkit-box-pack: start;
+  place-content: flex-start;
+  align-items: flex-start;
+  -webkit-font-smoothing: antialiased;
+  overflow: auto;
+}
+
+:root {
+  --red-1: 255, 236, 232;
+  --red-2: 253, 205, 197;
+  --red-3: 251, 172, 163;
+  --red-4: 249, 137, 129;
+  --red-5: 247, 101, 96;
+  --red-6: 245, 63, 63;
+  --red-7: 203, 39, 45;
+  --red-8: 161, 21, 30;
+  --red-9: 119, 8, 19;
+  --red-10: 77, 0, 10;
+  --orangered-1: 255, 243, 232;
+  --orangered-2: 253, 221, 195;
+  --orangered-3: 252, 197, 159;
+  --orangered-4: 250, 172, 123;
+  --orangered-5: 249, 144, 87;
+  --orangered-6: 247, 114, 52;
+  --orangered-7: 204, 81, 32;
+  --orangered-8: 162, 53, 17;
+  --orangered-9: 119, 31, 6;
+  --orangered-10: 77, 14, 0;
+  --orange-1: 255, 247, 232;
+  --orange-2: 255, 228, 186;
+  --orange-3: 255, 207, 139;
+  --orange-4: 255, 182, 93;
+  --orange-5: 255, 154, 46;
+  --orange-6: 255, 125, 0;
+  --orange-7: 210, 95, 0;
+  --orange-8: 166, 69, 0;
+  --orange-9: 121, 46, 0;
+  --orange-10: 77, 27, 0;
+  --gold-1: 255, 252, 232;
+  --gold-2: 253, 244, 191;
+  --gold-3: 252, 233, 150;
+  --gold-4: 250, 220, 109;
+  --gold-5: 249, 204, 69;
+  --gold-6: 247, 186, 30;
+  --gold-7: 204, 146, 19;
+  --gold-8: 162, 109, 10;
+  --gold-9: 119, 75, 4;
+  --gold-10: 77, 45, 0;
+  --yellow-1: 254, 255, 232;
+  --yellow-2: 254, 254, 190;
+  --yellow-3: 253, 250, 148;
+  --yellow-4: 252, 242, 107;
+  --yellow-5: 251, 232, 66;
+  --yellow-6: 250, 220, 25;
+  --yellow-7: 207, 175, 15;
+  --yellow-8: 163, 132, 8;
+  --yellow-9: 120, 93, 3;
+  --yellow-10: 77, 56, 0;
+  --lime-1: 252, 255, 232;
+  --lime-2: 237, 248, 187;
+  --lime-3: 220, 241, 144;
+  --lime-4: 201, 233, 104;
+  --lime-5: 181, 226, 65;
+  --lime-6: 159, 219, 29;
+  --lime-7: 126, 183, 18;
+  --lime-8: 95, 148, 10;
+  --lime-9: 67, 112, 4;
+  --lime-10: 42, 77, 0;
+  --green-1: 232, 255, 234;
+  --green-2: 175, 240, 181;
+  --green-3: 123, 225, 136;
+  --green-4: 76, 210, 99;
+  --green-5: 35, 195, 67;
+  --green-6: 0, 180, 42;
+  --green-7: 0, 154, 41;
+  --green-8: 0, 128, 38;
+  --green-9: 0, 102, 34;
+  --green-10: 0, 77, 28;
+  --cyan-1: 232, 255, 251;
+  --cyan-2: 183, 244, 236;
+  --cyan-3: 137, 233, 224;
+  --cyan-4: 94, 223, 214;
+  --cyan-5: 55, 212, 207;
+  --cyan-6: 20, 201, 201;
+  --cyan-7: 13, 165, 170;
+  --cyan-8: 7, 130, 139;
+  --cyan-9: 3, 97, 108;
+  --cyan-10: 0, 66, 77;
+  --blue-1: 232, 247, 255;
+  --blue-2: 195, 231, 254;
+  --blue-3: 159, 212, 253;
+  --blue-4: 123, 192, 252;
+  --blue-5: 87, 169, 251;
+  --blue-6: 52, 145, 250;
+  --blue-7: 32, 108, 207;
+  --blue-8: 17, 75, 163;
+  --blue-9: 6, 48, 120;
+  --blue-10: 0, 26, 77;
+  --arcoblue-1: 232, 243, 255;
+  --arcoblue-2: 190, 218, 255;
+  --arcoblue-3: 148, 191, 255;
+  --arcoblue-4: 106, 161, 255;
+  --arcoblue-5: 64, 128, 255;
+  --arcoblue-6: 22, 93, 255;
+  --arcoblue-7: 14, 66, 210;
+  --arcoblue-8: 7, 44, 166;
+  --arcoblue-9: 3, 26, 121;
+  --arcoblue-10: 0, 13, 77;
+  --purple-1: 245, 232, 255;
+  --purple-2: 221, 190, 246;
+  --purple-3: 195, 150, 237;
+  --purple-4: 168, 113, 227;
+  --purple-5: 141, 78, 218;
+  --purple-6: 114, 46, 209;
+  --purple-7: 85, 29, 176;
+  --purple-8: 60, 16, 143;
+  --purple-9: 39, 6, 110;
+  --purple-10: 22, 0, 77;
+  --pinkpurple-1: 255, 232, 251;
+  --pinkpurple-2: 247, 186, 239;
+  --pinkpurple-3: 240, 142, 230;
+  --pinkpurple-4: 232, 101, 223;
+  --pinkpurple-5: 225, 62, 219;
+  --pinkpurple-6: 217, 26, 217;
+  --pinkpurple-7: 176, 16, 182;
+  --pinkpurple-8: 138, 9, 147;
+  --pinkpurple-9: 101, 3, 112;
+  --pinkpurple-10: 66, 0, 77;
+  --magenta-1: 255, 232, 241;
+  --magenta-2: 253, 194, 219;
+  --magenta-3: 251, 157, 199;
+  --magenta-4: 249, 121, 183;
+  --magenta-5: 247, 84, 168;
+  --magenta-6: 245, 49, 157;
+  --magenta-7: 203, 30, 131;
+  --magenta-8: 161, 16, 105;
+  --magenta-9: 119, 6, 79;
+  --magenta-10: 77, 0, 52;
+  --gray-1: 247, 248, 250;
+  --gray-2: 242, 243, 245;
+  --gray-4: 201, 205, 212;
+  --gray-5: 169, 174, 184;
+  --gray-6: 134, 144, 156;
+  --gray-7: 107, 119, 133;
+  --gray-8: 78, 89, 105;
+  --gray-9: 39, 46, 59;
+  --gray-10: 29, 33, 41;
+  --data-2: var(--arcoblue-2);
+  --data-3: 85, 197, 253;
+  --data-4: 156, 220, 252;
+  --data-8: var(--green-2);
+  --data-10: var(--purple-2);
+  --success-1: var(--green-1);
+  --success-2: var(--green-2);
+  --success-3: var(--green-3);
+  --success-4: var(--green-4);
+  --success-5: var(--green-5);
+  --success-6: var(--green-6);
+  --success-7: var(--green-7);
+  --success-8: var(--green-8);
+  --success-9: var(--green-9);
+  --success-10: var(--green-10);
+  --primary-1: var(--arcoblue-1);
+  --primary-2: var(--arcoblue-2);
+  --primary-3: var(--arcoblue-3);
+  --primary-4: var(--arcoblue-4);
+  --primary-5: var(--arcoblue-5);
+  --primary-6: var(--arcoblue-6);
+  --primary-7: var(--arcoblue-7);
+  --primary-8: var(--arcoblue-8);
+  --primary-9: var(--arcoblue-9);
+  --primary-10: var(--arcoblue-10);
+  --danger-1: var(--red-1);
+  --danger-2: var(--red-2);
+  --danger-3: var(--red-3);
+  --danger-4: var(--red-4);
+  --danger-5: var(--red-5);
+  --danger-6: var(--red-6);
+  --danger-7: var(--red-7);
+  --danger-8: var(--red-8);
+  --danger-9: var(--red-9);
+  --danger-10: var(--red-10);
+  --warning-1: var(--orange-1);
+  --warning-2: var(--orange-2);
+  --warning-3: var(--orange-3);
+  --warning-4: var(--orange-4);
+  --warning-5: var(--orange-5);
+  --warning-6: var(--orange-6);
+  --warning-7: var(--orange-7);
+  --warning-8: var(--orange-8);
+  --warning-9: var(--orange-9);
+  --warning-10: var(--orange-10);
+  --link-1: var(--arcoblue-1);
+  --link-2: var(--arcoblue-2);
+  --link-3: var(--arcoblue-3);
+  --link-4: var(--arcoblue-4);
+  --link-5: var(--arcoblue-5);
+  --link-6: var(--arcoblue-6);
+  --link-7: var(--arcoblue-7);
+  --link-8: var(--arcoblue-8);
+  --link-9: var(--arcoblue-9);
+  --link-10: var(--arcoblue-10);
+  --data-1: var(--arcoblue-5);
+  --data-5: var(--orange-6);
+  --data-6: var(--orange-3);
+  --data-7: var(--green-4);
+  --data-9: var(--purple-4);
+  --data-11: var(--gold-6);
+  --data-12: var(--gold-4);
+  --data-13: var(--lime-6);
+  --data-14: var(--lime-4);
+  --data-15: var(--magenta-4);
+  --data-16: var(--magenta-3);
+  --data-17: var(--cyan-6);
+  --data-18: var(--cyan-3);
+  --data-19: var(--pinkpurple-4);
+  --data-20: var(--pinkpurple-2);
+  --container--layout--padding: 20px 32px;
+  --border-radius-medium: 4px;
+  --color-border-3: #dde2e9;
+  --primary-5: 66, 129, 255;
+  --color-text-1: rgb(29, 33, 41);
+  --color-fill-2: rgb(242, 243, 245);
+  --gray-3: 229, 230, 235;
+  --color-neutral-3: rgb(var(--gray-3));
+  --container--form--layout--header-height: 64px;
+  --contexify-zIndex: 666 !important;
+  --contexify-menu-minWidth: 220px !important;
+  --contexify-menu-padding: 6px !important;
+  --contexify-menu-radius: var(--border-radius-medium) !important;
+  --contexify-menu-bgColor: #fff !important;
+  --contexify-menu-shadow: 0 4px 10px rgba(0, 0, 0, .1) !important;
+  --contexify-menu-negatePadding: var(--contexify-menu-padding) !important;
+  --contexify-separator-color: rgba(0, 0, 0, .2) !important;
+  --contexify-separator-margin: 5px !important;
+  --contexify-itemContent-padding: 6px !important;
+  --contexify-activeItem-radius: 4px !important;
+  --contexify-item-color: #333 !important;
+  --contexify-activeItem-color: var(--color-text-1) !important;
+  --contexify-activeItem-bgColor: var(--color-fill-2) !important;
+  --contexify-rightSlot-color: #6f6e77 !important;
+  --contexify-activeRightSlot-color: #fff !important;
+  --contexify-arrow-color: #6f6e77 !important;
+  --contexify-activeArrow-color: #fff !important
+}

package/dist/templates/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html style="height: 100%">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,user-scalable=no"
+    />
+    <title><%= title %></title>
+  </head>
+  <body style="height: 100%">
+    <!--[if lt IE 9]>
+      <p class="browsehappy">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+    <div id="<%= mountRoot %>" style="height: 100%; width: 100%"></div>
+    <div id="notificationContainer"></div>
+    <script>
+      function push(subapp) {
+        history.pushState(null, subapp, subapp);
+      }
+    </script>
+  </body>
+</html>