✨ feat: Update theme config

README.md

@@ -83,11 +83,23 @@ Usage After installation, start the site with `dumi`, and the theme will be auto
 
 ```ts
 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?: {
@@ -100,6 +112,28 @@ 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?: {

src/index.ts

@@ -1,3 +1,7 @@
-export { defineThemeConfig } from './config';
+import { SiteThemeConfig } from '@/types';
+
 export { siteSelectors, type SiteStore, useSiteStore } from './store';
 export * from './types';
+export { styles } from '@/store/initialState';
+
+export const defineThemeConfig = (config: SiteThemeConfig) => config;

src/layouts/DocLayout/Head/Og.tsx

@@ -5,10 +5,11 @@ import { memo } from 'react';
 import { siteSelectors, useSiteStore } from '@/store';
 
 const Og = memo(() => {
-  const [title, desc, logo] = useSiteStore((s) => [
+  const [title, desc, logo, hostname] = useSiteStore((s) => [
     siteSelectors.siteTitle(s),
     siteSelectors.siteDesc(s),
     siteSelectors.logo(s),
+    siteSelectors.hostname(s),
   ]);
   const metadata = useSiteStore(siteSelectors.metadata, isEqual);
   return (
@@ -17,7 +18,7 @@ const Og = memo(() => {
       <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={hostname || 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" />

src/store/initialState.ts

@@ -44,7 +44,7 @@ export interface SiteStore {
   tabMeta?: NonNullable<IRouteMeta['tabs']>[0]['meta'];
 }
 
-export const initialThemeConfig: SiteThemeConfig = {
+export const initialThemeConfig: Partial<SiteThemeConfig> = {
   footer: 'Made with 🤯 by <a href="https://lobehub.com" target="_blank">LobeHub</a>',
   metadata: {
     icons: {
@@ -63,6 +63,14 @@ export const initialThemeConfig: SiteThemeConfig = {
   },
 };
 
+export const styles = [
+  `html, body { background: transparent;  }
+
+  @media (prefers-color-scheme: dark) {
+    html, body { background: #000; }
+  }`,
+];
+
 export const initialState: SiteStore = {
   locale: { id: 'en-US', name: 'English', suffix: '' },
   location: {
@@ -93,6 +101,7 @@ export const initialState: SiteStore = {
     pkg: {},
     // @ts-ignore
     setLoading: undefined,
+    styles: styles,
     // @ts-ignore
     themeConfig: initialThemeConfig,
   },

src/store/selectors/site.ts

@@ -82,6 +82,8 @@ const contentBottom = (s: SiteStore) => {
   return { currentIndex, next: dataFlatten[currentIndex + 1], prev: dataFlatten[currentIndex - 1] };
 };
 
+const hostname = (s: SiteStore) => s.siteData.hostname;
+
 export const siteSelectors = {
   activePath,
   analytics,
@@ -90,6 +92,7 @@ export const siteSelectors = {
   flattenSidebar,
   giscus,
   github,
+  hostname,
   logo,
   metadata,
   siteDesc,

src/store/useSiteStore.ts

@@ -1,11 +1,5 @@
 import type { ISiteContext } from 'dumi/dist/client/theme-api/context';
-import {
-  ILocale,
-  INavItem,
-  IRouteMeta,
-  ISidebarGroup,
-  IThemeConfig,
-} from 'dumi/dist/client/theme-api/types';
+import { ILocale, INavItem, IRouteMeta, ISidebarGroup } from 'dumi/dist/client/theme-api/types';
 import type { Location } from 'history';
 import { StoreApi } from 'zustand';
 import { createContext } from 'zustand-utils';
@@ -18,7 +12,7 @@ import { SiteThemeConfig } from '@/types';
 export type NavData = (INavItem & { children?: INavItem[] | undefined })[];
 
 export type ISiteData = ISiteContext & {
-  themeConfig: IThemeConfig & SiteThemeConfig;
+  themeConfig: SiteThemeConfig;
 };
 
 export interface SiteStore {

src/types/config.ts

@@ -1,4 +1,5 @@
 import type { FeaturesProps, FooterProps, HeroProps, LogoProps } from '@lobehub/ui';
+import { IThemeConfig } from 'dumi/dist/client/theme-api/types';
 import { FooterColumn } from 'rc-footer/es/column';
 
 import type { SiteCustomToken } from '@/styles/customToken';
@@ -20,7 +21,7 @@ export interface FooterConfig {
   resources?: FooterColumn;
 }
 
-export interface SiteThemeConfig {
+export interface SiteThemeConfig extends IThemeConfig {
   actions?: HeroProps['actions'];
   analytics?: {
     clarity?: {