Merge pull request #2 from aisen60/v1.2.0

feat: v1.2.0
aisen60 · Jan 3, 2025 · c09db87 · c09db87
2 parents 6eacd20 + 558be78
commit c09db87
Show file tree

Hide file tree

Showing 26 changed files with 3,556 additions and 651 deletions.
diff --git a/index.html b/index.html
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Markdown Playground - Aisen60</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="https://caixusheng.com/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Markdown Playground - Aisen60</title>
-  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css" integrity="sha512-BrOPA520KmDMqieeM7XFe6a3u3Sb3F1JBaQnrIAmWg3EYrciJ+Qqe6ZcKCdfPv26rGcgTrJnZ/IdQEct8h3Zhw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -20,18 +20,10 @@
     "bytemd": "^1.21.0",
     "fflate": "^0.8.2",
     "file-saver": "^2.0.5",
-    "github-markdown-css": "^5.8.1",
-    "highlight.js": "^11.11.1",
-    "highlightjs-line-numbers.js": "^2.9.0",
     "katex": "^0.16.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hot-toast": "^2.4.1",
-    "rehype-highlight-code-lines": "^1.0.4",
-    "remark": "^15.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-stringify": "^11.0.0",
-    "unist-util-visit": "^5.0.0"
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -43,6 +35,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "sass-embedded": "^1.83.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.6"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,8 +2,9 @@ import { useState, useEffect, useRef } from "react";
 import { Toaster } from "react-hot-toast";
 import Header from "@/components/Header";
 import Main from "@/components/Main";
+import { useColorMode } from "@/hooks";
 import { utoa, atou } from "@/utils";
-import "@/app.css";
+import "@/styles/index.scss";
 
 import type { AppData } from "./types";
 
@@ -12,12 +13,18 @@ const DEFAULT_TITLE = "Markdown Playground";
 const DEFAULT_CONTENT = "";
 
 function App() {
+  const { colorMode, toggleColorMode } = useColorMode();
+
   const [title, setTitle] = useState(DEFAULT_TITLE);
 
   const [content, setContent] = useState(DEFAULT_CONTENT);
 
   const isInitialMount = useRef(true);
 
+  const onThemeChange = () => {
+    toggleColorMode();
+  };
+
   const onTitleChange = (value: string) => {
     setTitle(value);
   };
@@ -26,6 +33,22 @@ function App() {
     setContent(value);
   };
 
+  useEffect(() => {
+    const htmlNode = document.querySelector("html") as HTMLHtmlElement;
+    const editor = document.querySelector(".CodeMirror") as HTMLDivElement;
+
+    if (colorMode === "light") {
+      htmlNode.classList.remove("dark-theme");
+      editor.classList.remove("cm-s-dark");
+      editor.classList.add("cm-s-light");
+    }
+    if (colorMode === "dark") {
+      htmlNode.classList.add("dark-theme");
+      editor.classList.remove("cm-s-light");
+      editor.classList.add("cm-s-dark");
+    }
+  }, [colorMode]);
+
   useEffect(() => {
     if (!isInitialMount.current) {
       const appData: AppData = {
@@ -62,13 +85,16 @@ function App() {
     <>
       <Toaster
         toastOptions={{
-          style: {
-            borderRadius: "20px",
-            fontSize: "14px",
-          },
+          className: "md-toast",
         }}
       />
-      <Header title={title} content={content} onTitleChange={onTitleChange} />
+      <Header
+        colorMode={colorMode}
+        title={title}
+        content={content}
+        onTitleChange={onTitleChange}
+        onThemeChange={onThemeChange}
+      />
       <Main content={content} onContentChange={onContentChange} />
     </>
   );

diff --git a/src/app.css b/src/app.css
diff --git a/src/components/Header/Download.tsx b/src/components/Header/Download.tsx
@@ -16,7 +16,7 @@ const Download: React.FC<DownloadProps> = (props) => {
   };
 
   return (
-    <button title="下载文件" onClick={onDownload}>
+    <button title="下载文件" className="download-btn" onClick={onDownload}>
       <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
         <g>
           <rect x="4" y="18" width="16" height="2" rx="1" ry="1" />

diff --git a/src/components/Header/Share.tsx b/src/components/Header/Share.tsx
@@ -9,7 +9,7 @@ const Share: React.FC = () => {
   };
 
   return (
-    <button title="复制分享链接" onClick={copyLink}>
+    <button title="复制分享链接" className="share-btn" onClick={copyLink}>
       <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
         <g
           fill="none"

diff --git a/src/components/Header/Theme.tsx b/src/components/Header/Theme.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import toast from "react-hot-toast";
+
+import type { ThemeProps } from "@/types";
+
+const Share: React.FC<ThemeProps> = (props) => {
+  const { colorMode, onThemeChange } = props;
+
+  const title = `切换到${colorMode === "light" ? "深色" : "亮色"}主题`;
+
+  const changeTheme = () => {
+    toast.success(`已切换到${colorMode === "light" ? "深色" : "亮色"}主题`);
+    onThemeChange();
+  };
+
+  return (
+    <button title={title} className="color-mode-btn" onClick={changeTheme}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="light"
+      >
+        <path
+          fill="currentColor"
+          d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
+        ></path>
+        <path
+          fill="currentColor"
+          d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
+        ></path>
+      </svg>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="dark"
+      >
+        <path
+          fill="currentColor"
+          d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
+        ></path>
+      </svg>
+    </button>
+  );
+};
+
+export default Share;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,11 +1,12 @@
 import React from "react";
+import Theme from "./Theme";
 import Share from "./Share";
 import Download from "./Download";
 
 import type { HeaderProps } from "@/types";
 
 const Header: React.FC<HeaderProps> = (props) => {
-  const { title, content, onTitleChange } = props;
+  const { colorMode, title, content, onTitleChange, onThemeChange } = props;
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = (event.target as HTMLInputElement).value;
@@ -16,6 +17,7 @@ const Header: React.FC<HeaderProps> = (props) => {
     <nav className="nav">
       <input type="text" className="input" value={title} onChange={onChange} />
       <div className="links">
+        <Theme colorMode={colorMode} onThemeChange={onThemeChange} />
         <Share />
         <Download title={title} content={content} />
       </div>