mermaid: load javascript on demand #218

config.toml

@@ -0,0 +1,3 @@
+[module]
+  [module.hugoVersion]
+    min = "0.93.0"

exampleSite/config.toml

@@ -34,7 +34,6 @@ title = "Hugo Relearn Documentation"
   disableBreadcrumb = false
   disableNextPrev = false
   disableLandingPageButton = true
-  disableMermaid = false
   titleSeparator = "::"
   themeVariant = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ]
   disableSeoHiddenPages = true

exampleSite/content/basics/configuration/_index.en.md

@@ -49,7 +49,7 @@ Note that some of these parameters are explained in details in other sections of
   disableBreadcrumb = true
   # If set to true, hide table of contents menu in the header of all pages
   disableToc = false
-  # If set to true, prevents Hugo from including the Mermaid module if not needed (will reduce load times and traffic)
+  # If set to false, load the Mermaid module on every page regardless if a Mermaid shortcode or Mermaid codefence is present
   disableMermaid = false
   # Specifies the remote location of the Mermaid js
   customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"

exampleSite/content/basics/generator/_index.en.md

@@ -1,4 +1,5 @@
 +++
+disableMermaid = false
 title = "Stylesheet generator"
 weight = 26
 +++

exampleSite/content/basics/migration/_index.en.md

@@ -14,6 +14,15 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ---
 
+## 3.2.0
+
+- **Change**: In this release the Mermaid JavaScript library will only be loaded on demand if the page contains a Mermaid shortcode or is using Mermaid codefences. This changes the behavior of `disableMermaid` config option as follows: If a Mermaid shortcode or codefence is found, the option will be ignored and Mermaid will be loaded regardlessly.
+
+  The option is still useful in case you are using scripting to set up your graph. In this case no shortcode or codefence is involved and the library is not loaded by default. In this case you can set `disableMermaid=false` in your frontmatter to force the library to be loaded. See the [theme variant generator]({{%relref "basics/generator" %}}) of the exampleSite for an example.
+
+  **This change requires at least Hugo 0.93.0 to be used**. The minimum requirement will be reported during build on the console if not met.
+---
+
 ## 3.1.0
 
 - **New**: [`attachment`]({{% relref "shortcodes/attachments" %}}) and [`notice`]({{% relref "shortcodes/notice" %}}) shortcodes have a new parameter to override the default icon. Allowed values are all [Font Awesome 5 Free](https://fontawesome.com/v5/search?m=free) icons.

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<div class="mermaid">
+  {{- safeHTML .Inner -}}
+</div>
+{{- .Page.Store.Set "hasMermaid" true }}

layouts/partials/footer.html

@@ -10,9 +10,9 @@
 {{- partial "menu.html" . }}
     <script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-    <script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-{{- if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
+{{- if (or (.Page.Store.Get "hasMermaid") (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (and (ne .Site.Params.disableMermaid nil) (not .Site.Params.disableMermaid)) ) }}
+    <script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
   {{- if isset .Params "custommermaidurl" }}
     <script src="{{ .Params.customMermaidURL }}"></script>
   {{- else if isset .Site.Params "custommermaidurl" }}
@@ -21,11 +21,11 @@
     <script src="{{"js/mermaid.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
   {{- end }}
   {{- if isset .Params "mermaidinitialize" }}
-      {{- $.Scratch.Set "mermaidInitialize" .Params.mermaidInitialize }}
+    {{- $.Scratch.Set "mermaidInitialize" .Params.mermaidInitialize }}
   {{- else if isset .Site.Params "mermaidinitialize" }}
-      {{- $.Scratch.Set "mermaidInitialize" .Site.Params.mermaidInitialize }}
+    {{- $.Scratch.Set "mermaidInitialize" .Site.Params.mermaidInitialize }}
   {{- else }}
-      {{- $.Scratch.Set "mermaidInitialize" "{ \"startOnLoad\": true }" }}
+    {{- $.Scratch.Set "mermaidInitialize" "{ \"startOnLoad\": true }" }}
   {{- end }}
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {

layouts/shortcodes/mermaid.html

@@ -2,3 +2,4 @@
 <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
   {{- safeHTML .Inner -}}
 </div>
+{{- .Page.Store.Set "hasMermaid" true }}

theme.toml

@@ -7,6 +7,10 @@ demosite = "https://mcshelby.github.io/hugo-theme-relearn"
 tags = ["dark", "dark mode", "docs", "light", "multilingual", "responsive"]
 features = ["dark mode", "documentation", "expand", "include", "light mode", "menu", "mermaid", "multilingual", "nested sections", "notice", "search", "tabs", "themeable"]
 
+[module]
+  [module.hugoVersion]
+    min = "0.93.0"
+
 [author]
   name = "Sören Weber"
   homepage = "https://github.com/McShelby"