From 1df9a874f94bb1f67856865f26e76220d53419fa Mon Sep 17 00:00:00 2001 From: Geo Date: Tue, 22 Mar 2022 20:13:03 +0000 Subject: [PATCH] feat: auto detect Mermaid diagrams Via the ```mermaid code fences. Deprecate the Params diagram setting Close #2643 --- wowchemy/assets/js/wowchemy-slides.js | 7 ----- wowchemy/assets/js/wowchemy-theming.js | 7 ++--- wowchemy/assets/js/wowchemy-utils.js | 27 +------------------ wowchemy/assets/js/wowchemy.js | 2 +- .../assets/scss/wowchemy/elements/_icon.scss | 6 ++--- wowchemy/config.yaml | 7 +++-- .../_markup/render-codeblock-mermaid.html | 4 +++ wowchemy/layouts/partials/site_js.html | 3 ++- wowchemy/layouts/shortcodes/diagram.html | 3 --- 9 files changed, 18 insertions(+), 48 deletions(-) create mode 100644 wowchemy/layouts/_default/_markup/render-codeblock-mermaid.html delete mode 100644 wowchemy/layouts/shortcodes/diagram.html diff --git a/wowchemy/assets/js/wowchemy-slides.js b/wowchemy/assets/js/wowchemy-slides.js index 890cfd2a..0ac5be2d 100644 --- a/wowchemy/assets/js/wowchemy-slides.js +++ b/wowchemy/assets/js/wowchemy-slides.js @@ -4,8 +4,6 @@ import * as params from '@params'; -import {fixMermaid} from './wowchemy-utils'; - // Enable core slide features. var enabledPlugins = [RevealMarkdown, RevealHighlight, RevealSearch, RevealNotes, RevealMath.MathJax3, RevealZoom]; @@ -140,9 +138,4 @@ if (params.slides.diagram) { mermaidOptions['startOnLoad'] = false; mermaid.initialize(mermaidOptions); - - // Fix Mermaid conflict with Hightlight JS. - document.addEventListener('DOMContentLoaded', function () { - fixMermaid(false); - }); } diff --git a/wowchemy/assets/js/wowchemy-theming.js b/wowchemy/assets/js/wowchemy-theming.js index cf293d6e..d2a80578 100644 --- a/wowchemy/assets/js/wowchemy-theming.js +++ b/wowchemy/assets/js/wowchemy-theming.js @@ -7,7 +7,6 @@ **************************************************/ import {fadeIn} from './wowchemy-animation'; -import {fixMermaid} from './wowchemy-utils'; const body = document.body; @@ -192,8 +191,7 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) { console.debug('Initializing Mermaid with light theme'); if (init) { /** @namespace window.mermaid **/ - window.mermaid.initialize({startOnLoad: false, theme: 'default', securityLevel: 'loose'}); - fixMermaid(true); + window.mermaid.initialize({startOnLoad: true, theme: 'default', securityLevel: 'loose'}); } else { // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks. location.reload(); @@ -219,8 +217,7 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) { console.debug('Initializing Mermaid with dark theme'); if (init) { /** @namespace window.mermaid **/ - window.mermaid.initialize({startOnLoad: false, theme: 'dark', securityLevel: 'loose'}); - fixMermaid(true); + window.mermaid.initialize({startOnLoad: true, theme: 'dark', securityLevel: 'loose'}); } else { // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks. location.reload(); diff --git a/wowchemy/assets/js/wowchemy-utils.js b/wowchemy/assets/js/wowchemy-utils.js index ee90c790..671430b1 100644 --- a/wowchemy/assets/js/wowchemy-utils.js +++ b/wowchemy/assets/js/wowchemy-utils.js @@ -5,31 +5,6 @@ * Wowchemy Utilities **************************************************/ -/** - * Fix Mermaid.js clash with Highlight.js. - * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them. - * @param {boolean} render - */ -function fixMermaid(render = false) { - let mermaids = []; - // Note that `language-mermaid` class is applied to block within 
, so we wish to replace parent node.
-  [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
-  for (let i = 0; i < mermaids.length; i++) {
-    // Convert 
 block to 
 and add `mermaid` class so that Mermaid will parse it.
-    let mermaidCodeElement = mermaids[i];
-    let newElement = document.createElement('div');
-    newElement.innerHTML = mermaidCodeElement.innerHTML;
-    newElement.classList.add('mermaid');
-    if (render) {
-      window.mermaid.mermaidAPI.render(`mermaid-${i}`, newElement.textContent, function (svgCode) {
-        newElement.innerHTML = svgCode;
-      });
-    }
-    mermaidCodeElement.parentNode.replaceWith(newElement);
-  }
-  console.debug(`Processed ${mermaids.length} Mermaid code blocks`);
-}
-
 /**
  * @param {Element} parent
  * @param {Element} child
@@ -58,4 +33,4 @@ function scrollParentToChild(parent, child) {
   }
 }
 
-export {fixMermaid, scrollParentToChild};
+export {scrollParentToChild};
diff --git a/wowchemy/assets/js/wowchemy.js b/wowchemy/assets/js/wowchemy.js
index ddc1a5ce..6ffa1c09 100644
--- a/wowchemy/assets/js/wowchemy.js
+++ b/wowchemy/assets/js/wowchemy.js
@@ -203,7 +203,7 @@ function fixHugoOutput() {
   $("input[type='checkbox'][disabled]").parents('ul').addClass('task-list');
 
   // Bootstrap table style is opt-in and Goldmark doesn't add it.
-  $("table").addClass('.table');
+  $('table').addClass('.table');
 }
 
 // Get an element's siblings.
diff --git a/wowchemy/assets/scss/wowchemy/elements/_icon.scss b/wowchemy/assets/scss/wowchemy/elements/_icon.scss
index 6a1ed6b9..ded0d48a 100644
--- a/wowchemy/assets/scss/wowchemy/elements/_icon.scss
+++ b/wowchemy/assets/scss/wowchemy/elements/_icon.scss
@@ -22,10 +22,10 @@
 }
 
 .task-list input[type='checkbox']:not(:checked) {
-  width: .9em;
-  height: .9em;
+  width: 0.9em;
+  height: 0.9em;
 }
 
 .task-list input[type='checkbox']:checked::after {
-  content:"✅";
+  content: '✅';
 }
diff --git a/wowchemy/config.yaml b/wowchemy/config.yaml
index 4a2c8b40..f363d508 100644
--- a/wowchemy/config.yaml
+++ b/wowchemy/config.yaml
@@ -8,7 +8,10 @@ markup:
         block: true
         title: true
   highlight:
-    codeFences: false
+    codeFences: true
+    noHl: true
+    lineNumbersInTable: false
+    noClasses: false
   tableOfContents:
     startLevel: 2
     endLevel: 3
@@ -31,7 +34,7 @@ sitemap:
   changefreq: weekly
 module:
   hugoVersion:
-    min: '0.87.0'
+    min: '0.95.0'
     extended: true
   mounts:
     - source: content
diff --git a/wowchemy/layouts/_default/_markup/render-codeblock-mermaid.html b/wowchemy/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 00000000..dab0a912
--- /dev/null
+++ b/wowchemy/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+

+  {{- .Inner | safeHTML }}
+

+{{ .Page.Store.Set "has_mermaid" true }}
\ No newline at end of file
diff --git a/wowchemy/layouts/partials/site_js.html b/wowchemy/layouts/partials/site_js.html
index c10600b4..7623d1b0 100644
--- a/wowchemy/layouts/partials/site_js.html
+++ b/wowchemy/layouts/partials/site_js.html
@@ -28,7 +28,8 @@
         {{ printf "" (printf $js.fancybox.url $js.fancybox.version) $js.fancybox.sri | safeHTML }}
       {{ end }}
 
-      {{ if or .Params.diagram site.Params.features.diagram.enable }}
+      {{ if .Page.Store.Get "has_mermaid" }}
+        {{/* Title attribute is used by wowchemy-theming.js to detect Mermaid */}}
         {{ printf "" (printf $js.mermaid.url $js.mermaid.version) $js.mermaid.sri | safeHTML }}
       {{ end }}
 
diff --git a/wowchemy/layouts/shortcodes/diagram.html b/wowchemy/layouts/shortcodes/diagram.html
deleted file mode 100644
index 33fdc82e..00000000
--- a/wowchemy/layouts/shortcodes/diagram.html
+++ /dev/null
@@ -1,3 +0,0 @@
-

-  {{- safeHTML .Inner -}}
-

\ No newline at end of file