From 3879fc0c4c7ed60d7302e40a947540356c3a5617 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Sun, 20 Oct 2024 22:18:04 +0800 Subject: [PATCH] refactor: use runtime mermaid --- README.en.md | 5 +- README.md | 5 +- astro.config.mjs | 4 +- package.json | 13 ++-- pnpm-lock.yaml | 82 ++++------------------ src/components/ThemeBtn.tsx | 11 ++- src/pages/blog/[...slug].astro | 104 +++++++++++++++++++++++++++- src/plugins/remarkMermaidToHtml.mjs | 22 ++++++ 8 files changed, 163 insertions(+), 83 deletions(-) create mode 100644 src/plugins/remarkMermaidToHtml.mjs diff --git a/README.en.md b/README.en.md index 7fbcaa3..90edd03 100644 --- a/README.en.md +++ b/README.en.md @@ -19,7 +19,7 @@ Based on [hexo-theme-reimu](https://github.com/D-Sketon/hexo-theme-reimu) migrat ## Lighthouse

- + astro-theme-reimu Lighthouse Score

@@ -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 ``` diff --git a/README.md b/README.md index 910065c..28242e9 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ ## Lighthouse

- + astro-theme-reimu Lighthouse Score

@@ -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 ``` diff --git a/astro.config.mjs b/astro.config.mjs index 25485f9..92aee0a 100644 --- a/astro.config.mjs +++ b/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 }, diff --git a/package.json b/package.json index 8acc0f3..fd2f02d 100644 --- a/package.json +++ b/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" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7302126..d92d0f9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,12 +53,12 @@ importers: lozad: specifier: ^1.16.0 version: 1.16.0 + mdast-util-to-hast: + specifier: ^13.2.0 + version: 13.2.0 mermaid: - specifier: ^10.9.1 - version: 10.9.1 - playwright: - specifier: ^1.47.1 - version: 1.47.1 + specifier: ^10.9.2 + version: 10.9.2 react: specifier: ^18.3.1 version: 18.3.1 @@ -71,9 +71,6 @@ importers: remark-math: specifier: ^6.0.0 version: 6.0.0 - remark-mermaidjs: - specifier: ^6.0.0 - version: 6.0.0 typescript: specifier: ^5.6.3 version: 5.6.3 @@ -102,6 +99,9 @@ importers: cssnano: specifier: ^7.0.6 version: 7.0.6(postcss@8.4.47) + hast-util-to-html: + specifier: ^9.0.3 + version: 9.0.3 js-yaml: specifier: ^4.1.0 version: 4.1.0 @@ -114,6 +114,9 @@ importers: stylus: specifier: ^0.64.0 version: 0.64.0 + unist-util-visit: + specifier: ^5.0.0 + version: 5.0.0 packages: @@ -749,10 +752,6 @@ packages: '@expressive-code/plugin-text-markers@0.37.1': resolution: {integrity: sha512-AjZG/SyE41uWcpAae0w9DVtSii/YkdhOsjl6godLsI8vRGBdUdYvgoCebjb33gySa7g+9NcWxGp3oEKCBut1wA==} - '@fortawesome/fontawesome-free@6.6.0': - resolution: {integrity: sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==} - engines: {node: '>=6'} - '@iconify-json/tabler@1.2.5': resolution: {integrity: sha512-BDDLgDCbJ2btwi6cPmBL04QyPyNmWy6H13ynUAX48xxpxqUuG+hT+yrqL+RCugFimrvuhcecbSfEKnFc0BW1Ng==} @@ -1866,11 +1865,6 @@ packages: resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==} engines: {node: '>= 8'} - fsevents@2.3.2: - resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} - engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} - os: [darwin] - fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -2263,11 +2257,8 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - mermaid-isomorphic@2.2.1: - resolution: {integrity: sha512-OPxQsUL2TIlAfC3ExhI/mORzigTbUOqYtqUGUECSKevGCSf/+QEwq78MRZWG1PpmTkl2ORoK8Yy5WkqqTqywMg==} - - mermaid@10.9.1: - resolution: {integrity: sha512-Mx45Obds5W1UkW1nv/7dHRsbfMM1aOKA2+Pxs/IGHNonygDHwmng8xTHyS9z4KWVi0rbko8gjiBmuwwXQ7tiNA==} + mermaid@10.9.2: + resolution: {integrity: sha512-UkZyMSuIYcI1Q0H+2pv/5CiY84sOwQ2XlKoDZMl9Y/MtrLEtxQtyA6LWGkMxnZxj0dJqI+7nw51bYjNnrbdFsQ==} micromark-core-commonmark@1.1.0: resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==} @@ -2625,16 +2616,6 @@ packages: pkg-types@1.1.3: resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==} - playwright-core@1.47.1: - resolution: {integrity: sha512-i1iyJdLftqtt51mEk6AhYFaAJCDx0xQ/O5NU8EKaWFgMjItPVma542Nh/Aq8aLCjIJSzjaiEQGW/nyqLkGF1OQ==} - engines: {node: '>=18'} - hasBin: true - - playwright@1.47.1: - resolution: {integrity: sha512-SUEKi6947IqYbKxRiqnbUobVZY4bF1uu+ZnZNJX9DfU1tlf2UhWfvVjLf01pQx9URsOr18bFVUKXmanYWhbfkw==} - engines: {node: '>=18'} - hasBin: true - postcss-attribute-case-insensitive@7.0.0: resolution: {integrity: sha512-ETMUHIw67Kyv9Q81nden/NuJbRh+4/S963giXpfSLd5eaKK8kd1UdAHMVRV/NG/w/N6Cq8B0qZIZbZZWU/67+A==} engines: {node: '>=18'} @@ -3040,9 +3021,6 @@ packages: remark-mdx@3.0.1: resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==} - remark-mermaidjs@6.0.0: - resolution: {integrity: sha512-U7nJ8oJGhLPHfMvlmE+8bw57qp++hEygwSdANOHGmqg3V4uGUz8nnOwa1oWf6kwOrG7jf9gXllD+rWvf5mHzBw==} - remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} @@ -4189,8 +4167,6 @@ snapshots: dependencies: '@expressive-code/core': 0.37.1 - '@fortawesome/fontawesome-free@6.6.0': {} - '@iconify-json/tabler@1.2.5': dependencies: '@iconify/types': 2.0.0 @@ -5416,9 +5392,6 @@ snapshots: dependencies: minipass: 3.3.6 - fsevents@2.3.2: - optional: true - fsevents@2.3.3: optional: true @@ -6028,15 +6001,7 @@ snapshots: merge2@1.4.1: {} - mermaid-isomorphic@2.2.1: - dependencies: - '@fortawesome/fontawesome-free': 6.6.0 - mermaid: 10.9.1 - playwright-core: 1.47.1 - transitivePeerDependencies: - - supports-color - - mermaid@10.9.1: + mermaid@10.9.2: dependencies: '@braintree/sanitize-url': 6.0.4 '@types/d3-scale': 4.0.8 @@ -6652,14 +6617,6 @@ snapshots: mlly: 1.7.1 pathe: 1.1.2 - playwright-core@1.47.1: {} - - playwright@1.47.1: - dependencies: - playwright-core: 1.47.1 - optionalDependencies: - fsevents: 2.3.2 - postcss-attribute-case-insensitive@7.0.0(postcss@8.4.47): dependencies: postcss: 8.4.47 @@ -7149,17 +7106,6 @@ snapshots: transitivePeerDependencies: - supports-color - remark-mermaidjs@6.0.0: - dependencies: - '@types/mdast': 4.0.4 - hast-util-from-html-isomorphic: 2.0.0 - mermaid-isomorphic: 2.2.1 - unified: 11.0.5 - unist-util-visit-parents: 6.0.1 - vfile: 6.0.3 - transitivePeerDependencies: - - supports-color - remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 diff --git a/src/components/ThemeBtn.tsx b/src/components/ThemeBtn.tsx index 80be88b..2601b1b 100644 --- a/src/components/ThemeBtn.tsx +++ b/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 ( + @@ -46,3 +46,105 @@ const { Content } = await post.render(); baguetteBox.run(".article-entry"); }); + + diff --git a/src/plugins/remarkMermaidToHtml.mjs b/src/plugins/remarkMermaidToHtml.mjs new file mode 100644 index 0000000..2cb3a32 --- /dev/null +++ b/src/plugins/remarkMermaidToHtml.mjs @@ -0,0 +1,22 @@ +import { visit } from "unist-util-visit"; +import { toHast } from "mdast-util-to-hast"; +import { toHtml } from "hast-util-to-html"; + +const remarkMermaidToHtml = () => { + const transformer = async (tree, file) => { + visit(tree, "code", (code, index, parent) => { + if (index === null || parent === null) return; + if (code.lang === "mermaid") { + const hast = toHast(code); + const html = toHtml(hast); + parent.children.splice(parent.children.indexOf(code), 1, { + type: "html", + value: html, + }); + } + }); + }; + return transformer; +}; + +export default remarkMermaidToHtml;