bc1b55e60a
* fix: improve Mermaid diagram implementation (#1213) This commit addresses multiple issues with Mermaid diagram rendering and adds significant improvements to the user experience. - Fix `<br/>` tags rendering as literal text instead of line breaks - Fix flash of raw mermaid code before diagram renders - Fix Gantt chart rendering issues in dark mode - Fix diagrams briefly showing during theme switch re-render - Fix expand modal showing diagram left-aligned before centering - Add fullscreen expand modal with pan/zoom functionality - Add toolbar with zoom controls (zoom in/out, reset, fit to screen) - Add keyboard support (Escape to close modal) - Add per-diagram transparent background via `%%transparent%%` directive - Add comprehensive configuration options: - `look`: classic or handDrawn (sketch style) - `lightTheme`/`darkTheme`: theme selection per mode - `lightThemeVariables`/`darkThemeVariables`: custom theme colors - `securityLevel`, `htmlLabels`, `maxTextSize`, `maxEdges` - `fontSize`, `fontFamily`, `curve`, `logLevel` - Switch from ESM to UMD bundle for faster initial load (~1s vs 2s+) - Lazy-load panzoom library only when expand modal is opened - Pre-render alternate theme during idle time for instant theme switching - Cache rendered diagrams to avoid re-rendering on theme toggle - Move all inline CSS to article.scss using SCSS nesting - Extract helper functions for better maintainability - Use data attributes and event delegation for cleaner handlers - Reduce mermaid.html from 411 to 177 lines (57% reduction) - Add comprehensive mermaid-diagrams example post with all diagram types - Document all configuration options in hugo.yaml * refactor: extract mermaid inline JS to TypeScript module Move ~155 lines of inline JavaScript from mermaid.html partial into assets/ts/mermaid.ts. The partial shrinks from 179 to 36 lines and now only contains modal HTML markup and Hugo Pipes build/import logic. - Deduplicate initWithTheme() and renderOffscreen() helpers - Enable minification via Hugo Pipes js.Build in production - Remove user-configurable mermaid version from params.toml --------- Co-authored-by: delize <4028612+delize@users.noreply.github.com>
43 lines
2.2 KiB
HTML
43 lines
2.2 KiB
HTML
{{- if .Store.Get "hasMermaid" -}}
|
||
{{- $cfg := site.Params.article.mermaid | default dict -}}
|
||
|
||
<div class="mermaid-modal" id="mermaid-modal">
|
||
<div class="mermaid-modal-header">
|
||
<div class="mermaid-modal-controls">
|
||
<button data-zoom="-1">− Zoom Out</button>
|
||
<button data-zoom="0">Reset (100%)</button>
|
||
<button data-zoom="1">+ Zoom In</button>
|
||
<button data-zoom="fit">Fit to Screen</button>
|
||
</div>
|
||
<button class="mermaid-modal-close" id="mermaid-modal-close">✕ Close (Esc)</button>
|
||
</div>
|
||
<div class="mermaid-modal-body" id="mermaid-modal-body">
|
||
<div class="mermaid-modal-content" id="mermaid-modal-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||
{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
|
||
{{- $script := resources.Get "ts/mermaid.ts" | js.Build $opts -}}
|
||
{{- $jsConfig := dict
|
||
"transparentBackground" ($cfg.transparentBackground | default false)
|
||
"lightTheme" ($cfg.lightTheme | default "default")
|
||
"darkTheme" ($cfg.darkTheme | default "dark")
|
||
"lightThemeVariables" ($cfg.lightThemeVariables | default dict)
|
||
"darkThemeVariables" ($cfg.darkThemeVariables | default dict)
|
||
"securityLevel" ($cfg.securityLevel | default "strict")
|
||
"look" ($cfg.look | default "classic")
|
||
"htmlLabels" (not (eq ($cfg.htmlLabels | default true) false))
|
||
-}}
|
||
{{- with $cfg.maxTextSize }}{{ $jsConfig = merge $jsConfig (dict "maxTextSize" .) }}{{ end -}}
|
||
{{- with $cfg.maxEdges }}{{ $jsConfig = merge $jsConfig (dict "maxEdges" .) }}{{ end -}}
|
||
{{- with $cfg.fontSize }}{{ $jsConfig = merge $jsConfig (dict "fontSize" .) }}{{ end -}}
|
||
{{- with $cfg.fontFamily }}{{ $jsConfig = merge $jsConfig (dict "fontFamily" .) }}{{ end -}}
|
||
{{- with $cfg.curve }}{{ $jsConfig = merge $jsConfig (dict "curve" .) }}{{ end -}}
|
||
{{- with $cfg.logLevel }}{{ $jsConfig = merge $jsConfig (dict "logLevel" .) }}{{ end -}}
|
||
<script type="module">
|
||
import { initMermaidPage } from '{{ $script.RelPermalink }}';
|
||
initMermaidPage({{ $jsConfig | jsonify | safeJS }});
|
||
</script>
|
||
{{- end -}}
|