💄 style: Update Markdown style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi-theme-lobehub",
-  "version": "1.7.7",
+  "version": "1.5.0",
   "description": "dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on @lobehub/ui",
   "keywords": [
     "lobehub",
@@ -69,52 +69,51 @@
     ]
   },
   "dependencies": {
-    "@floating-ui/react": "^0",
-    "@giscus/react": "^2",
-    "@lobehub/ui": "^1",
-    "ahooks": "^3",
-    "antd": "^5",
-    "antd-style": "^3",
-    "chalk": "^4",
-    "fast-deep-equal": "^3",
-    "history": "^5",
-    "lodash-es": "^4",
-    "lucide-react": "latest",
-    "polished": "^4",
-    "rc-footer": "^0",
-    "react-layout-kit": "^1",
-    "styled-components": "latest",
-    "use-merge-value": "^1",
-    "zustand": "^4"
+    "@floating-ui/react": "^0.26.17",
+    "@giscus/react": "^2.4.0",
+    "@lobehub/ui": "^1.142.4",
+    "ahooks": "^3.8.0",
+    "antd": "^5.18.2",
+    "antd-style": "^3.6.2",
+    "chalk": "^4.1.2",
+    "fast-deep-equal": "^3.1.3",
+    "history": "^5.3.0",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.395.0",
+    "polished": "^4.3.1",
+    "rc-footer": "^0.6.8",
+    "react-layout-kit": "^1.9.0",
+    "use-merge-value": "^1.2.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.0.0",
-    "@lobehub/lint": "latest",
-    "@types/lodash-es": "^4",
-    "@types/node": "^20",
-    "@types/react": "18.2.40",
-    "@types/react-dom": "^18",
-    "@vitest/coverage-v8": "latest",
-    "clean-pkg-json": "^1",
-    "commitlint": "^19.0.0",
-    "dumi": "^2",
-    "dumi-assets-types": "^1",
-    "eslint": "^8",
-    "father": "4.3.1",
-    "father-plugin-dumi-theme": "latest",
-    "husky": "^9.0.0",
-    "jsdom": "^24.0.0",
-    "leva": "^0",
-    "lint-staged": "^15.0.0",
-    "prettier": "^3",
-    "react": "^18",
-    "react-dom": "^18",
-    "remark": "^14",
-    "remark-cli": "^11",
-    "semantic-release": "^21",
-    "stylelint": "^16.0.0",
-    "typescript": "^5",
-    "vitest": "latest"
+    "@lobehub/lint": "^1.23.4",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "clean-pkg-json": "^1.2.0",
+    "commitlint": "^17.8.1",
+    "dumi": "2.2.17",
+    "dumi-assets-types": "^1.0.1",
+    "eslint": "^8.57.0",
+    "father": "^4.4.4",
+    "father-plugin-dumi-theme": "1.0.0-rc.1",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "leva": "^0.9.35",
+    "lint-staged": "^13.3.0",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remark": "^14.0.3",
+    "remark-cli": "^11.0.0",
+    "semantic-release": "^21.1.2",
+    "stylelint": "^15.11.0",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "antd": ">=5",

src/components/ApiHeader/index.tsx

@@ -1,4 +1,4 @@
-import { Icon, Snippet } from '@lobehub/ui';
+import { Icon, Markdown, Snippet } from '@lobehub/ui';
 import { Divider, Space, Typography } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Edit3, Github } from 'lucide-react';
@@ -106,15 +106,9 @@ export const ApiHeader = memo<ApiTitleProps>(
       : `import { ${componentName} } from '${pkg}';`;
 
     return (
-      <Flexbox id={'api-header'}>
+      <Flexbox id={'api-header'} style={{ marginBottom: 24 }}>
         <Typography.Title className={styles.title}>{title}</Typography.Title>
-        {description && (
-          <div>
-            <Typography.Text className={styles.desc} type={'secondary'}>
-              {description}
-            </Typography.Text>
-          </div>
-        )}
+        {description && <Markdown className={styles.desc}>{description}</Markdown>}
         {!isDoc && (
           <Flexbox gap={mobile ? 16 : 24} style={{ marginTop: 16 }}>
             {componentName && (

src/components/NativeSelect/SelectItem/index.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, memo } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
 import { useStyles } from './style';
 
@@ -12,8 +12,8 @@ interface SelectItemProps {
   value: any;
 }
 
-const SelectItem = memo<SelectItemProps>(
-  forwardRef(({ value, label, prefixCls, isSelected, isActive, disabled, ...props }, reference) => {
+const SelectItem = forwardRef<any, SelectItemProps>(
+  ({ value, label, prefixCls, isSelected, isActive, disabled, ...props }, reference) => {
     const { styles, cx } = useStyles(prefixCls);
 
     return (
@@ -34,7 +34,7 @@ const SelectItem = memo<SelectItemProps>(
         {label}
       </button>
     );
-  }),
+  },
 );
 
 export default SelectItem;

src/slots/Content/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -22,16 +23,15 @@ const Content = memo<DivProps>(({ children, ...props }) => {
 
   return (
     <Flexbox gap={mobile ? 0 : 24} width={'100%'} {...props}>
-      <div style={{ height: 0 }} />
       <div className={cx('dumi-antd-style-content', styles.content)}>
-        <Skeleton active loading={loading} paragraph style={{ minHeight: '50vh' }} />
-        <div
+        <Skeleton active loading={loading} paragraph />
+        <Typography
           style={{
             display: loading ? 'none' : undefined,
           }}
         >
           {children}
-        </div>
+        </Typography>
       </div>
       <ContentFooter />
     </Flexbox>

src/slots/Content/style.ts

@@ -1,84 +1,27 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(
-  ({ cx, token, responsive, css, stylish }, isPure: boolean) => ({
-    content: cx(
-      !isPure &&
-        css`
-          padding: 24px 48px;
-          background-color: ${token.colorBgContainer};
-          border-radius: 10px;
-
-          ${responsive.mobile} {
-            padding: 8px 16px;
-            border-radius: 0;
-          }
-        `,
+export const useStyles = createStyles(({ cx, token, responsive, css }, isPure: boolean) => ({
+  content: cx(
+    !isPure &&
       css`
-        flex: 1;
-        box-sizing: border-box;
-        width: 100%;
-        min-height: 400px;
-
-        &:has([data-page-tabs='true']) {
-          padding-top: 8px;
-        }
-
-        .markdown {
-          ${stylish.markdown};
-          h2,
-          h3 {
-            &[id^='version'] {
-              color: ${token.colorText};
-            }
-          }
-
-          h1,
-          h2,
-          h3,
-          h4,
-          h5,
-          h6 {
-            transition: all 400ms ${token.motionEaseOut};
-
-            > a[aria-hidden]:first-child {
-              float: left;
-
-              width: 20px;
-              margin-inline-start: -24px;
-              padding-inline-end: 4px;
-
-              font-size: inherit;
-              line-height: inherit;
-              color: ${token.colorText};
-              text-align: right;
-
-              &:hover {
-                border: 0;
-              }
-
-              > .icon-link::before {
-                content: '#';
-                font-size: inherit;
-                color: ${token.colorTextTertiary};
-              }
-            }
-
-            &:hover {
-              color: ${token.colorText};
-            }
-
-            &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
-              visibility: hidden;
-            }
-          }
+        padding: 24px 48px;
+        background-color: ${token.colorBgContainer};
+        border-radius: 10px;
 
-          ol,
-          ul {
-            padding-inline-start: 18px;
-          }
+        ${responsive.mobile} {
+          padding: 8px 16px;
+          border-radius: 0;
         }
       `,
-    ),
-  }),
-);
+    css`
+      flex: 1;
+      box-sizing: border-box;
+      width: 100%;
+      min-height: 400px;
+
+      &:has([data-page-tabs='true']) {
+        padding-top: 8px;
+      }
+    `,
+  ),
+}));

src/slots/Features/index.tsx

@@ -11,7 +11,7 @@ const Features = memo(() => {
 
   if (!features?.length) return;
 
-  return <F items={features} style={{ margin: '0 16px', maxWidth: theme.contentMaxWidth }} />;
+  return <F items={features} maxWidth={theme.contentMaxWidth} style={{ margin: '0 16px' }} />;
 });
 
 export default Features;

src/slots/Navbar/index.tsx

@@ -1,6 +1,6 @@
 import { TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Link } from 'dumi';
+import { Link, history } from 'dumi';
 import NavbarExtra from 'dumi/theme-default/slots/NavbarExtra';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
@@ -45,6 +45,13 @@ const Navbar = memo(() => {
             </Link>
           ),
         }))}
+        onChange={(path) => {
+          const url = nav.find((index) => index.activePath === path || index.link === path)?.link;
+
+          if (!url) return;
+
+          history.push(url);
+        }}
       />
       <NavbarExtra />
     </>