From dde1fe5241384fee14546b9f0073ffbc7dffbc94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Wed, 16 Mar 2022 22:40:38 +0100 Subject: [PATCH] mermaid: load javascript on demand #218 --- config.toml | 3 +++ exampleSite/config.toml | 1 - exampleSite/content/basics/configuration/_index.en.md | 2 +- exampleSite/content/basics/generator/_index.en.md | 1 + exampleSite/content/basics/migration/_index.en.md | 9 +++++++++ layouts/_default/_markup/render-codeblock-mermaid.html | 4 ++++ layouts/partials/footer.html | 10 +++++----- layouts/shortcodes/mermaid.html | 1 + theme.toml | 4 ++++ 9 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 config.toml create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html diff --git a/config.toml b/config.toml new file mode 100644 index 0000000000..28af7b764d --- /dev/null +++ b/config.toml @@ -0,0 +1,3 @@ +[module] + [module.hugoVersion] + min = "0.93.0" diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 7398b43bd8..cc484a1012 100644 --- a/exampleSite/config.toml +++ b/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 diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index 09265d5d3f..f273068aad 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/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" diff --git a/exampleSite/content/basics/generator/_index.en.md b/exampleSite/content/basics/generator/_index.en.md index 0e6cbbd356..16bd787cf2 100644 --- a/exampleSite/content/basics/generator/_index.en.md +++ b/exampleSite/content/basics/generator/_index.en.md @@ -1,4 +1,5 @@ +++ +disableMermaid = false title = "Stylesheet generator" weight = 26 +++ diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index fb1d39bcc0..3cea3bd34e 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/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. diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 0000000000..d8a5029244 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +
+ {{- safeHTML .Inner -}} +
+{{- .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a8d4568ce3..62380f7970 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -10,9 +10,9 @@ {{- partial "menu.html" . }} - -{{- 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)) ) }} + {{- if isset .Params "custommermaidurl" }} {{- else if isset .Site.Params "custommermaidurl" }} @@ -21,11 +21,11 @@ {{- 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 }}