💄 style: Fix style

README.md

@@ -82,7 +82,7 @@ Or clone it for local development:
 
 ```bash
 $ git clone https://github.com/lobehub/lobe-readme-wizard.git
-$ cd lobe-chat
+$ cd lobe-readme-wizard
 $ bun install
 $ bun dev
 ```
@@ -128,6 +128,8 @@ Contributions of all types are more than welcome, if you are interested in contr
 Copyright © 2023 [LobeHub][profile-link]. <br />
 This project is [MIT](./LICENSE) licensed.
 
+> _Generate by [🧙‍♂️ Readme Wizard](https://github.com/lobehub/lobe-readme-wizard 'Generate lobe style product README by MAGIC')_
+
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-black?style=flat-square

docs/index.tsx

@@ -1,10 +1,15 @@
 import { ReadmeHero } from '@lobehub/readme-wizard';
+import { Button } from 'antd';
+import { Link } from 'dumi';
 import { Center } from 'react-layout-kit';
 
 export default () => {
   return (
-    <Center gap={16} style={{ marginTop: '-8em', maxWidth: 960 }}>
+    <Center gap={16} style={{ marginTop: '-6em', maxWidth: 960 }}>
       <ReadmeHero />
+      <Link to={'/components/readme-hero'}>
+        <Button size={'large'}>Find more MAGIC 🔮</Button>
+      </Link>
     </Center>
   );
 };

src/components/Markdown/HighlightStyle.tsx

@@ -3,23 +3,16 @@ import { useThemeMode } from 'antd-style';
 import { memo } from 'react';
 
 const HighlightStyle = memo(() => {
-  const { browserPrefers, themeMode } = useThemeMode();
-
-  const isDarkMode = themeMode === 'auto' ? browserPrefers === 'dark' : themeMode === 'dark';
+  const { isDarkMode } = useThemeMode();
 
   return (
-    <>
-      <FontLoader
-        url={genCdnUrl({ path: 'github-markdown.css', pkg: 'github-markdown-css', version: '5' })}
-      />
-      <FontLoader
-        url={genCdnUrl({
-          path: isDarkMode ? 'github-dark.css' : 'github.css',
-          pkg: 'highlight.js',
-          version: '11',
-        })}
-      />
-    </>
+    <FontLoader
+      url={genCdnUrl({
+        path: isDarkMode ? 'styles/github-dark.css' : 'styles/github.css',
+        pkg: 'highlight.js',
+        version: '11',
+      })}
+    />
   );
 });
 

src/components/Markdown/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from 'antd';
 import { CSSProperties, memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
@@ -23,14 +24,16 @@ const Markdown = memo<MarkdownProps>(({ children, className, style, ...props })
   return (
     <article className={cx(styles.container, className)} style={style}>
       <HighlightStyle />
-      <ReactMarkdown
-        className={cx(styles.markdown, styles.scheme)}
-        rehypePlugins={rehypePlugins}
-        remarkPlugins={remarkPlugins}
-        {...props}
-      >
-        {children}
-      </ReactMarkdown>
+      <Typography>
+        <ReactMarkdown
+          className={cx(styles.markdown, styles.scheme)}
+          rehypePlugins={rehypePlugins}
+          remarkPlugins={remarkPlugins}
+          {...props}
+        >
+          {children}
+        </ReactMarkdown>
+      </Typography>
     </article>
   );
 });