feat: web highlight.js remove

apps/web/package.json

@@ -16,10 +16,11 @@
     "@ricons/fluent": "0.12.0",
     "@ricons/utils": "0.1.6",
     "dplayer": "1.27.1",
-    "highlight.js": "11.7.0",
     "identicon.js": "2.3.3",
     "react-hot-toast": "2.4.0",
-    "react-spinners": "0.13.8"
+    "react-spinners": "0.13.8",
+    "react-markdown": "8.0.6",
+    "remark-gfm": "3.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
@@ -30,6 +31,8 @@
     "typescript": "^4.9.3",
     "vite": "^4.1.0",
     "@types/dplayer": "1.25.2",
-    "@types/identicon.js": "2.3.1"
+    "@types/identicon.js": "2.3.1",
+    "rollup-plugin-visualizer": "5.9.0",
+    "vite-plugin-compression": "0.5.1"
   }
 }

apps/web/src/router/index.tsx

@@ -1,6 +1,8 @@
 import { lazy } from "react";
 import Course from "../view/Course";
-import { Login } from "../view/Login";
+import CourseDetail from "../view/CourseDetail";
+import Login from "../view/Login";
+import Subscribe from "../view/Subscribe";
 
 export interface IRouteMenuItem {
   path: string;

apps/web/src/view/Course/components/Timeline/index.tsx

@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
 import "./index.less";
 

apps/web/src/view/CourseDetail/components/Guide/index.tsx

@@ -1,29 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
-import { useMount, useScript } from "../../../../hook";
+import ReactMarkdown from "react-markdown";
-import hljs from "highlight.js";
+import remarkGfm from "remark-gfm";
-import "highlight.js/styles/atom-one-dark.css";
 
 interface IProps {
-  html: string;
+  mdText: string;
 }
 
 function Guide(props: IProps) {
-  const [html, setHtml] = useState<string>("");
+  const [md, setMD] = useState<string>("");
-
-  const highlightRender = () =>
-    document.querySelectorAll("code").forEach((block) => {
-      hljs.highlightBlock(block);
-    });
 
   useEffect(() => {
-    if (props.html) {
+    if (props.mdText) setMD(props.mdText);
-      setHtml(props.html);
+  }, [props.mdText]);
-    }
-  }, [props.html]);
-
-  useEffect(() => {
-    highlightRender();
-  }, [html]);
 
   return (
     <div
@@ -34,8 +22,36 @@ function Guide(props: IProps) {
         padding: "0 24px",
       }}
     >
-      <article
+      <ReactMarkdown
-        dangerouslySetInnerHTML={{ __html: html }}
+        children={md}
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            return !inline ? (
+              <code className={`${className} bs code`} {...props}>
+                {children}
+              </code>
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+            // return !inline && match ? (
+            //   <SyntaxHighlighter
+            //     children={String(children).replace(/\n$/, "")}
+            //     style={atomDark}
+            //     showLineNumbers
+            //     language={match[1]}
+            //     PreTag="div"
+            //     // {...props}
+            //   />
+            // ) : (
+            //   <code className={className} {...props}>
+            //     {children}
+            //   </code>
+            // );
+          },
+        }}
         className="markdown-body"
       />
     </div>

apps/web/src/view/CourseDetail/index.tsx

@@ -52,7 +52,7 @@ function CourseDetail() {
               level: 2,
               time: "",
               active: true,
-              view: <Guide html={data?.guide.guide_html} />,
+              view: <Guide mdText={data?.guide.guide_html} />,
             },
             ...processToc,
           ] as any;
@@ -64,7 +64,7 @@ function CourseDetail() {
             ),
           });
           setToc(composeToc);
-          setView(<Guide html={data?.guide.guide_html} />);
+          setView(<Guide mdText={data?.guide.guide_value} />);
         } else if (code === 40000) {
           setView(<Result code={403} />);
         }

apps/web/src/view/Login/index.tsx

@@ -11,7 +11,7 @@ const defaultForm = {
 
 const DURATION = 60; // 验证码倒计时
 
-export function Login() {
+export default function Login() {
   const [loginForm, setLoginForm] = useState(defaultForm);
   let [countdown, setCountdown] = useState(DURATION);
   const timer = useRef<any>();

apps/web/vite.config.ts

@@ -1,10 +1,21 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { visualizer } from "rollup-plugin-visualizer";
+import viteCompression from "vite-plugin-compression";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    visualizer({
+      open: true, //注意这里要设置为true，否则无效
+      gzipSize: true,
+      brotliSize: true,
+    }),
+    viteCompression(),
+  ],
   server: {
     proxy: {
       "/api": {
@@ -14,4 +25,19 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    // rollupOptions: {
+    //   output: {
+    //     manualChunks(id) {
+    //       if (id.includes("node_modules")) {
+    //         return id
+    //           .toString()
+    //           .split("node_modules/")[1]
+    //           .split("/")[0]
+    //           .toString();
+    //       }
+    //     },
+    //   },
+    // },
+  },
 });