From e143a542bfdad80391b2dce2023ac643a3978dae Mon Sep 17 00:00:00 2001 From: stereobooster Date: Sun, 5 May 2024 09:18:54 +0200 Subject: [PATCH] last fixes for mermaid dark mode --- README.md | 2 -- packages/demo/astro.config.mjs | 5 +--- packages/demo/src/components/svgpanzoom.ts | 30 ++++++++++++++++++- .../demo/src/content/docs/examples/mermaid.md | 4 --- packages/demo/src/styles/custom.css | 11 +++++++ packages/rehype-mermaid/README.md | 1 + packages/rehype-mermaid/src/index.ts | 19 ++++++------ 7 files changed, 52 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index b99d62e..6566379 100644 --- a/README.md +++ b/README.md @@ -66,8 +66,6 @@ Ideas for other diagrams: https://stereobooster.com/posts/text-to-diagram/. ## TODO -- [ ] implement dark mode for mermaid with picture/classes -- [ ] SVGO? - [ ] fix `@beoe/astro-graphviz` - why I can't use `@beoe/cache` package? - [ ] example of gnuplot custom diagram diff --git a/packages/demo/astro.config.mjs b/packages/demo/astro.config.mjs index fdb6940..f9df932 100644 --- a/packages/demo/astro.config.mjs +++ b/packages/demo/astro.config.mjs @@ -32,10 +32,7 @@ export default defineConfig({ markdown: { rehypePlugins: [ [rehypeGraphviz, { class: className }], - [ - rehypeMermaid, - { cache, class: className, strategy: "class-dark-mode" }, - ], + [rehypeMermaid, { cache, class: className, strategy: "class-dark-mode" }], [rehypeGnuplot, { cache, class: className }], ], }, diff --git a/packages/demo/src/components/svgpanzoom.ts b/packages/demo/src/components/svgpanzoom.ts index 35aa0f2..caf0c73 100644 --- a/packages/demo/src/components/svgpanzoom.ts +++ b/packages/demo/src/components/svgpanzoom.ts @@ -1,7 +1,35 @@ import "./SvgPanZoomUi.css"; import { SvgPanZoomUi } from "svg-pan-zoom-gesture"; +// @ts-expect-error +const theme = document.querySelector("html")!.attributes["data-theme"]?.value; + +const themeSelector = document.querySelector( + "starlight-theme-select select" +) as HTMLSelectElement; + document.querySelectorAll(".beoe").forEach((container) => { + const svg = container.querySelector("svg"); + const img = container.querySelector(`img.beoe-${theme.toString()}`); + if (!svg && !img) return; + // @ts-expect-error - new SvgPanZoomUi({ element: container.querySelector("svg"), container }).on(); + let instance = new SvgPanZoomUi({ element: svg || img, container }); + instance.on(); + + // workaround for selector based dark mode - when there are 2 images. I don't like it + // maybe allow to pass array to element? + // TODO: `off()` needs to reset zoom level + if (img && themeSelector) { + themeSelector.addEventListener("change", () => { + instance.off(); + const theme = + // @ts-expect-error + document.querySelector("html")!.attributes["data-theme"]?.value; + const img = container.querySelector(`img.beoe-${theme.toString()}`); + // @ts-expect-error + instance = new SvgPanZoomUi({ element: img, container }); + instance.on(); + }); + } }); diff --git a/packages/demo/src/content/docs/examples/mermaid.md b/packages/demo/src/content/docs/examples/mermaid.md index aee7aca..dc1cf80 100644 --- a/packages/demo/src/content/docs/examples/mermaid.md +++ b/packages/demo/src/content/docs/examples/mermaid.md @@ -93,8 +93,6 @@ classDiagram } ``` -**TODO**: this doesn't work with dark mode - ```mermaid --- title: Simple sample @@ -201,8 +199,6 @@ gitGraph commit ``` -**TODO**: this doesn't work with dark mode - ```mermaid C4Context title System Context diagram for Internet Banking System diff --git a/packages/demo/src/styles/custom.css b/packages/demo/src/styles/custom.css index a3a4f73..b71c781 100644 --- a/packages/demo/src/styles/custom.css +++ b/packages/demo/src/styles/custom.css @@ -18,6 +18,13 @@ } } +/* needed if you use strategy: "inline" */ +.mermaid svg { + background: #fff; + line-height: 1; +} + +/* needed if you use strategy: "class-dark-mode" */ html[data-theme="light"] .beoe-dark { display: none; } @@ -25,3 +32,7 @@ html[data-theme="light"] .beoe-dark { html[data-theme="dark"] .beoe-light { display: none; } + +/* .beoe { + @apply not-content; +} */ diff --git a/packages/rehype-mermaid/README.md b/packages/rehype-mermaid/README.md index 56f6723..82d5cfd 100644 --- a/packages/rehype-mermaid/README.md +++ b/packages/rehype-mermaid/README.md @@ -47,6 +47,7 @@ It support caching the same way as [@beoe/rehype-code-hook](/packages/rehype-cod ## TODO +- write about dark mode - maybe use `waitFor` - maybe remove `style="max-width: ..."` - test `mermaid-isomorphic` options (`css, mermaidConfig, prefix, browser, launchOptions`) diff --git a/packages/rehype-mermaid/src/index.ts b/packages/rehype-mermaid/src/index.ts index 1fc80c5..65d8eea 100644 --- a/packages/rehype-mermaid/src/index.ts +++ b/packages/rehype-mermaid/src/index.ts @@ -8,14 +8,18 @@ import { type RenderResult, } from "mermaid-isomorphic"; import svgToMiniDataURI from "mini-svg-data-uri"; -import { optimize, type Config as SvgoConfig } from "svgo"; import { h } from "hastscript"; +// SVGO is an experiment. I'm not sure it can compress a lot, plus it can break some diagrams +import { optimize, type Config as SvgoConfig } from "svgo"; export type RehypeMermaidConfig = RenderOptions & CreateMermaidRendererOptions & { cache?: MapLike; class?: string; - svgo?: SvgoConfig | false; + /** + * be carefull. It may break some diagrams. For example, stateDiagram-v2 + */ + svgo?: SvgoConfig | boolean; strategy?: "inline" | "picture" | "class-dark-mode"; }; @@ -102,17 +106,14 @@ export const rehypeMermaid: Plugin<[RehypeMermaidConfig?], Root> = ( // otherwise all diagrams would have same ID and styles would collide config.prefix = `m${Math.random().toString().replace(".", "")}`; - if (dark) { - // config.mermaidConfig.darkMode = true; - config.mermaidConfig.theme = "dark"; - } + if (dark) config.mermaidConfig.theme = "dark"; const [x] = await renderDiagrams([code], config); if (x.status === "fulfilled") { - if (svgo !== false) { - x.value.svg = optimize(x.value.svg, svgo).data; - } + if (svgo) + x.value.svg = optimize(x.value.svg, svgo === true ? {} : svgo).data; + return x.value; } else { throw new Error(x.reason);