🐛 fix: Fix demo

example/.dumirc.ts

@@ -27,7 +27,7 @@ const themeConfig = {
     type: 'doc',
   },
   description: 'Lobe UI is an open-source UI component library for building chatbot web apps',
-  footer: 'Made with 🤯 by LobeHub',
+  footer: 'Made with 🤯 by <a href="https://lobehub.com" target="_blank">LobeHub</a>',
   giscus: {
     category: 'Q&A',
     categoryId: 'DIC_kwDOJloKoM4CXsCu',
@@ -53,7 +53,7 @@ export default defineConfig({
   define: {
     'process.env': process.env,
   },
-  favicons: ['https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon.ico'],
+  favicons: ['https://lobehub.com/favicon.ico'],
   locales: [{ id: 'en-US', name: 'English' }],
   mfsu: isWin ? undefined : {},
   npmClient: 'pnpm',

src/builtins/Previewer/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@lobehub/ui';
 import { IPreviewerProps } from 'dumi/dist/client/theme-api/types';
 import Previewer from 'dumi/theme-default/builtins/Previewer';
 
@@ -13,16 +14,18 @@ export default ({ center, codePlacement, nopadding, pure, ...props }: PreviewerP
   const { styles, cx } = useStyles(pure);
 
   return (
-    <div
-      className={cx(
-        styles.container,
-        pure && styles.pure,
-        center && styles.center,
-        nopadding && styles.nopadding,
-        styles[codePlacement as 'left' | 'right' | 'top'],
-      )}
-    >
-      <Previewer {...props} />
-    </div>
+    <Typography fontSize={14} headerMultiple={0.25} marginMultiple={0}>
+      <div
+        className={cx(
+          styles.container,
+          pure && styles.pure,
+          center && styles.center,
+          nopadding && styles.nopadding,
+          styles[codePlacement as 'left' | 'right' | 'top'],
+        )}
+      >
+        <Previewer {...props} />
+      </div>
+    </Typography>
   );
 };

src/components/Analytics/Clarity.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+
+const MicrosoftClarity = memo<{ projectId: string }>(({ projectId }) => {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${projectId}");
+                `,
+      }}
+      id="microsoft-clarity-init"
+    />
+  );
+});
+
+export default MicrosoftClarity;

src/components/Analytics/GoogleAnalytics.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+const GoogleAnalytics = memo<{ measurementId: string }>(({ measurementId }) => {
+  return (
+    <>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`} />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '${measurementId}');
+`,
+        }}
+        id="google-analytics"
+        type="text/javascript"
+      />
+    </>
+  );
+});
+
+export default GoogleAnalytics;

src/components/Analytics/Plausible.tsx

@@ -0,0 +1,9 @@
+import { memo } from 'react';
+
+const PlausibleAnalytics = memo<{ domain: string; scriptBaseUrl: string }>(
+  ({ domain, scriptBaseUrl }) => (
+    <script data-domain={domain} defer src={`${scriptBaseUrl}/js/script.js`} />
+  ),
+);
+
+export default PlausibleAnalytics;

src/components/Analytics/index.tsx

@@ -0,0 +1,25 @@
+import { siteSelectors, useSiteStore } from '@/store';
+
+import ClarityAnalytics from './Clarity';
+import GoogleAnalytics from './GoogleAnalytics';
+import Plausible from './Plausible';
+
+const Analytics = () => {
+  const analytics = useSiteStore(siteSelectors.analytics);
+  return (
+    <>
+      {analytics?.googleAnalytics && (
+        <GoogleAnalytics measurementId={analytics.googleAnalytics.measurementId} />
+      )}
+      {analytics?.clarity && <ClarityAnalytics projectId={analytics.clarity.projectId} />}
+      {analytics?.plausible && (
+        <Plausible
+          domain={analytics.plausible.domain}
+          scriptBaseUrl={analytics.plausible.scriptBaseUrl}
+        />
+      )}
+    </>
+  );
+};
+
+export default Analytics;

src/components/StoreUpdater/index.tsx

@@ -73,6 +73,7 @@ export const StoreUpdater = memo(() => {
 
   useRouteMeta();
 
+  // @ts-ignore
   useSyncState('siteData', siteData, () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { setLoading, ...data } = siteData;
@@ -83,6 +84,7 @@ export const StoreUpdater = memo(() => {
 
     if (isEqual(data, prevData)) return;
 
+    // @ts-ignore
     storeApi.setState({ siteData });
   });
 

src/layouts/DemoLayout/GlobalStyle.ts

@@ -0,0 +1,23 @@
+import { createGlobalStyle } from 'antd-style';
+
+const GlobalStyle = createGlobalStyle`
+  #root {
+    min-height: 100vh;
+  }
+
+  #nprogress {
+    .bar {
+      background: ${({ theme }) => theme.colorText};
+    }
+
+    .peg {
+      display: none !important;
+    }
+
+    .spinner {
+      display: none;
+    }
+  }
+`;
+
+export default GlobalStyle;

src/layouts/DemoLayout/index.tsx

@@ -1,19 +1,54 @@
+import { useLocation } from '@@/exports';
 import { ThemeProvider } from '@lobehub/ui';
-import { useOutlet } from 'dumi';
+import {
+  useLocale,
+  useNavData,
+  useOutlet,
+  useRouteMeta,
+  useSidebarData,
+  useSiteData,
+  useTabMeta,
+} from 'dumi';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
-import Favicons from '@/components/Favicons';
-import { useThemeStore } from '@/store';
+import Analytics from '@/components/Analytics';
+import { Provider, createStore, useThemeStore } from '@/store';
 
-export default memo(() => {
+import Favicons from '../DocLayout/Head/Favicons';
+import Og from '../DocLayout/Head/Og';
+import GlobalStyle from './GlobalStyle';
+
+const App = memo(({ initState }: any) => {
   const themeMode = useThemeStore((st) => st.themeMode, isEqual);
   const outlet = useOutlet();
 
   return (
-    <>
+    <Provider createStore={() => createStore(initState)}>
       <Favicons />
-      <ThemeProvider themeMode={themeMode}>{outlet}</ThemeProvider>
-    </>
+      <Og />
+      <Analytics />
+      <ThemeProvider themeMode={themeMode}>
+        <GlobalStyle />
+        {outlet}
+      </ThemeProvider>
+    </Provider>
+  );
+});
+
+export default memo(() => {
+  const siteData = useSiteData();
+  const sidebar = useSidebarData();
+  const routeMeta = useRouteMeta();
+  const tabMeta = useTabMeta();
+  const navData = useNavData();
+  const location = useLocation();
+  const locale = useLocale();
+
+  const initState = useMemo(
+    () => ({ locale, location, navData, routeMeta, sidebar, siteData, tabMeta }),
+    [],
   );
+
+  return <App initState={initState} />;
 });

src/layouts/DocLayout/DocumentLayout.tsx

@@ -11,7 +11,7 @@ import Footer from '@/slots/Footer';
 import Header from '@/slots/Header';
 import Sidebar from '@/slots/Sidebar';
 import Toc from '@/slots/Toc';
-import { isHeroPageSel, siteTitleSel, tocAnchorItemSel, useSiteStore } from '@/store';
+import { heroSelectors, siteSelectors, useSiteStore } from '@/store';
 
 const DocumentLayout = memo(() => {
   const intl = useIntl();
@@ -21,7 +21,7 @@ const DocumentLayout = memo(() => {
 
   const { loading, page, siteTitle, noToc } = useSiteStore((s) => {
     const isChanlogPage = s.location.pathname === '/changelog';
-    const isHomePage = isHeroPageSel(s);
+    const isHomePage = heroSelectors.isHeroPage(s);
     let page;
 
     if (isHomePage) {
@@ -34,9 +34,9 @@ const DocumentLayout = memo(() => {
 
     return {
       loading: s.siteData.loading,
-      noToc: tocAnchorItemSel(s).length === 0,
+      noToc: siteSelectors.tocAnchorItem(s).length === 0,
       page: page,
-      siteTitle: siteTitleSel(s),
+      siteTitle: siteSelectors.siteTitle(s),
     };
   });
 

src/layouts/DocLayout/GlobalStyle.ts

@@ -1,24 +1,23 @@
 import { createGlobalStyle } from 'antd-style';
 
 const GlobalStyle = createGlobalStyle`
-
-#nprogress {
-  .bar {
-    background: ${({ theme }) => theme.colorText};
-  }
-	
-  .peg {
-	  display: none !important;
-  }
-
-  .spinner {
-    display: none;
+  #root {
+    min-height: 100vh;
   }
-}
-
 
+  #nprogress {
+    .bar {
+      background: ${({ theme }) => theme.colorText};
+    }
 
+    .peg {
+      display: none !important;
+    }
 
+    .spinner {
+      display: none;
+    }
+  }
 `;
 
 export default GlobalStyle;

src/layouts/DocLayout/Head/Favicons.tsx

@@ -0,0 +1,24 @@
+import { Helmet } from 'dumi';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { siteSelectors, useSiteStore } from '@/store';
+
+const Favicons = memo(() => {
+  const [title, logo] = useSiteStore((s) => [siteSelectors.siteTitle(s), siteSelectors.logo(s)]);
+  const metadata = useSiteStore(siteSelectors.metadata, isEqual);
+  return (
+    <Helmet>
+      <link href={metadata?.icons?.apple || logo} rel="apple-touch-icon" sizes="180x180" />
+      <link href={metadata?.icons?.shortcut || logo} rel="icon" sizes="32x32" type="image/png" />
+      <link href={metadata?.icons?.shortcut || logo} rel="shortcut icon" type="image/x-icon" />
+      {metadata?.manifest && <link href={metadata?.manifest} rel="manifest" />}
+      <meta content={title} name="apple-mobile-web-app-title" />
+      <meta content={title} name="application-name" />
+      <meta content="#f8f8f8" media="(prefers-color-scheme: light)" name="theme-color" />
+      <meta content="#000" media="(prefers-color-scheme: dark)" name="theme-color" />
+    </Helmet>
+  );
+});
+
+export default Favicons;