♻️ refactor(dumi-theme): split site token and stylish

.github/ISSUE_TEMPLATE/1_bug_report.yml

@@ -1,11 +1,11 @@
-name: "🐛 反馈缺陷 Bug Report"
-description: "反馈一个问题缺陷 | Report an bug"
-title: "[Bug] "
-labels: "🐛 Bug"
+name: '🐛 反馈缺陷 Bug Report'
+description: '反馈一个问题缺陷 | Report an bug'
+title: '[Bug] '
+labels: '🐛 Bug'
 body:
   - type: dropdown
     attributes:
-      label: "💻 系统环境 | Operating System"
+      label: '💻 系统环境 | Operating System'
       options:
         - Windows
         - macOS
@@ -16,7 +16,7 @@ body:
       required: true
   - type: dropdown
     attributes:
-      label: "🌐 浏览器 | Browser"
+      label: '🌐 浏览器 | Browser'
       options:
         - Chrome
         - Edge
@@ -27,19 +27,19 @@ body:
       required: true
   - type: textarea
     attributes:
-      label: "🐛 问题描述 | Bug Description"
+      label: '🐛 问题描述 | Bug Description'
       description: A clear and concise description of the bug.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: "🚦 期望结果 | Expected Behavior"
+      label: '🚦 期望结果 | Expected Behavior'
       description: A clear and concise description of what you expected to happen.
   - type: textarea
     attributes:
-      label: "📷 复现步骤 | Recurrence Steps"
+      label: '📷 复现步骤 | Recurrence Steps'
       description: A clear and concise description of how to recurrence.
   - type: textarea
     attributes:
-      label: "📝 补充信息 | Additional Information"
+      label: '📝 补充信息 | Additional Information'
       description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.

.github/ISSUE_TEMPLATE/2_feature_request.yml

@@ -1,21 +1,21 @@
-name: "🌠 功能需求 Feature Request"
-description: "需求或建议 | Suggest an idea"
-title: "[Request] "
-labels: "🌠 Feature Request"
+name: '🌠 功能需求 Feature Request'
+description: '需求或建议 | Suggest an idea'
+title: '[Request] '
+labels: '🌠 Feature Request'
 body:
   - type: textarea
     attributes:
-      label: "🥰 需求描述 | Feature Description"
+      label: '🥰 需求描述 | Feature Description'
       description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: "🧐 解决方案 | Proposed Solution"
+      label: '🧐 解决方案 | Proposed Solution'
       description: Describe the solution you'd like in a clear and concise manner.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: "📝 补充信息 | Additional Information"
+      label: '📝 补充信息 | Additional Information'
       description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/3_question.yml

@@ -1,15 +1,15 @@
-name: "😇 疑问或帮助 Help Wanted"
-description: "疑问或需要帮助 | Need help"
-title: "[Question] "
-labels: "😇 Help Wanted"
+name: '😇 疑问或帮助 Help Wanted'
+description: '疑问或需要帮助 | Need help'
+title: '[Question] '
+labels: '😇 Help Wanted'
 body:
   - type: textarea
     attributes:
-      label: "🧐 问题描述 | Proposed Solution"
+      label: '🧐 问题描述 | Proposed Solution'
       description: A clear and concise description of the proplem.
     validations:
       required: true
   - type: textarea
     attributes:
-      label: "📝 补充信息 | Additional Information"
+      label: '📝 补充信息 | Additional Information'
       description: Add any other context about the problem here.

.github/dependabot.yml

@@ -1,17 +1,17 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: "/"
+    directory: '/'
     schedule:
       interval: monthly
-      time: "19:00"
+      time: '19:00'
       timezone: 'Asia/Shanghai'
     open-pull-requests-limit: 10
     versioning-strategy: increase
 
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
       interval: monthly
-      time: "19:00"
+      time: '19:00'
       timezone: 'Asia/Shanghai'

.github/workflows/contributor-help.yml

@@ -2,7 +2,7 @@ name: Contributor Helper
 
 on:
   # 🌏 Think about the planet! No need to update stats too frequently
-  schedule: [{cron: "0 18 * * *"}]
+  schedule: [{ cron: '0 18 * * *' }]
   # 💡 The following line lets you run workflow manually from the action tab!
   workflow_dispatch:
 jobs:

.github/workflows/issue-check-inactive.yml

@@ -2,21 +2,21 @@ name: Issue Check Inactive
 
 on:
   schedule:
-    - cron: "0 0 */15 * *"
+    - cron: '0 0 */15 * *'
 
 permissions:
   contents: read
 
 jobs:
   issue-check-inactive:
     permissions:
-      issues: write  # for actions-cool/issues-helper to update issues
-      pull-requests: write  # for actions-cool/issues-helper to update PRs
+      issues: write # for actions-cool/issues-helper to update issues
+      pull-requests: write # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: check-inactive
         uses: actions-cool/issues-helper@v3
         with:
           actions: 'check-inactive'
           inactive-label: 'Inactive'
-          inactive-day: 30
+          inactive-day: 30

.github/workflows/issue-close-require.yml

@@ -2,16 +2,16 @@ name: Issue Close Require
 
 on:
   schedule:
-    - cron: "0 0 * * *"
+    - cron: '0 0 * * *'
 
 permissions:
   contents: read
 
 jobs:
   issue-close-require:
     permissions:
-      issues: write  # for actions-cool/issues-helper to update issues
-      pull-requests: write  # for actions-cool/issues-helper to update PRs
+      issues: write # for actions-cool/issues-helper to update issues
+      pull-requests: write # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: need reproduce

.github/workflows/issue-remove-inactive.yml

@@ -12,8 +12,8 @@ permissions:
 jobs:
   issue-remove-inactive:
     permissions:
-      issues: write  # for actions-cool/issues-helper to update issues
-      pull-requests: write  # for actions-cool/issues-helper to update PRs
+      issues: write # for actions-cool/issues-helper to update issues
+      pull-requests: write # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: remove inactive
@@ -22,4 +22,4 @@ jobs:
         with:
           actions: 'remove-labels'
           issue-number: ${{ github.event.issue.number }}
-          labels: 'Inactive'
+          labels: 'Inactive'

package.json

@@ -39,13 +39,13 @@
     "doctor": "father doctor",
     "lint": "eslint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:md": "remark . -f -q",
+    "lint:style": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
     "prettier": "prettier -c --write \"**/**\"",
     "release": "semantic-release",
     "setup": "dumi setup",
     "start": "dumi dev",
-    "stylelint": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage  --passWithNoTests",
     "test:update": "vitest -u",
@@ -60,14 +60,12 @@
       "prettier --write --no-error-on-unmatched-pattern"
     ],
     "*.{js,jsx}": [
-      "eslint --fix",
-      "stylelint --fix",
-      "prettier --write"
+      "prettier --write",
+      "eslint --fix"
     ],
     "*.{ts,tsx}": [
-      "eslint --fix",
-      "stylelint --fix",
-      "prettier --parser=typescript --write"
+      "prettier --parser=typescript --write",
+      "eslint --fix"
     ]
   },
   "dependencies": {

packages/dumi-theme-lobehub/src/builtins/SourceCode/index.tsx

@@ -10,6 +10,7 @@ interface SourceCodeProps {
 
 const SourceCode: FC<SourceCodeProps> = ({ children, lang }) => {
   const theme = useTheme();
+
   return (
     <Highlighter language={lang} style={{ background: rgba(theme.colorBgLayout, 0.5) }}>
       {children}

packages/dumi-theme-lobehub/src/components/ApiHeader/index.tsx

@@ -2,7 +2,7 @@ import { Icon, Snippet } from '@lobehub/ui';
 import { Divider, Space, Typography } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Edit3, Github } from 'lucide-react';
-import { ReactNode, memo } from 'react';
+import { memo, type ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { ApiHeaderProps } from '@/index';

packages/dumi-theme-lobehub/src/components/Features/Item.tsx

@@ -21,7 +21,7 @@ const Image = memo<{ className?: string; image: string; title: string }>(
 const FeatureItem = memo<IFeature>(
   ({ imageType, row, column, hero, description, image, title, link, imageStyle, openExternal }) => {
     const rowNum = row || 7;
-    const { styles, theme } = useStyles({ rowNum, hasLink: !!link });
+    const { styles, theme } = useStyles({ rowNum, hasLink: Boolean(link) });
 
     return (
       <div

packages/dumi-theme-lobehub/src/components/Features/index.tsx

@@ -20,7 +20,7 @@ export interface FeaturesProps {
 const Features = memo<FeaturesProps>(({ items, style }) => {
   const { styles } = useStyles();
 
-  if (!Boolean(items?.length)) return null;
+  if (!items?.length) return null;
 
   return (
     <div className={styles.container} style={style}>

packages/dumi-theme-lobehub/src/components/Hero/HeroButton/index.tsx

@@ -8,6 +8,7 @@ interface HeroButtonProps {
 }
 const HeroButton: FC<HeroButtonProps> = ({ children }) => {
   const { styles } = useStyles();
+
   return (
     <Button className={styles.button} shape={'round'} size={'large'} type={'primary'}>
       {children}

packages/dumi-theme-lobehub/src/components/NativeSelect/index.tsx

@@ -62,7 +62,9 @@ const NativeSelect = memo<NativeSelectProps>(
 
     if (!open) {
       if (innerOffset !== 0) setInnerOffset(0);
+
       if (fallback) setFallback(false);
+
       if (blockSelection) setBlockSelection(false);
     }
 
@@ -132,10 +134,10 @@ const NativeSelect = memo<NativeSelectProps>(
         return () => {
           clearTimeout(selectTimeoutRef.current);
         };
-      } else {
-        allowSelectRef.current = false;
-        allowMouseUpRef.current = true;
       }
+
+      allowSelectRef.current = false;
+      allowMouseUpRef.current = true;
     }, [open]);
 
     const { label } = options[selectedIndex] || {};

packages/dumi-theme-lobehub/src/components/Toc/style.ts

@@ -3,6 +3,7 @@ import { rgba } from 'polished';
 
 export const useStyles = createStyles(({ token, stylish, prefixCls, responsive, cx, css }) => {
   const fixHeight = 36;
+
   return {
     container: css`
       position: fixed;

packages/dumi-theme-lobehub/src/layouts/DocLayout/index.tsx

@@ -8,6 +8,8 @@ import { StoreUpdater } from '@/components/StoreUpdater';
 import Docs from '@/pages/Docs';
 import Home from '@/pages/Home';
 import { isHeroPageSel, useSiteStore, useThemeStore } from '@/store';
+import customStylish from '@/styles/customStylish';
+import customToken from '@/styles/customToken';
 
 const DocLayout = memo(() => {
   const intl = useIntl();
@@ -57,7 +59,12 @@ export default memo(() => {
   return (
     <>
       <StoreUpdater />
-      <ThemeProvider cache={extractStaticStyle.cache} themeMode={themeMode}>
+      <ThemeProvider
+        cache={extractStaticStyle.cache}
+        customStylish={customStylish}
+        customToken={customToken}
+        themeMode={themeMode}
+      >
         <DocLayout />
       </ThemeProvider>
     </>

packages/dumi-theme-lobehub/src/pages/Home/index.tsx

@@ -12,6 +12,7 @@ import { siteTitleSel, useSiteStore } from '@/store';
 const Home = memo(() => {
   const siteTitle = useSiteStore(siteTitleSel);
   const { styles } = useStyles();
+
   return (
     <>
       <Helmet>

packages/dumi-theme-lobehub/src/plugin/index.ts

@@ -34,6 +34,7 @@ const SSRPlugin = (api: IApi) => {
 
   const addLinkStyle = (html: string, cssFile: string) => {
     const prefix = api.userConfig.publicPath || api.config.publicPath;
+
     return html.replace('</head>', `<link rel="stylesheet" href="${prefix + cssFile}"></head>`);
   };
 

packages/dumi-theme-lobehub/src/slots/ContentFooter/index.tsx

@@ -10,6 +10,7 @@ import Linker from './Linker';
 const ContentFooter = memo(() => {
   const { prev, next } = useSiteStore(contentBottomSel, isEqual);
   const { mobile } = useResponsive();
+
   return (
     <Flexbox
       distribution={'space-between'}

packages/dumi-theme-lobehub/src/slots/ContentTabs/index.tsx

@@ -17,7 +17,7 @@ const ContentTabs = memo<IContentTabsProps>(({ tabs, tabKey: key, onChange }) =>
   const { styles } = useStyles();
   // TODO: tab.Extra & tab.Action render
 
-  return !!tabs && Boolean(tabs?.length) ? (
+  return Boolean(tabs) && Boolean(tabs?.length) ? (
     <Tabs
       activeKey={key || 'default'}
       className={styles.cls}

packages/dumi-theme-lobehub/src/slots/ContentTabs/style.ts

@@ -4,6 +4,7 @@ export const useStyles = createStyles(({ token, prefixCls, css }) => {
   const prefix = `.${prefixCls}-tabs`;
 
   const marginBlock = 8;
+
   return {
     cls: css`
       ${prefix}-tab + ${prefix}-tab {

packages/dumi-theme-lobehub/src/slots/Features/index.tsx

@@ -7,7 +7,7 @@ import { featuresSel, useSiteStore } from '@/store';
 const Features = memo(() => {
   const features = useSiteStore(featuresSel, shallow);
 
-  if (!Boolean(features?.length)) return null;
+  if (!features?.length) return null;
 
   return <FeatureBlock items={features} style={{ margin: '0 16px' }} />;
 });

packages/dumi-theme-lobehub/src/slots/Footer/columns.tsx

@@ -48,5 +48,6 @@ export const getColumns = ({ github }: GetColumnParams) => {
         : undefined,
     ].filter(Boolean) as FooterColumnItem[],
   };
+
   return [resources, community, help, more];
 };

packages/dumi-theme-lobehub/src/slots/Footer/index.tsx

@@ -15,6 +15,7 @@ const Footer = memo(() => {
   const githubUrl = useSiteStore(githubSel);
   const { styles, theme } = useStyles();
   const { mobile } = useResponsive();
+
   if (!themeConfig.footer) return null;
 
   const footer = themeConfig.footerConfig as IFooter;