feat(markdown): support markdown & fix theme error

crazy-thursday · Dec 16, 2022 · a15facb · a15facb
1 parent 04dedbe
commit a15facb
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 50 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -29,6 +29,8 @@
     "react": "^18.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.0.0",
+    "react-markdown": "^8.0.4",
+    "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.0.24",
     "vue": "^3.2.30"
   },

diff --git a/website/src/components/KFC.tsx b/website/src/components/KFC.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource react */
-import { FC, useEffect, useState, useMemo, useCallback, useRef } from 'react'
-import useKFC, { useParseSlogen } from '@crazy-thursday/use-kfc'
+import { FC, useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import useKFC, { useParseSlogen } from '@crazy-thursday/use-kfc';
 import {
   ChakraProvider,
   Button,
@@ -12,53 +12,61 @@ import {
   AlertDialogContent,
   AlertDialogFooter,
   AlertDialogOverlay,
-  useToast
-} from '@chakra-ui/react'
-import Copy from 'react-copy-to-clipboard'
+  useToast,
+  extendTheme
+} from '@chakra-ui/react';
+import Copy from 'react-copy-to-clipboard';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 // @ts-ignore
-import slogenList from '@crazy-thursday/use-kfc/slogen'
+import slogenList from '@crazy-thursday/use-kfc/slogen';
 
 const KFC: FC = () => {
-  const toast = useToast()
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const leastDestructiveRef = useRef()
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const leastDestructiveRef = useRef();
   const [themeMode, changeThemeMode] = useState<string>(
-    localStorage.getItem('theme')
-  )
-  const [refreshSignal, setRefreshSignal] = useState<number>(Date.now())
-  const list = useParseSlogen(slogenList)
+    localStorage.getItem('theme') ?? 'system'
+  );
+  const [refreshSignal, setRefreshSignal] = useState<number>(Date.now());
+  const list = useParseSlogen(slogenList);
   const { slogen } = useKFC<number>({
     slogenList: list,
     skipDayCheck: true,
     refreshSignal
-  })
+  });
 
   useEffect(() => {
     window.addEventListener('theme-change', (e) =>
       changeThemeMode((e as CustomEvent).detail as string)
-    )
-  }, [])
+    );
+  }, []);
 
   const showSlogenModal = useCallback(() => {
-    onOpen()
-  }, [slogen])
+    onOpen();
+  }, [slogen]);
 
   const handleCopy = useCallback(() => {
     toast({
       status: 'success',
       title: '复制成功! ',
       duration: 500,
       position: 'top'
-    })
-  }, [])
+    });
+  }, []);
 
   const ModeWrapper = useMemo(() => {
-    return themeMode === 'dark' ? DarkMode : LightMode
-  }, [themeMode])
+    return themeMode === 'dark' ? DarkMode : LightMode;
+  }, [themeMode]);
 
   return (
     <div className="absolute z-10 top-24 md:top-56 left-1/2 -translate-x-1/2 container min-h-max max-h-[35vh] text-center">
-      <ChakraProvider>
+      <ChakraProvider
+        theme={extendTheme({
+          initialColorMode: themeMode,
+          useSystemColorMode: false
+        })}
+      >
         <ModeWrapper>
           <Button colorScheme="purple" onClick={() => showSlogenModal()}>
             随机生成 KFC Slogen
@@ -67,15 +75,17 @@ const KFC: FC = () => {
             isOpen={isOpen}
             leastDestructiveRef={leastDestructiveRef}
             onClose={() => {
-              onClose()
-              setRefreshSignal(Date.now())
+              onClose();
+              setRefreshSignal(Date.now());
             }}
           >
             <AlertDialogOverlay />
             <AlertDialogContent h={300}>
               <AlertDialogBody pt={4} maxH={60} overflow="auto">
                 <pre className="whitespace-pre-wrap break-words text-[#242424]/90 dark:text-white/90">
-                  {slogen}
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {slogen}
+                  </ReactMarkdown>
                 </pre>
               </AlertDialogBody>
               <AlertDialogFooter>
@@ -100,7 +110,7 @@ const KFC: FC = () => {
         </ModeWrapper>
       </ChakraProvider>
     </div>
-  )
-}
+  );
+};
 
-export default KFC
+export default KFC;
diff --git a/website/src/components/Theme.tsx b/website/src/components/Theme.tsx
@@ -1,38 +1,44 @@
-import type { FC } from 'react'
-import { useState, useEffect, useCallback } from 'react'
-import { Sun, Moon } from './Icons'
+import type { FC } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { Sun, Moon } from './Icons';
 
-import 'src/styles/index.less'
+import 'src/styles/index.less';
 
 const ThemeToggle: FC = () => {
   const [theme, setTheme] = useState(() => {
     if (import.meta.env.SSR) {
-      return undefined
+      return undefined;
     }
     if (typeof localStorage !== undefined && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme')
+      return localStorage.getItem('theme');
     }
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark'
+      return 'dark';
     }
-    return 'light'
-  })
+    return 'light';
+  });
 
   useEffect(() => {
-    const root = document.documentElement
+    const root = document.documentElement;
     if (theme === 'light') {
-      root.removeAttribute('data-mode')
+      root.setAttribute('data-mode', 'light');
+      root.setAttribute('data-theme', 'light');
+      root.style.colorScheme = 'light';
     } else {
-      root.setAttribute('data-mode', 'dark')
+      root.setAttribute('data-mode', 'dark');
+      root.setAttribute('data-theme', 'dark');
+      root.style.colorScheme = 'dark';
     }
-  }, [theme])
+  }, [theme]);
 
   const handleToggleTheme = useCallback(() => {
-    const nextTheme = theme === 'light' ? 'dark' : 'light'
-    localStorage.setItem('theme', nextTheme)
-    window.dispatchEvent(new CustomEvent('theme-change', { detail: nextTheme }))
-    setTheme(nextTheme)
-  }, [theme])
+    const nextTheme = theme === 'light' ? 'dark' : 'light';
+    localStorage.setItem('theme', nextTheme);
+    window.dispatchEvent(
+      new CustomEvent('theme-change', { detail: nextTheme })
+    );
+    setTheme(nextTheme);
+  }, [theme]);
 
   return (
     <button
@@ -47,7 +53,7 @@ const ThemeToggle: FC = () => {
         <Moon className="absolute top-2/4 -translate-y-2/4 left-px moon text-lg" />
       </span>
     </button>
-  )
-}
+  );
+};
 
-export default ThemeToggle
+export default ThemeToggle;