From 949c7f150d67ba982c9d826b8774a3ceb64c8385 Mon Sep 17 00:00:00 2001
From: CanisMinor <i@canisminor.cc>
Date: Mon, 18 Sep 2023 18:31:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Fix=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                  |  4 +++-
 docs/index.tsx                             |  7 ++++++-
 src/components/Markdown/HighlightStyle.tsx | 23 ++++++++--------------
 src/components/Markdown/index.tsx          | 19 ++++++++++--------
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index e80497a..ed1a752 100644
--- a/README.md
+++ b/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
diff --git a/docs/index.tsx b/docs/index.tsx
index 9afcaba..00bff17 100644
--- a/docs/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/Markdown/HighlightStyle.tsx b/src/components/Markdown/HighlightStyle.tsx
index 1de4297..8694a43 100644
--- a/src/components/Markdown/HighlightStyle.tsx
+++ b/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',
+      })}
+    />
   );
 });
 
diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx
index d745929..8a91c53 100644
--- a/src/components/Markdown/index.tsx
+++ b/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>
   );
 });