From 69f53632922ea556d419db18853567a15844aed8 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Sun, 24 Nov 2024 16:13:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Fix=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/.dumirc.ts                           |   4 +-
 src/builtins/Previewer/index.tsx             |  25 +++--
 src/components/Analytics/Clarity.tsx         |  20 ++++
 src/components/Analytics/GoogleAnalytics.tsx |  24 +++++
 src/components/Analytics/Plausible.tsx       |   9 ++
 src/components/Analytics/index.tsx           |  25 +++++
 src/components/Favicons/index.tsx            |  41 --------
 src/components/StoreUpdater/index.tsx        |   2 +
 src/layouts/DemoLayout/GlobalStyle.ts        |  23 +++++
 src/layouts/DemoLayout/index.tsx             |  51 ++++++++--
 src/layouts/DocLayout/DocumentLayout.tsx     |   8 +-
 src/layouts/DocLayout/GlobalStyle.ts         |  27 +++--
 src/layouts/DocLayout/Head/Favicons.tsx      |  24 +++++
 src/layouts/DocLayout/Head/Og.tsx            |  45 +++++++++
 src/layouts/DocLayout/index.tsx              |   6 +-
 src/pages/Changelog/index.tsx                |   6 +-
 src/pages/Docs/index.tsx                     |   6 +-
 src/slots/ApiHeader/index.tsx                |   4 +-
 src/slots/Content/index.tsx                  |   4 +-
 src/slots/ContentFooter/index.tsx            |   4 +-
 src/slots/Features/index.tsx                 |   4 +-
 src/slots/Footer/index.tsx                   |   6 +-
 src/slots/Header/Burger.tsx                  |   4 +-
 src/slots/Header/DiscordButton.tsx           |   4 +-
 src/slots/Header/GithubButton.tsx            |  85 +++++++++++++++-
 src/slots/Header/index.tsx                   |   5 +-
 src/slots/Hero/index.tsx                     |  10 +-
 src/slots/Logo/index.tsx                     |   4 +-
 src/slots/Navbar/index.tsx                   |   4 +-
 src/slots/Toc/index.tsx                      |   4 +-
 src/store/index.ts                           |  18 ----
 src/store/initialState.ts                    |  31 ++++--
 src/store/selectors/apiHeader.ts             |  15 +--
 src/store/selectors/hero.ts                  |  43 ++++----
 src/store/selectors/index.ts                 |  71 +------------
 src/store/selectors/site.ts                  | 100 +++++++++++++++++++
 src/store/selectors/siteBasicInfo.ts         |  21 ----
 src/store/selectors/token.ts                 |   9 --
 src/store/useSiteStore.ts                    |   8 +-
 src/types/config.ts                          |  38 ++++++-
 40 files changed, 563 insertions(+), 279 deletions(-)
 create mode 100644 src/components/Analytics/Clarity.tsx
 create mode 100644 src/components/Analytics/GoogleAnalytics.tsx
 create mode 100644 src/components/Analytics/Plausible.tsx
 create mode 100644 src/components/Analytics/index.tsx
 delete mode 100644 src/components/Favicons/index.tsx
 create mode 100644 src/layouts/DemoLayout/GlobalStyle.ts
 create mode 100644 src/layouts/DocLayout/Head/Favicons.tsx
 create mode 100644 src/layouts/DocLayout/Head/Og.tsx
 create mode 100644 src/store/selectors/site.ts
 delete mode 100644 src/store/selectors/siteBasicInfo.ts
 delete mode 100644 src/store/selectors/token.ts

diff --git a/example/.dumirc.ts b/example/.dumirc.ts
index b045d80..2210fdb 100644
--- a/example/.dumirc.ts
+++ b/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',
diff --git a/src/builtins/Previewer/index.tsx b/src/builtins/Previewer/index.tsx
index 50bd47d..73e286d 100644
--- a/src/builtins/Previewer/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/Analytics/Clarity.tsx b/src/components/Analytics/Clarity.tsx
new file mode 100644
index 0000000..de04eb4
--- /dev/null
+++ b/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;
diff --git a/src/components/Analytics/GoogleAnalytics.tsx b/src/components/Analytics/GoogleAnalytics.tsx
new file mode 100644
index 0000000..6a7a5d9
--- /dev/null
+++ b/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;
diff --git a/src/components/Analytics/Plausible.tsx b/src/components/Analytics/Plausible.tsx
new file mode 100644
index 0000000..c3af037
--- /dev/null
+++ b/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;
diff --git a/src/components/Analytics/index.tsx b/src/components/Analytics/index.tsx
new file mode 100644
index 0000000..f966a16
--- /dev/null
+++ b/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;
diff --git a/src/components/Favicons/index.tsx b/src/components/Favicons/index.tsx
deleted file mode 100644
index 0940af1..0000000
--- a/src/components/Favicons/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Helmet } from 'dumi';
-import { memo } from 'react';
-
-const Favicons = memo(() => {
-  return (
-    <Helmet>
-      <link
-        href="https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png"
-        rel="apple-touch-icon"
-        sizes="180x180"
-      />
-      <link
-        href="https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-32x32.png"
-        rel="icon"
-        sizes="32x32"
-        type="image/png"
-      />
-      <link
-        href="https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-16x16.png"
-        rel="icon"
-        sizes="16x16"
-        type="image/png"
-      />
-      <link
-        href="https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/site.webmanifest"
-        rel="manifest"
-      />
-      <link
-        color="#000000"
-        href="https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/safari-pinned-tab.svg"
-        rel="mask-icon"
-      />
-      <meta content="LobeHub" name="apple-mobile-web-app-title" />
-      <meta content="LobeHub" name="application-name" />
-      <meta content="#000000" name="msapplication-TileColor" />
-      <meta content="#000000" name="theme-color" />
-    </Helmet>
-  );
-});
-
-export default Favicons;
diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx
index 2259b02..555a59e 100644
--- a/src/components/StoreUpdater/index.tsx
+++ b/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 });
   });
 
diff --git a/src/layouts/DemoLayout/GlobalStyle.ts b/src/layouts/DemoLayout/GlobalStyle.ts
new file mode 100644
index 0000000..3a95c17
--- /dev/null
+++ b/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;
diff --git a/src/layouts/DemoLayout/index.tsx b/src/layouts/DemoLayout/index.tsx
index 76d4fb3..1384c4b 100644
--- a/src/layouts/DemoLayout/index.tsx
+++ b/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} />;
 });
diff --git a/src/layouts/DocLayout/DocumentLayout.tsx b/src/layouts/DocLayout/DocumentLayout.tsx
index 0a6c4a3..311d5b9 100644
--- a/src/layouts/DocLayout/DocumentLayout.tsx
+++ b/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),
     };
   });
 
diff --git a/src/layouts/DocLayout/GlobalStyle.ts b/src/layouts/DocLayout/GlobalStyle.ts
index 1efa850..3a95c17 100644
--- a/src/layouts/DocLayout/GlobalStyle.ts
+++ b/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;
diff --git a/src/layouts/DocLayout/Head/Favicons.tsx b/src/layouts/DocLayout/Head/Favicons.tsx
new file mode 100644
index 0000000..5ee1cfd
--- /dev/null
+++ b/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;
diff --git a/src/layouts/DocLayout/Head/Og.tsx b/src/layouts/DocLayout/Head/Og.tsx
new file mode 100644
index 0000000..bd6c4a6
--- /dev/null
+++ b/src/layouts/DocLayout/Head/Og.tsx
@@ -0,0 +1,45 @@
+import { Helmet } from 'dumi';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { siteSelectors, useSiteStore } from '@/store';
+
+const Og = memo(() => {
+  const [title, desc, logo] = useSiteStore((s) => [
+    siteSelectors.siteTitle(s),
+    siteSelectors.siteDesc(s),
+    siteSelectors.logo(s),
+  ]);
+  const metadata = useSiteStore(siteSelectors.metadata, isEqual);
+  return (
+    <Helmet>
+      <title>{metadata?.title || title}</title>
+      <meta content={metadata?.description || desc} name="description" />
+      <meta content={metadata?.openGraph?.title || title} property="og:title" />
+      <meta content={metadata?.openGraph?.description || desc} property="og:description" />
+      <meta content={location.origin} property="og:url" />
+      <meta content={metadata?.openGraph?.siteName} property="og:site_name" />
+      <meta content="en" property="og:locale" />
+      <meta content={metadata?.openGraph?.title || title} property="og:image:alt" />
+      <meta content={metadata?.openGraph?.image || logo} property="og:image" />
+      <meta content="website" property="og:type" />
+      <meta content="summary_large_image" name="twitter:card" />
+      <meta content={metadata?.twitter?.site} name="twitter:site" />
+      <meta content={metadata?.twitter?.site} name="twitter:creator" />
+      <meta
+        content={metadata?.twitter?.title || metadata?.openGraph?.title || title}
+        name="twitter:title"
+      />
+      <meta
+        content={metadata?.twitter?.description || metadata?.openGraph?.description || desc}
+        name="twitter:description"
+      />
+      <meta
+        content={metadata?.twitter?.image || metadata?.openGraph?.image || logo}
+        name="twitter:image"
+      />
+    </Helmet>
+  );
+});
+
+export default Og;
diff --git a/src/layouts/DocLayout/index.tsx b/src/layouts/DocLayout/index.tsx
index 7796f43..17ccb1d 100644
--- a/src/layouts/DocLayout/index.tsx
+++ b/src/layouts/DocLayout/index.tsx
@@ -9,17 +9,21 @@ import {
 } from 'dumi';
 import { memo, useMemo } from 'react';
 
-import Favicons from '@/components/Favicons';
+import Analytics from '@/components/Analytics';
 import { StoreUpdater } from '@/components/StoreUpdater';
 import { Provider, createStore } from '@/store';
 
 import DocumentLayout from './DocumentLayout';
+import Favicons from './Head/Favicons';
+import Og from './Head/Og';
 import ThemeProvider from './ThemeProvider';
 
 const App = memo(({ initState }: any) => {
   return (
     <Provider createStore={() => createStore(initState)}>
       <Favicons />
+      <Og />
+      <Analytics />
       <StoreUpdater />
       <ThemeProvider>
         <DocumentLayout />
diff --git a/src/pages/Changelog/index.tsx b/src/pages/Changelog/index.tsx
index ad9d9de..d195f4f 100644
--- a/src/pages/Changelog/index.tsx
+++ b/src/pages/Changelog/index.tsx
@@ -7,14 +7,12 @@ import { Center } from 'react-layout-kit';
 import { ApiHeader } from '@/components/ApiHeader';
 import { useStyles } from '@/pages/Docs/styles';
 import Content from '@/slots/Content';
-import { githubSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 const Changelog = memo(() => {
   const outlet = useOutlet();
   const { mobile } = useResponsive();
-  const { repoBase } = useSiteStore((s) => ({
-    repoBase: githubSel(s),
-  }));
+  const repoBase = useSiteStore(siteSelectors.github);
 
   const { fm } = useSiteStore(
     (s) => ({
diff --git a/src/pages/Docs/index.tsx b/src/pages/Docs/index.tsx
index b71c66c..72c3c36 100644
--- a/src/pages/Docs/index.tsx
+++ b/src/pages/Docs/index.tsx
@@ -6,7 +6,7 @@ import { Center } from 'react-layout-kit';
 
 import ApiHeader from '@/slots/ApiHeader';
 import Content from '@/slots/Content';
-import { giscusSel, isApiPageSel, useSiteStore } from '@/store';
+import { apiHeaderSelectors, siteSelectors, useSiteStore } from '@/store';
 
 import { useStyles } from './styles';
 
@@ -14,8 +14,8 @@ const Documents = memo(() => {
   const outlet = useOutlet();
   const { mobile } = useResponsive();
   const { isApiPage, giscus } = useSiteStore((st) => ({
-    giscus: giscusSel(st),
-    isApiPage: isApiPageSel(st),
+    giscus: siteSelectors.giscus(st),
+    isApiPage: apiHeaderSelectors.isApiPage(st),
   }));
   const { styles } = useStyles();
 
diff --git a/src/slots/ApiHeader/index.tsx b/src/slots/ApiHeader/index.tsx
index 8336792..6bf7b73 100644
--- a/src/slots/ApiHeader/index.tsx
+++ b/src/slots/ApiHeader/index.tsx
@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { FlexboxProps } from 'react-layout-kit';
 
 import { ApiHeader as Header } from '@/components/ApiHeader';
-import { apiHeaderSel, useSiteStore } from '@/store';
+import { apiHeaderSelectors, useSiteStore } from '@/store';
 
 import BundlephobiaFilled from './BundlephobiaFilled';
 import Graph from './Graph';
@@ -12,7 +12,7 @@ import PackagePhobia from './PackagePhobia';
 import Unpkg from './Unpkg';
 
 const ApiHeader = memo<FlexboxProps>(({ ...rest }) => {
-  const props = useSiteStore(apiHeaderSel, isEqual);
+  const props = useSiteStore(apiHeaderSelectors.apiHeader, isEqual);
   const { pkg } = props;
 
   const packages = useMemo(() => {
diff --git a/src/slots/Content/index.tsx b/src/slots/Content/index.tsx
index 86a12a3..2cc51a6 100644
--- a/src/slots/Content/index.tsx
+++ b/src/slots/Content/index.tsx
@@ -6,14 +6,14 @@ import { memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ContentFooter from '@/slots/ContentFooter';
-import { themeConfig, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 import { DivProps } from '@/types';
 
 import { useStyles } from './style';
 
 const Content = memo<DivProps>(({ children, ...props }) => {
   const loading = useSiteStore((s) => s.siteData.loading);
-  const { docStyle } = useSiteStore(themeConfig, isEqual);
+  const { docStyle } = useSiteStore(siteSelectors.themeConfig, isEqual);
   const { styles } = useStyles(docStyle === 'pure');
   const { mobile } = useResponsive();
 
diff --git a/src/slots/ContentFooter/index.tsx b/src/slots/ContentFooter/index.tsx
index c3e9f93..7711a0f 100644
--- a/src/slots/ContentFooter/index.tsx
+++ b/src/slots/ContentFooter/index.tsx
@@ -3,12 +3,12 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { contentBottomSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 import Linker from './Linker';
 
 const ContentFooter = memo(() => {
-  const { prev, next } = useSiteStore(contentBottomSel, isEqual);
+  const { prev, next } = useSiteStore(siteSelectors.contentBottom, isEqual);
   const { mobile } = useResponsive();
 
   return (
diff --git a/src/slots/Features/index.tsx b/src/slots/Features/index.tsx
index 8b636b0..bf83a90 100644
--- a/src/slots/Features/index.tsx
+++ b/src/slots/Features/index.tsx
@@ -3,10 +3,10 @@ import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
-import { featuresSel, useSiteStore } from '@/store';
+import { heroSelectors, useSiteStore } from '@/store';
 
 const Features = memo(() => {
-  const features = useSiteStore(featuresSel, isEqual);
+  const features = useSiteStore(heroSelectors.features, isEqual);
   const theme = useTheme();
 
   if (!features?.length) return;
diff --git a/src/slots/Footer/index.tsx b/src/slots/Footer/index.tsx
index 1503285..1010f61 100644
--- a/src/slots/Footer/index.tsx
+++ b/src/slots/Footer/index.tsx
@@ -5,7 +5,7 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import { githubSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 import { getColumns } from './columns';
 import { useStyles } from './style';
@@ -13,7 +13,7 @@ import { useStyles } from './style';
 const Footer = memo(() => {
   const { themeConfig, pkg } = useSiteStore((s) => s.siteData, isEqual);
   const { footerConfig, footer } = themeConfig;
-  const githubUrl = useSiteStore(githubSel);
+  const githubUrl = useSiteStore(siteSelectors.github);
   const { styles, theme } = useStyles();
   const { mobile } = useResponsive();
 
@@ -38,7 +38,7 @@ const Footer = memo(() => {
               align={'center'}
               dangerouslySetInnerHTML={{ __html: bottomFooter }}
               horizontal
-            ></Flexbox>
+            />
           </Center>
         ) : (
           <Center horizontal>
diff --git a/src/slots/Header/Burger.tsx b/src/slots/Header/Burger.tsx
index c6a8753..01104f4 100644
--- a/src/slots/Header/Burger.tsx
+++ b/src/slots/Header/Burger.tsx
@@ -4,7 +4,7 @@ import isEqual from 'fast-deep-equal';
 import { uniq } from 'lodash-es';
 import { memo, useMemo, useState } from 'react';
 
-import { activePathSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 const Burger = memo(() => {
   const [opened, setOpened] = useState(false);
@@ -12,7 +12,7 @@ const Burger = memo(() => {
   const nav = useSiteStore((s) => s.navData, isEqual);
   const sidebar = useSiteStore((s) => s.sidebar, isEqual);
   const { pathname, activePath } = useSiteStore((s) => ({
-    activePath: activePathSel(s),
+    activePath: siteSelectors.activePath(s),
     pathname: s.location.pathname,
   }));
 
diff --git a/src/slots/Header/DiscordButton.tsx b/src/slots/Header/DiscordButton.tsx
index 6ff8823..8abf35e 100644
--- a/src/slots/Header/DiscordButton.tsx
+++ b/src/slots/Header/DiscordButton.tsx
@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import { type LucideIcon, createLucideIcon } from 'lucide-react';
 import { memo } from 'react';
 
-import { discordSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 const Discord: LucideIcon = createLucideIcon('Discord', [
   [
@@ -24,7 +24,7 @@ const useStyles = createStyles(
 );
 
 const DiscordButton = memo(() => {
-  const inviteUrl = useSiteStore(discordSel);
+  const inviteUrl = useSiteStore(siteSelectors.discord);
   const { styles } = useStyles();
 
   return inviteUrl ? (
diff --git a/src/slots/Header/GithubButton.tsx b/src/slots/Header/GithubButton.tsx
index 8a2c8be..6778152 100644
--- a/src/slots/Header/GithubButton.tsx
+++ b/src/slots/Header/GithubButton.tsx
@@ -1,17 +1,92 @@
 import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { Github } from 'lucide-react';
+import { rgba } from 'polished';
 import { memo } from 'react';
+import useSWR from 'swr';
 
-import { githubSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
+
+const useStyles = createStyles(({ css, token }) => ({
+  button: css`
+    overflow: hidden;
+
+    font-weight: bold;
+    color: ${token.colorTextSecondary};
+
+    border: 1px solid ${rgba(token.colorText, 0.1)};
+    border-radius: 36px !important;
+
+    transition: all 0.2s ease-in-out;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset-block-end: 0;
+
+      display: block;
+
+      width: 50%;
+      height: 1px;
+
+      opacity: 0;
+      background-image: linear-gradient(to right, transparent, ${token.gold}, transparent);
+
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+      background: ${token.colorBgContainer};
+
+      &::before {
+        opacity: 1;
+      }
+    }
+  `,
+}));
 
 const GithubButton = memo(() => {
-  const repoUrl = useSiteStore(githubSel);
+  const { styles } = useStyles();
+  const repoUrl = useSiteStore(siteSelectors.github);
+  const { data: githubStar } = useSWR(
+    'github-star',
+    async () => {
+      if (!repoUrl) return 0;
+      const url = repoUrl.replace('https://github.com/', 'https://api.github.com/repos/');
+      const res = await fetch(url);
+      if (!res.ok) return 0;
+      const json = await res.json();
+      return json.stargazers_count as number;
+    },
+    { refreshWhenOffline: false, revalidateOnFocus: false, revalidateOnReconnect: false },
+  );
+
+  if (!repoUrl) return;
+
+  if (!githubStar)
+    return (
+      <a href={repoUrl} rel="noreferrer" target={'_blank'}>
+        <ActionIcon icon={Github} size="site" />
+      </a>
+    );
 
-  return repoUrl ? (
+  return (
     <a href={repoUrl} rel="noreferrer" target={'_blank'}>
-      <ActionIcon icon={Github} size="site" />
+      <ActionIcon
+        className={styles.button}
+        gap={4}
+        icon={Github}
+        paddingInline={16}
+        size="site"
+        style={{
+          width: 'unset',
+        }}
+      >
+        {githubStar > 1000 ? (githubStar / 1000).toFixed(1) + 'K' : githubStar + ' ⭐️'}
+      </ActionIcon>
     </a>
-  ) : undefined;
+  );
 });
 
 export default GithubButton;
diff --git a/src/slots/Header/index.tsx b/src/slots/Header/index.tsx
index 43e5904..4938f38 100644
--- a/src/slots/Header/index.tsx
+++ b/src/slots/Header/index.tsx
@@ -26,10 +26,11 @@ const Header = memo(() => {
           <ThemeSwitch />
         ) : (
           <>
-            <SearchBar /> <LangSwitch />
-            <GithubButton />
+            <SearchBar />
             <DiscordButton />
+            <LangSwitch />
             <ThemeSwitch />
+            <GithubButton />
           </>
         )
       }
diff --git a/src/slots/Hero/index.tsx b/src/slots/Hero/index.tsx
index 35bb491..94168b1 100644
--- a/src/slots/Hero/index.tsx
+++ b/src/slots/Hero/index.tsx
@@ -1,12 +1,14 @@
 import { Hero as H } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { heroActionsSel, heroDescSel, heroTitleSel, useSiteStore } from '@/store';
+import { heroSelectors, useSiteStore } from '@/store';
 
 const Hero = memo(() => {
-  const title = useSiteStore(heroTitleSel);
-  const description = useSiteStore(heroDescSel);
-  const actions = useSiteStore(heroActionsSel);
+  const [title, description, actions] = useSiteStore((s) => [
+    heroSelectors.heroTitle(s),
+    heroSelectors.heroDesc(s),
+    heroSelectors.heroActions(s),
+  ]);
 
   return <H actions={actions} description={description} title={title!} />;
 });
diff --git a/src/slots/Logo/index.tsx b/src/slots/Logo/index.tsx
index c0e35a9..a7ee80c 100644
--- a/src/slots/Logo/index.tsx
+++ b/src/slots/Logo/index.tsx
@@ -5,13 +5,13 @@ import { Link } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
-import { themeConfig } from '@/store/selectors/siteBasicInfo';
+import { siteSelectors } from '@/store';
 import { useSiteStore } from '@/store/useSiteStore';
 
 import { useStyles } from './style';
 
 const Logo = memo(() => {
-  const config = useSiteStore(themeConfig, isEqual);
+  const config = useSiteStore(siteSelectors.themeConfig, isEqual);
   const locale = useSiteStore((s) => s.locale, isEqual);
   const { styles, cx } = useStyles();
   const { mobile } = useResponsive();
diff --git a/src/slots/Navbar/index.tsx b/src/slots/Navbar/index.tsx
index 2a54dbe..faaef67 100644
--- a/src/slots/Navbar/index.tsx
+++ b/src/slots/Navbar/index.tsx
@@ -4,7 +4,7 @@ import { Link, history } from 'dumi';
 import NavbarExtra from 'dumi/theme-default/slots/NavbarExtra';
 import { memo } from 'react';
 
-import { activePathSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 const useStyles = createStyles(({ css, stylish, token, responsive, prefixCls }) => {
   return {
@@ -26,7 +26,7 @@ const Navbar = memo(() => {
 
   const regLink = /^(\w+:)\/\/|^(mailto|tel):/;
   const nav = useSiteStore((s) => s.navData);
-  const activePath = useSiteStore(activePathSel);
+  const activePath = useSiteStore(siteSelectors.activePath);
   return (
     <>
       <TabsNav
diff --git a/src/slots/Toc/index.tsx b/src/slots/Toc/index.tsx
index 7cc9bdd..aa7d350 100644
--- a/src/slots/Toc/index.tsx
+++ b/src/slots/Toc/index.tsx
@@ -3,12 +3,12 @@ import { useResponsive, useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useState } from 'react';
 
-import { tocAnchorItemSel, useSiteStore } from '@/store';
+import { siteSelectors, useSiteStore } from '@/store';
 
 const GAP = 48;
 
 const Toc = memo(() => {
-  const items = useSiteStore(tocAnchorItemSel, isEqual);
+  const items = useSiteStore(siteSelectors.tocAnchorItem, isEqual);
   const { mobile } = useResponsive();
   const theme = useTheme();
   const [spacing, setSpacing] = useState<number>(GAP);
diff --git a/src/store/index.ts b/src/store/index.ts
index 53f0049..454ad98 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,22 +1,4 @@
-import { apiHeaderSel, flattenSidebarSel, logoSel, tokenSel } from './selectors';
-
 export { initialState } from './initialState';
 export * from './selectors';
 export * from './useSiteStore';
 export * from './useThemeStore';
-
-/**
- * @title 数据选择器
- */
-export const siteSelectors = {
-  /**
-   * @title API 头部选择器
-   */
-  apiHeader: apiHeaderSel,
-  /**
-   * @title 扁平化侧边栏选择器
-   */
-  flattenSidebar: flattenSidebarSel,
-  logo: logoSel,
-  token: tokenSel,
-};
diff --git a/src/store/initialState.ts b/src/store/initialState.ts
index bbcd354..c2a0965 100644
--- a/src/store/initialState.ts
+++ b/src/store/initialState.ts
@@ -44,8 +44,27 @@ export interface SiteStore {
   tabMeta?: NonNullable<IRouteMeta['tabs']>[0]['meta'];
 }
 
+export const initialThemeConfig: SiteThemeConfig = {
+  footer: 'Made with 🤯 by <a href="https://lobehub.com" target="_blank">LobeHub</a>',
+  metadata: {
+    icons: {
+      apple: 'https://lobehub.com/apple-touch-icon.png',
+      icon: 'https://lobehub.com/favicon-32x32.png',
+      shortcut: 'https://lobehub.com/favicon.ico',
+    },
+    manifest:
+      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/site.webmanifest',
+    openGraph: {
+      siteName: 'LobeHub',
+    },
+    twitter: {
+      site: '@lobehub',
+    },
+  },
+};
+
 export const initialState: SiteStore = {
-  locale: { id: 'zh-CN', name: '中文', suffix: '' },
+  locale: { id: 'en-US', name: 'English', suffix: '' },
   location: {
     hash: '',
     key: '',
@@ -58,11 +77,8 @@ export const initialState: SiteStore = {
   routeMeta: {
     // @ts-ignore
     frontmatter: {},
-
     tabs: undefined,
-
     texts: [],
-
     toc: [],
   },
 
@@ -70,19 +86,14 @@ export const initialState: SiteStore = {
 
   siteData: {
     components: {},
-
     demos: {},
-
     entryExports: {},
-
     loading: true,
-
     locales: [],
-
     pkg: {},
     // @ts-ignore
     setLoading: undefined,
     // @ts-ignore
-    themeConfig: {},
+    themeConfig: initialThemeConfig,
   },
 };
diff --git a/src/store/selectors/apiHeader.ts b/src/store/selectors/apiHeader.ts
index aafa8e1..614c84d 100644
--- a/src/store/selectors/apiHeader.ts
+++ b/src/store/selectors/apiHeader.ts
@@ -1,9 +1,7 @@
 import type { ApiHeaderProps } from '../../components/ApiHeader';
 import type { ApiHeaderConfig } from '../../types/config';
 import type { SiteStore } from '../useSiteStore';
-import { githubSel } from './siteBasicInfo';
-
-export * from './hero';
+import { siteSelectors } from './site';
 
 const haseUrl = (config: false | string | undefined) => {
   if (config === false) return false;
@@ -11,7 +9,7 @@ const haseUrl = (config: false | string | undefined) => {
   return typeof config === 'string';
 };
 
-export const isApiPageSel = (s: SiteStore) => {
+const isApiPage = (s: SiteStore) => {
   const fm = s.routeMeta.frontmatter;
 
   if (s.siteData.themeConfig.apiHeader === false || fm.apiHeader === false) return false;
@@ -23,8 +21,8 @@ export const isApiPageSel = (s: SiteStore) => {
   return baseMatch.some((path) => s.location.pathname.startsWith(path));
 };
 
-export const apiHeaderSel = (s: SiteStore): ApiHeaderProps => {
-  const REPO_BASE = githubSel(s);
+const apiHeader = (s: SiteStore): ApiHeaderProps => {
+  const REPO_BASE = siteSelectors.github(s);
   const fm = s.routeMeta.frontmatter;
   const localeId = s.locale.id;
 
@@ -68,3 +66,8 @@ export const apiHeaderSel = (s: SiteStore): ApiHeaderProps => {
     type,
   };
 };
+
+export const apiHeaderSelectors = {
+  apiHeader,
+  isApiPage,
+};
diff --git a/src/store/selectors/hero.ts b/src/store/selectors/hero.ts
index 46f421b..465427e 100644
--- a/src/store/selectors/hero.ts
+++ b/src/store/selectors/hero.ts
@@ -2,14 +2,9 @@ import { type FeatureItem } from '@lobehub/ui';
 
 import { SiteStore } from '../useSiteStore';
 
-export const isHeroPageSel = (s: SiteStore) => s.location.pathname === '/';
+const isHeroPage = (s: SiteStore) => s.location.pathname === '/';
 
-// 是否展示首页的自定义内容
-export const showHeroPageCustomContent = (s: SiteStore) =>
-  !!s.routeMeta.frontmatter.hero?.showCustomContent ||
-  !!s.siteData.themeConfig.hero?.showCustomContent;
-
-export const localeValueSel = (s: SiteStore, value: any) => {
+const localeValue = (s: SiteStore, value: any) => {
   if (!value) return;
 
   if (value[s.locale.id]) return value[s.locale.id];
@@ -21,50 +16,58 @@ export const localeValueSel = (s: SiteStore, value: any) => {
  * Hero Title 选择器
  * 选择逻辑：优先使用 hero 配置的 title， 再兜底到 themeConfig 中的 name
  */
-export const heroTitleSel = (s: SiteStore) =>
+const heroTitle = (s: SiteStore) =>
   s.routeMeta.frontmatter.hero?.title ||
   // 从 hero 的 title 中选择
-  localeValueSel(s, s.siteData.themeConfig.hero)?.title ||
+  localeValue(s, s.siteData.themeConfig.hero)?.title ||
   // @deprecated 1.0 正式版本移除
   // 从 hero 的 title 中选择
-  localeValueSel(s, s.siteData.themeConfig.title) ||
+  localeValue(s, s.siteData.themeConfig.title) ||
   s.siteData.themeConfig.name;
 
 /**
  * Hero description 选择器
  * 选择逻辑：优先使用 hero 配置的 description， 再兜底到 themeConfig 中的 name
  */
-export const heroDescSel = (s: SiteStore) =>
+const heroDesc = (s: SiteStore) =>
   s.routeMeta.frontmatter.hero?.description ||
   // 从 hero 的 description 中选择
-  localeValueSel(s, s.siteData.themeConfig.hero)?.description ||
+  localeValue(s, s.siteData.themeConfig.hero)?.description ||
   // @deprecated 1.0 正式版本移除
   // 从 hero 的 description 中选择
-  localeValueSel(s, s.siteData.themeConfig.description);
+  localeValue(s, s.siteData.themeConfig.description);
 
 /**
  * Hero Action 选择器
  * 选择逻辑：优先使用 hero 配置的 actions， 再兜底到 themeConfig 中的 actions
  */
-export const heroActionsSel = (s: SiteStore) =>
+const heroActions = (s: SiteStore) =>
   s.routeMeta.frontmatter.hero?.actions ||
   // 从 hero 的 actions 中选择
-  localeValueSel(s, s.siteData.themeConfig.hero)?.actions ||
+  localeValue(s, s.siteData.themeConfig.hero)?.actions ||
   // @deprecated 1.0 正式版本移除
-  localeValueSel(s, s.siteData.themeConfig.actions);
+  localeValue(s, s.siteData.themeConfig.actions);
 
 /**
  * Features 选择器
  */
-export const featuresSel = (s: SiteStore): FeatureItem[] => {
-  if (!isHeroPageSel(s)) return [];
+const features = (s: SiteStore): FeatureItem[] => {
+  if (!isHeroPage(s)) return [];
 
   return (
-    localeValueSel(s, s.siteData.themeConfig.hero)?.features ||
+    localeValue(s, s.siteData.themeConfig.hero)?.features ||
     // @deprecated 1.0 正式版本移除
-    localeValueSel(s, s.siteData.themeConfig.features) ||
+    localeValue(s, s.siteData.themeConfig.features) ||
     // 在themeConfig 没有配置的话，尝试兜底到 frontmatter 中的配置
     s.routeMeta.frontmatter.features ||
     []
   );
 };
+
+export const heroSelectors = {
+  features,
+  heroActions,
+  heroDesc,
+  heroTitle,
+  isHeroPage,
+};
diff --git a/src/store/selectors/index.ts b/src/store/selectors/index.ts
index 6603fae..9251d7f 100644
--- a/src/store/selectors/index.ts
+++ b/src/store/selectors/index.ts
@@ -1,68 +1,3 @@
-import { ISidebarItem } from 'dumi/dist/client/theme-api/types';
-
-import { AnchorItem } from '../../types';
-import { SiteStore } from '../useSiteStore';
-
-export * from './apiHeader';
-export * from './hero';
-export * from './siteBasicInfo';
-export * from './token';
-
-export const activePathSel = (s: SiteStore) => {
-  if (s.location.pathname === '/') return '/';
-
-  const item = s.navData
-    .filter((index) => index.link !== '/')
-    .find((index) => s.location.pathname.startsWith(String(index.activePath! || index.link)));
-
-  return item?.activePath || item?.link || '';
-};
-
-/**
- * toc 锚点选择器
- * @param s
- */
-export const tocAnchorItemSel = (s: SiteStore) => {
-  let { toc, frontmatter } = s.routeMeta;
-
-  if (s.tabMeta?.toc) toc = s.tabMeta.toc;
-
-  if (s.tabMeta?.frontmatter) frontmatter = s.tabMeta.frontmatter as any;
-
-  const shouldKeepWith = (depth: number) => {
-    if (!frontmatter.tocDepth) return true;
-
-    if (typeof frontmatter.tocDepth === 'number' && frontmatter.tocDepth > depth - 1) return true;
-  };
-
-  return toc.reduce<AnchorItem[]>((result, item) => {
-    if (item.depth === 2 && shouldKeepWith(2)) {
-      result.push({ ...item });
-    } else if (item.depth === 3 && shouldKeepWith(3)) {
-      const parent = result.at(-1);
-
-      if (parent) {
-        parent.children = parent.children || [];
-        parent.children.push({ ...item });
-      }
-    }
-
-    return result;
-  }, []);
-};
-
-/**
- * 将 sidebar 信息扁平化
- * @param s
- */
-export const flattenSidebarSel = (s: SiteStore): ISidebarItem[] => {
-  return s.sidebar?.map((index) => index.children).flat() || [];
-};
-
-export const contentBottomSel = (s: SiteStore) => {
-  const dataFlatten = flattenSidebarSel(s);
-  const path = s.location.pathname;
-  const currentIndex = dataFlatten.findIndex((item) => item.link === path);
-
-  return { currentIndex, next: dataFlatten[currentIndex + 1], prev: dataFlatten[currentIndex - 1] };
-};
+export { apiHeaderSelectors } from './apiHeader';
+export { heroSelectors } from './hero';
+export { siteSelectors } from './site';
diff --git a/src/store/selectors/site.ts b/src/store/selectors/site.ts
new file mode 100644
index 0000000..a5c57fa
--- /dev/null
+++ b/src/store/selectors/site.ts
@@ -0,0 +1,100 @@
+import { ISidebarItem } from 'dumi/dist/client/theme-api/types';
+import { merge } from 'lodash-es';
+
+import { initialThemeConfig } from '@/store/initialState';
+import { AnchorItem } from '@/types';
+
+import { SiteStore } from '../useSiteStore';
+
+const themeConfig = (s: SiteStore) => merge(s.siteData.themeConfig, initialThemeConfig);
+const siteTitle = (s: SiteStore) => themeConfig(s).title;
+const siteDesc = (s: SiteStore) => themeConfig(s).description;
+
+const github = (s: SiteStore) => themeConfig(s).socialLinks?.github || '';
+const discord = (s: SiteStore) => themeConfig(s).socialLinks?.discord || '';
+
+const giscus = (s: SiteStore) => themeConfig(s).giscus;
+
+const analytics = (s: SiteStore) => themeConfig(s).analytics;
+
+const metadata = (s: SiteStore) => themeConfig(s).metadata;
+
+const logo = (s: SiteStore): string => {
+  const logo = themeConfig(s).logo;
+  if (!logo) return logo || '';
+  if (logo.startsWith('http')) return logo;
+  return logo;
+};
+
+const token = (s: SiteStore) => {
+  const fm = s.routeMeta.frontmatter;
+  return merge({}, fm.token, s.siteData.themeConfig.siteToken);
+};
+
+const activePath = (s: SiteStore) => {
+  if (s.location.pathname === '/') return '/';
+
+  const item = s.navData
+    .filter((index) => index.link !== '/')
+    .find((index) => s.location.pathname.startsWith(String(index.activePath! || index.link)));
+
+  return item?.activePath || item?.link || '';
+};
+
+const tocAnchorItem = (s: SiteStore) => {
+  let { toc, frontmatter } = s.routeMeta;
+
+  if (s.tabMeta?.toc) toc = s.tabMeta.toc;
+
+  if (s.tabMeta?.frontmatter) frontmatter = s.tabMeta.frontmatter as any;
+
+  const shouldKeepWith = (depth: number) => {
+    if (!frontmatter.tocDepth) return true;
+
+    if (typeof frontmatter.tocDepth === 'number' && frontmatter.tocDepth > depth - 1) return true;
+  };
+
+  return toc.reduce<AnchorItem[]>((result, item) => {
+    if (item.depth === 2 && shouldKeepWith(2)) {
+      result.push({ ...item });
+    } else if (item.depth === 3 && shouldKeepWith(3)) {
+      const parent = result.at(-1);
+
+      if (parent) {
+        parent.children = parent.children || [];
+        parent.children.push({ ...item });
+      }
+    }
+
+    return result;
+  }, []);
+};
+
+const flattenSidebar = (s: SiteStore): ISidebarItem[] => {
+  return s.sidebar?.map((index) => index.children).flat() || [];
+};
+
+const contentBottom = (s: SiteStore) => {
+  const dataFlatten = flattenSidebar(s);
+  const path = s.location.pathname;
+  const currentIndex = dataFlatten.findIndex((item) => item.link === path);
+
+  return { currentIndex, next: dataFlatten[currentIndex + 1], prev: dataFlatten[currentIndex - 1] };
+};
+
+export const siteSelectors = {
+  activePath,
+  analytics,
+  contentBottom,
+  discord,
+  flattenSidebar,
+  giscus,
+  github,
+  logo,
+  metadata,
+  siteDesc,
+  siteTitle,
+  themeConfig,
+  tocAnchorItem,
+  token,
+};
diff --git a/src/store/selectors/siteBasicInfo.ts b/src/store/selectors/siteBasicInfo.ts
deleted file mode 100644
index 7280f59..0000000
--- a/src/store/selectors/siteBasicInfo.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SiteStore } from '../useSiteStore';
-
-export const themeConfig = (s: SiteStore) => s.siteData.themeConfig;
-export const siteTitleSel = (s: SiteStore) => s.siteData.themeConfig.title;
-
-export const githubSel = (s: SiteStore) => s.siteData.themeConfig.socialLinks?.github || '';
-export const discordSel = (s: SiteStore) => s.siteData.themeConfig.socialLinks?.discord || '';
-
-export const giscusSel = (s: SiteStore) => s.siteData.themeConfig.giscus;
-
-export const logoSel = (s: SiteStore): string => {
-  const logo = s.siteData.themeConfig.logo;
-
-  if (!logo) return logo || '';
-
-  // 如果是 url 地址，则什么也不处理
-  if (logo.startsWith('http')) return logo;
-
-  // TODO: 如果是相对路径，则拼接上 base
-  return logo;
-};
diff --git a/src/store/selectors/token.ts b/src/store/selectors/token.ts
deleted file mode 100644
index b25a072..0000000
--- a/src/store/selectors/token.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { merge } from 'lodash-es';
-
-import { SiteStore } from '../useSiteStore';
-
-export const tokenSel = (s: SiteStore) => {
-  const fm = s.routeMeta.frontmatter;
-
-  return merge({}, fm.token, s.siteData.themeConfig.siteToken);
-};
diff --git a/src/store/useSiteStore.ts b/src/store/useSiteStore.ts
index 0bbc95a..891bbc2 100644
--- a/src/store/useSiteStore.ts
+++ b/src/store/useSiteStore.ts
@@ -13,14 +13,12 @@ import { devtools } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
+import { SiteThemeConfig } from '@/types';
+
 export type NavData = (INavItem & { children?: INavItem[] | undefined })[];
 
 export type ISiteData = ISiteContext & {
-  themeConfig: IThemeConfig & {
-    socialLinks?: {
-      discord?: string;
-    };
-  };
+  themeConfig: IThemeConfig & SiteThemeConfig;
 };
 
 export interface SiteStore {
diff --git a/src/types/config.ts b/src/types/config.ts
index 99a6e09..2509816 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -21,11 +21,23 @@ export interface FooterConfig {
 }
 
 export interface SiteThemeConfig {
-  actions: HeroProps['actions'];
+  actions?: HeroProps['actions'];
+  analytics?: {
+    clarity?: {
+      projectId: string;
+    };
+    googleAnalytics?: {
+      measurementId: string;
+    };
+    plausible?: {
+      domain: string;
+      scriptBaseUrl: string;
+    };
+  };
   apiHeader?: ApiHeaderConfig | false;
   description?: string;
   docStyle?: 'block' | 'pure';
-  features: FeaturesProps['items'];
+  features?: FeaturesProps['items'];
   footer?: string | false;
   footerConfig?: FooterConfig;
   giscus?: {
@@ -38,6 +50,28 @@ export interface SiteThemeConfig {
   hideHomeNav?: boolean;
   logo?: string;
   logoType?: LogoProps['type'];
+  metadata?: {
+    description?: string;
+    icons?: {
+      apple?: string;
+      icon?: string;
+      shortcut?: string;
+    };
+    manifest?: string;
+    openGraph?: {
+      description?: string;
+      image?: string;
+      siteName?: string;
+      title?: string;
+    };
+    title?: string;
+    twitter?: {
+      description?: string;
+      image?: string;
+      site?: string;
+      title?: string;
+    };
+  };
   name?: string;
   siteToken?: SiteConfigToken;
   socialLinks?: {