refactor: use runtime mermaid

README.en.md

@@ -19,7 +19,7 @@ Based on [hexo-theme-reimu](https://github.com/D-Sketon/hexo-theme-reimu) migrat
 ## Lighthouse
 
 <p align="center">
-  <a href="https://pagespeed.web.dev/analysis/https-d-sketon-github-io-astro-theme-reimu/l2ptsmftie?form_factor=desktop">
+  <a href="https://pagespeed.web.dev/analysis/https-d-sketon-github-io-astro-theme-reimu/ur4yncrgnm?form_factor=desktop">
     <img width="710" alt="astro-theme-reimu Lighthouse Score" src="https://fastly.jsdelivr.net/gh/D-Sketon/astro-theme-reimu/psi.svg">
   <a>
 </p>
@@ -33,6 +33,7 @@ Based on [hexo-theme-reimu](https://github.com/D-Sketon/hexo-theme-reimu) migrat
 │   │   └── banner-800w.webp
 │   │   └── banner-600w.webp
 │   │   └── favicon.ico
+│   │   └── reimu.png
 │   │   └── taichi.png
 │   └── robots.txt
 ├── src/
@@ -63,8 +64,6 @@ git clone https://github.com/D-Sketon/astro-theme-reimu.git
 cd ./astro-theme-reimu
 
 pnpm i
-pnpm npx playwright install
-
 pnpm run dev
 ```
 

README.md

@@ -19,7 +19,7 @@
 ## Lighthouse
 
 <p align="center">
-  <a href="https://pagespeed.web.dev/analysis/https-d-sketon-github-io-astro-theme-reimu/l2ptsmftie?form_factor=desktop">
+  <a href="https://pagespeed.web.dev/analysis/https-d-sketon-github-io-astro-theme-reimu/ur4yncrgnm?form_factor=desktop">
     <img width="710" alt="astro-theme-reimu Lighthouse Score" src="https://fastly.jsdelivr.net/gh/D-Sketon/astro-theme-reimu/psi.svg">
   <a>
 </p>
@@ -33,6 +33,7 @@
 │   │   └── banner-800w.webp
 │   │   └── banner-600w.webp
 │   │   └── favicon.ico
+│   │   └── reimu.png
 │   │   └── taichi.png
 │   └── robots.txt
 ├── src/
@@ -63,8 +64,6 @@ git clone https://github.com/D-Sketon/astro-theme-reimu.git
 cd ./astro-theme-reimu
 
 pnpm i
-pnpm npx playwright install
-
 pnpm run dev
 ```
 

astro.config.mjs

@@ -7,13 +7,13 @@ import icon from "astro-icon";
 import react from "@astrojs/react";
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import remarkMermaid from 'remark-mermaidjs';
+import remarkMermaidToHtml from './src/plugins/remarkMermaidToHtml.mjs';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://example.com', // should be same as `site.url` in src/config.yml
   markdown: {
-    remarkPlugins: [remarkMath, remarkMermaid],
+    remarkPlugins: [remarkMath, remarkMermaidToHtml],
     rehypePlugins: [rehypeKatex],
     syntaxHighlight: false
   },

package.json

@@ -27,13 +27,12 @@
     "fuse.js": "^7.0.0",
     "katex": "^0.16.11",
     "lozad": "^1.16.0",
-    "mermaid": "^10.9.1",
-    "playwright": "^1.47.1",
+    "mdast-util-to-hast": "^13.2.0",
+    "mermaid": "^10.9.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
-    "remark-mermaidjs": "^6.0.0",
     "typescript": "^5.6.3",
     "usehooks-ts": "^3.1.0"
   },
@@ -45,10 +44,16 @@
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
+    "hast-util-to-html": "^9.0.3",
     "js-yaml": "^4.1.0",
+    "mdast-util-to-hast": "^13.2.0",
     "postcss-preset-env": "^10.0.7",
     "reading-time": "^1.5.0",
-    "stylus": "^0.64.0"
+    "stylus": "^0.64.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   },
   "packageManager": "pnpm@9.6.0"
 }

src/components/ThemeBtn.tsx

@@ -13,8 +13,15 @@ export default function ThemeToggle() {
     return <></>;
   }
 
-  const handleChange = (e: Theme) => {
-    setTheme(e);
+  const handleChange = (theme: Theme) => {
+    setTheme(theme);
+    document.body.dispatchEvent(
+      new CustomEvent("theme-set", {
+        detail: {
+          theme,
+        },
+      })
+    );
   };
   return (
     <span