feat: generate diagrams and flowcharts from text using Mermaid shortcode

To use, add `diagram: true` to a page's YAML front matter and create a
diagram from text in the body of the Markdown file using Mermaid syntax:
https://mermaidjs.github.io

Close #1111

assets/js/academic.js

@@ -306,7 +306,7 @@
   * Toggle day/night mode.
   * --------------------------------------------------------------------------- */
 
-  function toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark) {
+  function toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark, diagramEnabled) {
     if ($('body').hasClass('dark')) {
       $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
       $('body').removeClass('dark');
@@ -316,6 +316,10 @@
       }
       $('.js-dark-toggle i').removeClass('fa-sun').addClass('fa-moon');
       localStorage.setItem('dark_mode', '0');
+      if (diagramEnabled) {
+        // TODO: Investigate Mermaid.js approach to re-render diagrams with new theme without reloading.
+        location.reload();
+      }
     } else {
       $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
       $('body').addClass('dark');
@@ -325,6 +329,10 @@
       }
       $('.js-dark-toggle i').removeClass('fa-moon').addClass('fa-sun');
       localStorage.setItem('dark_mode', '1');
+      if (diagramEnabled) {
+        // TODO: Investigate Mermaid.js approach to re-render diagrams with new theme without reloading.
+        location.reload();
+      }
     }
   }
 
@@ -360,6 +368,7 @@
     const codeHlEnabled = $('link[title=hl-light]').length > 0;
     const codeHlLight = $('link[title=hl-light]')[0];
     const codeHlDark = $('link[title=hl-dark]')[0];
+    const diagramEnabled = $('script[title=mermaid]').length > 0;
 
     if (dark_mode) {
       $('body').addClass('dark');
@@ -367,6 +376,9 @@
         codeHlLight.disabled = true;
         codeHlDark.disabled = false;
       }
+      if (diagramEnabled) {
+        mermaid.initialize({ theme: 'dark' });
+      }
       $('.js-dark-toggle i').removeClass('fa-moon').addClass('fa-sun');
     } else {
       $('body').removeClass('dark');
@@ -374,13 +386,16 @@
         codeHlLight.disabled = false;
         codeHlDark.disabled = true;
       }
+      if (diagramEnabled) {
+        mermaid.initialize({ theme: 'default' });
+      }
       $('.js-dark-toggle i').removeClass('fa-sun').addClass('fa-moon');
     }
 
     // Toggle day/night mode.
     $('.js-dark-toggle').click(function(e) {
       e.preventDefault();
-      toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark);
+      toggleDarkMode(codeHlEnabled, codeHlLight, codeHlDark, diagramEnabled);
     });
   });
 

assets/sass/academic/_integrations.scss

@@ -0,0 +1,5 @@
+/* Mermaid.js div */
+div.mermaid {
+  width: 100%;
+  text-align: center;
+}

assets/sass/academic/academic.scss

@@ -14,3 +14,4 @@
 @import "widgets";
 @import "docs";
 @import "dark";
+@import "integrations";

data/assets.toml

@@ -59,6 +59,10 @@
   version = "4.1.1"
   sri = "sha256-pB/deHc9CGfFpJRjC43imB29Rse8tak+5eXqntO94ck="
   url = "https://cdnjs.cloudflare.com/ajax/libs/anchor-js/%s/anchor.min.js"
+[js.mermaid]
+  version = "8.0.0"
+  sri = "sha256-0w92bcB21IY5+rGI84MGj52jNfHNbXVeQLrZ0CGdjNY="
+  url = "https://cdnjs.cloudflare.com/ajax/libs/mermaid/%s/mermaid.min.js"
 
 # CSS
 

layouts/partials/footer.html

@@ -16,6 +16,10 @@
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.isotope.url $js.isotope.version) $js.isotope.sri | safeHTML }}
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.fancybox.url $js.fancybox.version) $js.fancybox.sri | safeHTML }}
 
+      {{ if or .Params.diagram site.Params.diagram }}
+        {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mermaid\"></script>" (printf $js.mermaid.url $js.mermaid.version) $js.mermaid.sri | safeHTML }}
+      {{ end }}
+
       {{ if $.Scratch.Get "highlight_enabled" }}
         {{ $v := $js.highlight.version }}
         {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.highlight.url $v) $js.highlight.sri | safeHTML }}

layouts/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<div class="mermaid">
+  {{- safeHTML .Inner -}}
+</div>