♻️ Refactor: update layout and media styles to use fi-container class, improve Mermaid script handling (#614)

docs: https://fixit.lruihao.cn/documentation/content-management/diagrams-support/mermaid/#cdn

assets/css/_core/_layout.scss

@@ -17,14 +17,14 @@
       }
     }
 
-    &.container {
+    &.fi-container {
       display: flex;
       align-items: flex-start;
       justify-content: center;
       padding-inline: 1rem;
       gap: 0.5rem;
 
-      &.container-reverse {
+      &[data-reverse] {
         flex-direction: row-reverse;
       }
 

assets/css/_core/_media.scss

@@ -67,7 +67,7 @@
       top: 0;
     }
     // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-desktop='auto']) &+.container .content [id] {
+    body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
       scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
     }
   }
@@ -95,7 +95,7 @@
       top: 0;
     }
     // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-mobile='auto']) &+.container .content [id] {
+    body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
       scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
     }
   }

assets/js/theme.js

@@ -371,7 +371,7 @@ class FixIt {
     const $breadcrumbContainer = document.querySelector('.breadcrumb-container.sticky')
     this.breadcrumbHeight = $breadcrumbContainer?.clientHeight ?? 0;
     if (this.breadcrumbHeight) {
-      document.querySelector('main.container')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`);
+      document.querySelector('main.fi-container')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`);
     }
   }
 
@@ -567,11 +567,11 @@ class FixIt {
       const $tocLiElements = $tocCore.getElementsByTagName('li');
       const $headingElements = document.getElementsByClassName('heading-element');
       const headerHeight = document.getElementById('header-desktop').offsetHeight;
-      document.querySelector('.container').addEventListener('resize', () => {
-        $toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
+      document.querySelector('.fi-container').addEventListener('resize', () => {
+        $toc.style.marginBottom = `${document.querySelector('.fi-container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
       });
       this._tocOnScroll = this._tocOnScroll || (() => {
-        $toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
+        $toc.style.marginBottom = `${document.querySelector('.fi-container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
         this.util.forEach($tocLinkElements, ($tocLink) => {
           $tocLink.classList.remove('active');
         });

hugo.toml

@@ -699,7 +699,12 @@ mainSections = []
     loop = false
 
   # FixIt 0.2.15 | NEW Mermaid config
+  # See https://github.com/mermaid-js/mermaid
   [params.mermaid]
+    # FixIt 0.4.0 | NEW Mermaid ESM module CDN source
+    cdn = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs"
+    # FixIt 0.4.0 | NEW ZenUML ESM module CDN source
+    zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"
     # For values, see https://mermaid.js.org/config/theming.html#available-themes
     themes = ["default", "dark"]
 

layouts/_partials/assets.html

@@ -130,14 +130,10 @@
 
 {{- /* mermaid */ -}}
 {{- if .Store.Get "hasMermaid" -}}
-  {{- $config = dict "themes" .Site.Params.mermaid.themes | dict "mermaid" | merge $config -}}
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.esm.min.mjs';
-    // Style conflict with ZenUML
-    // import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.2.0/dist/mermaid-zenuml.esm.min.mjs'
-    // await mermaid.registerExternalDiagrams([zenuml]);
-    window.mermaid = mermaid;
-  </script>
+  {{- $mermaid := .Param "mermaid" -}}
+  {{- $content := printf "import mermaid from %q; import zenuml from %q; await mermaid.registerExternalDiagrams([zenuml]); window.mermaid = mermaid;" $mermaid.cdn $mermaid.zenuml -}}
+  {{- dict "Content" $content "Attr" `type="module"` | dict "Page" $ "Data" | partial "store/script.html" -}}
+  {{- $config = dict "themes" $mermaid.themes | dict "mermaid" | merge $config -}}
 {{- end -}}
 
 {{- /* ECharts */ -}}

layouts/_partials/plugin/script.html

@@ -50,7 +50,7 @@
     <script {{ $attrs | safeHTMLAttr }}></script>
   {{- else -}}
     {{- with .Content -}}
-      <script>{{ . | safeJS }}</script>
+      <script{{ with $.Attr }} {{ . | safeHTMLAttr }}{{ end }}>{{ . | safeJS }}</script>
     {{- end -}}
   {{- end -}}
 {{- end -}}

layouts/baseof.html

@@ -26,7 +26,7 @@
       {{- partial "header.html" . -}}
       {{- partial "breadcrumb.html" . -}}
       {{- $toc := .Store.Get "toc" -}}
-      <main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }} container-reverse{{ end }}">
+      <main class="fi-container"{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }} data-reverse{{ end }}>
         {{- block "content" . }}{{ end -}}
       </main>
       {{- partialCached "footer.html" . -}}