✨ Feat: enhance Mermaid configuration and fix initialization bug (#617)

* 🐛 Fix: Mermaid initialization conflict error

* ✨ Feat: enhance Mermaid configuration with security level, look, and font family options

assets/css/_partials/_single/_code.scss

@@ -4,7 +4,7 @@ code {
 }
 
 // indented code
-pre:not(.mermaid[data-processed='true']) {
+pre:not(.mermaid[data-processed]) {
   margin: 0;
   line-height: 1.45em;
   padding: 0.5rem;

assets/css/_partials/_single/_diagram-copy-btn.scss

@@ -1,3 +1,8 @@
+// Diagram container
+.diagram-container {
+  position: relative;
+}
+
 // Diagram copy button styles
 .diagram-copy-btn {
   position: absolute;
@@ -50,8 +55,15 @@
   }
 }
 
-// Diagram containers
-.mermaid-container,
-.echarts-container {
-  position: relative;
+@media only screen and (min-width: 1201px) {
+  .diagram-container {
+    .diagram-copy-btn {
+      display: none;
+    }
+    &:hover {
+      .diagram-copy-btn {
+        display: block;
+      }
+    }
+  }
 }

assets/css/_shortcodes/_mermaid.scss

@@ -1,7 +1,8 @@
 .mermaid {
   position: relative;
+  overflow: hidden !important;
 
-  &[data-processed='true'] {
+  &[data-processed] {
     text-align: center;
   }
 

assets/js/lib/mermaid.js

@@ -0,0 +1,10 @@
+{{- $mermaid := .Param "mermaid" -}}
+{{- $mermaidCDN := $mermaid.cdn | default "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs" -}}
+
+import mermaid from "{{ $mermaidCDN }}";
+{{- with $mermaid.zenuml }}
+import zenuml from "{{ . }}";
+await mermaid.registerExternalDiagrams([zenuml]);
+{{- end }}
+mermaid.startOnLoad = false;
+window.mermaid = mermaid;

assets/js/theme.js

@@ -665,30 +665,39 @@ class FixIt {
 
     const loadMermaid = async () => {
       processing = true;
+      // https://mermaid.js.org/config/schema-docs/config.html
       window.mermaid.initialize({
-        securityLevel: 'loose',
         startOnLoad: false,
+        darkMode: this.isDark,
         theme: this.isDark ? themes[1] : themes[0],
+        securityLevel: this.config.mermaid.securityLevel,
+        look: this.config.mermaid.look,
+        fontFamily: this.config.mermaid.fontFamily,
+        altFontFamily: this.config.mermaid.fontFamily
+      });
+      await window.mermaid.run({
+        querySelector: '.mermaid',
+        suppressErrors: true,
       });
-      await window.mermaid.run();
       processing = false;
       if (delayTask && typeof delayTask === 'function') {
-        await delayTask();
+        delayTask();
         delayTask = null;
+        // console.log('Delayed task executed');
       }
     };
 
     const reloadMermaid = async () => {
       await this.util.forEach(document.querySelectorAll('.mermaid[data-processed]'), (el) => {
-        el.replaceChild(el.nextElementSibling.content.cloneNode(true), el.firstChild);
         el.removeAttribute('data-processed');
+        el.parentElement.replaceChild(el.nextElementSibling.content.cloneNode(true), el);
       });
       await loadMermaid();
     };
 
     this.switchThemeEventSet.add(() => {
       if (processing) {
-        // console.log('delay the reload');
+        console.warn('Mermaid is still processing, delaying the reload.');
         delayTask = reloadMermaid;
         return;
       }

hugo.toml

@@ -699,7 +699,7 @@ mainSections = []
     loop = false
 
   # FixIt 0.2.15 | NEW Mermaid config
-  # See https://github.com/mermaid-js/mermaid
+  # See http://fixit.lruihao.cn/documentation/content-management/diagrams-support/mermaid/
   [params.mermaid]
     # FixIt 0.4.0 | NEW Mermaid ESM module CDN source
     # default is https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs
@@ -710,6 +710,14 @@ mainSections = []
     zenuml = ""
     # For values, see https://mermaid.js.org/config/theming.html#available-themes
     themes = ["default", "dark"]
+    # FixIt 0.4.0 | NEW The security level for Mermaid diagrams
+    # optional values: ["strict", "loose", "antiscript", "sandbox"]
+    securityLevel = "loose"
+    # FixIt 0.4.0 | NEW The appearance style for Mermaid diagrams
+    # optional values: ["classic", "handDrawn"]
+    look = "handDrawn"
+    # FixIt 0.4.0 | NEW Specifies the font to be used in the rendered diagrams
+    fontFamily = ""
 
   # FixIt 0.3.13 | NEW Admonitions custom config
   # See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/admonition/#custom-admonitions

layouts/_partials/assets.html

@@ -130,14 +130,15 @@
 {{- /* mermaid */ -}}
 {{- if .Store.Get "hasMermaid" -}}
   {{- $mermaid := .Param "mermaid" -}}
-  {{- $mermaidCDN := $mermaid.cdn | default "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs" -}}
-  {{- $content := printf "import mermaid from %q;" $mermaidCDN -}}
-  {{- with $mermaid.zenuml -}}
-    {{- $content = printf "%v import zenuml from %q; await mermaid.registerExternalDiagrams([zenuml]);" $content . -}}
-  {{- end -}}
-  {{- $content = printf "%v window.mermaid = mermaid;" $content -}}
-  {{- dict "Content" $content "Attr" `type="module"` | dict "Page" $ "Data" | partial "store/script.html" -}}
-  {{- $config = dict "themes" $mermaid.themes | dict "mermaid" | merge $config -}}
+  {{- $config = dict
+    "themes" $mermaid.themes
+    "securityLevel" $mermaid.securityLevel
+    "look" $mermaid.look
+    "fontFamily" $mermaid.fontFamily
+    | dict "mermaid" | merge $config -}}
+  {{- $options := dict "Source" "js/lib/mermaid.js" "Template" "js/lib/mermaid.min.js" -}}
+  {{- $options = dict "Context" . "Minify" true "Fingerprint" $fingerprint "Attr" `type="module"` | merge $options -}}
+  {{- $options | dict "Page" $ "Data" | partial "store/script.html" -}}
 {{- end -}}
 
 {{- /* ECharts */ -}}

layouts/_partials/footer.html

@@ -42,7 +42,7 @@
           {{- /* Author */ -}}
           {{- if ne $footerConfig.author false -}}
             <span class="author" itemprop="copyrightHolder">
-              {{ partial "plugin/link.html" (dict "Destination" ($.Site.Params.author.link | default (relURL "")) "Content" .Site.Params.author.name) -}}
+              {{ partial "plugin/link.html" (dict "Destination" ($.Site.Params.author.link | default (relLangURL "")) "Content" .Site.Params.author.name) -}}
             </span>
           {{- end -}}
 

layouts/_partials/header.html

@@ -1,11 +1,11 @@
 {{- $buildDrafts := .Site.BuildDrafts -}}
-{{- $relURL := relURL "" -}}
+{{- $relLangURL := relLangURL "" -}}
 
 {{- /* Desktop header */ -}}
 <header class="desktop animate__faster" id="header-desktop">
   <div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} data-github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
     <div class="header-title">
-      <a href="{{ $relURL }}" title="{{ .Site.Title }}">
+      <a href="{{ $relLangURL }}" title="{{ .Site.Title }}">
         {{- with .Site.Params.header.title -}}
           {{- with .logo -}}
             {{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 32 "Height" 32 | partial "plugin/image.html" -}}
@@ -157,7 +157,7 @@
   <div class="header-container">
     <div class="header-wrapper">
       <div class="header-title">
-        <a href="{{ $relURL }}" title="{{ .Site.Title }}">
+        <a href="{{ $relLangURL }}" title="{{ .Site.Title }}">
           {{- with .Site.Params.header.title -}}
             {{- with .logo -}}
               {{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 26 "Height" 26 | partial "plugin/image.html" -}}

layouts/_partials/plugin/echarts.html

@@ -7,7 +7,7 @@
 {{- $file := .Options.file -}}
 {{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}
 
-<div class="echarts-container">
+<div class="diagram-container">
 {{- dict "Label" "Copy ECharts code" | partial "plugin/diagram-copy-btn.html" -}}
 <div class="echarts" {{ $attrs | safeHTMLAttr }}></div>
 {{- $content := strings.TrimSpace .Inner -}}

layouts/_partials/plugin/mermaid.html

@@ -1,7 +1,7 @@
 {{- /* Mermaid support for code fences extended and shortcodes. */ -}}
-<div class="mermaid-container">
+<div class="diagram-container">
   {{- dict "Label" "Copy Mermaid code" | partial "plugin/diagram-copy-btn.html" -}}
   <pre class="mermaid">{{ .Inner | safeHTML }}</pre>
-  <template>{{ .Inner | safeHTML }}</template>
+  <template><pre class="mermaid">{{ .Inner | safeHTML }}</pre></template>
 </div>
 {{- /* EOF */ -}}

layouts/_partials/single/footer.html

@@ -106,8 +106,8 @@
       {{- end -}}
     </section>
     <section>
-      {{- $relURL := relURL "" -}}
-      <span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "single.back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ $relURL }}">{{ T "single.home" }}</a></span>
+      {{- $relLangURL := relLangURL "" -}}
+      <span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "single.back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ $relLangURL }}">{{ T "single.home" }}</a></span>
     </section>
   </div>