Changed mermaid support in template (alshedivat#1992)

Fix alshedivat#1609

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>

Gemfile

@@ -3,7 +3,6 @@ group :jekyll_plugins do
     gem 'classifier-reborn'
     gem 'jekyll'
     gem 'jekyll-archives'
-    gem 'jekyll-diagrams'
     gem 'jekyll-email-protect'
     gem 'jekyll-feed'
     gem 'jekyll-get-json'

_config.yml

@@ -217,7 +217,6 @@ keep_files:
 # Plug-ins
 plugins:
   - jekyll-archives
-  - jekyll-diagrams
   - jekyll-email-protect
   - jekyll-feed
   - jekyll-get-json
@@ -351,14 +350,6 @@ imagemagick:
   output_formats:
     webp: "-quality 85"
 
-# -----------------------------------------------------------------------------
-# Jekyll Diagrams
-# -----------------------------------------------------------------------------
-
-jekyll-diagrams:
-    # configuration, see https://github.com/zhustec/jekyll-diagrams.
-    # feel free to comment out this section if not using jekyll diagrams.
-
 
 # -----------------------------------------------------------------------------
 # Optional Features

_includes/head.html

@@ -48,5 +48,4 @@
     {% if site.enable_darkmode %}
     <link rel="stylesheet" href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}" media="none" id="highlight_theme_dark" />
     <script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
-    <script src="{{ '/assets/js/dark_mode.js' | relative_url | bust_file_cache }}"></script>
-    {% endif %}
+    {% endif %}

_includes/scripts/mermaid.html

@@ -0,0 +1,41 @@
+  {% if page.mermaid and page.mermaid.enabled %}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  {% if page.mermaid.zoomable %}
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  {% endif %}
+  <script>
+    let theme = localStorage.getItem("theme");
+
+    /* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create mermaid node */
+      let mermaid = document.createElement('pre');
+      mermaid.classList.add('mermaid');
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
+    });
+
+    mermaid.initialize({ theme: theme })
+
+    /* Zoomable mermaid diagrams */
+    if (typeof d3 !== 'undefined') {
+      window.addEventListener('load', function () {
+        var svgs = d3.selectAll(".mermaid svg");
+        svgs.each(function () {
+          var svg = d3.select(this);
+          svg.html("<g>" + svg.html() + "</g>");
+          var inner = svg.select("g");
+          var zoom = d3.zoom().on("zoom", function (event) {
+            inner.attr("transform", event.transform);
+          });
+          svg.call(zoom);
+        });
+      });
+    }
+  </script>
+  {% endif %}

_layouts/default.html

@@ -53,6 +53,7 @@
     {% include scripts/jquery.html %}
     {% include scripts/bootstrap.html %}
     {% include scripts/masonry.html %}
+    {% include scripts/mermaid.html %}
     {% include scripts/misc.html %}
     {% include scripts/badges.html %}
     {% include scripts/mathjax.html %}

_sass/_base.scss

@@ -939,8 +939,8 @@ progress::-moz-progress-bar {
     font-size: medium;
     opacity: 0;
     position: absolute;
-    right: .5rem;
-    top: .5rem;
+    right: .2rem;
+    top: .2rem;
   }
 
   &:active .copy,
@@ -1070,6 +1070,10 @@ nav[data-toggle="toc"] {
   }
 }
 
+.unloaded {
+  display: none !important;
+}
+
 .medium-zoom-overlay,
 .medium-zoom-image--opened {
   z-index: 999;

assets/js/copy_code.js

@@ -1,7 +1,7 @@
 // create element for copy button in code blocks
 var codeBlocks = document.querySelectorAll('pre');
 codeBlocks.forEach(function (codeBlock) {
-  if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
+  if ((codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) && codeBlock.querySelector('code:not(.language-mermaid)')) {
     // create copy button
     var copyButton = document.createElement('button');
     copyButton.className = 'copy';

assets/js/theme.js

@@ -8,10 +8,15 @@ let toggleTheme = (theme) => {
   }
 };
 
+
 let setTheme = (theme) => {
   transTheme();
   setHighlight(theme);
   setGiscusTheme(theme);
+  // if mermaid is not defined, do nothing
+  if (typeof mermaid !== 'undefined') {
+    setMermaidTheme(theme);
+  }
 
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
@@ -56,6 +61,7 @@ let setTheme = (theme) => {
   }
 };
 
+
 let setHighlight = (theme) => {
   if (theme == "dark") {
     document.getElementById("highlight_theme_light").media = "none";
@@ -66,6 +72,7 @@ let setHighlight = (theme) => {
   }
 };
 
+
 let setGiscusTheme = (theme) => {
   function sendMessage(message) {
     const iframe = document.querySelector("iframe.giscus-frame");
@@ -80,13 +87,57 @@ let setGiscusTheme = (theme) => {
   });
 };
 
+
+let addMermaidZoom = (records, observer) => {
+  var svgs = d3.selectAll(".mermaid svg");
+  svgs.each(function () {
+    var svg = d3.select(this);
+    svg.html("<g>" + svg.html() + "</g>");
+    var inner = svg.select("g");
+    var zoom = d3.zoom().on("zoom", function (event) {
+      inner.attr("transform", event.transform);
+    });
+    svg.call(zoom);
+  });
+  observer.disconnect();
+};
+
+
+let setMermaidTheme = (theme) => {
+  if (theme == "light") {
+    // light theme name in mermaid is 'default'
+    // https://mermaid.js.org/config/theming.html#available-themes
+    theme = "default";
+  }
+
+  /* Re-render the SVG, based on https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html */
+  document.querySelectorAll('.mermaid').forEach((elem) => {
+    // Get the code block content from previous element, since it is the mermaid code itself as defined in Markdown, but it is hidden
+    let svgCode = elem.previousSibling.childNodes[0].innerHTML;
+    elem.removeAttribute('data-processed');
+    elem.innerHTML = svgCode;
+  });
+
+  mermaid.initialize({ theme: theme });
+  window.mermaid.init(undefined, document.querySelectorAll('.mermaid'));
+
+  const observable = document.querySelector(".mermaid svg");
+  if (observable !== null) {
+    var observer = new MutationObserver(addMermaidZoom);
+    const observerOptions = { childList: true };
+    observer.observe(observable, observerOptions);
+  }
+};
+
+
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {
     document.documentElement.classList.remove("transition");
   }, 500);
 };
 
+
 let initTheme = (theme) => {
   if (theme == null || theme == "null") {
     const userPref = window.matchMedia;
@@ -98,4 +149,14 @@ let initTheme = (theme) => {
   setTheme(theme);
 };
 
+
 initTheme(localStorage.getItem("theme"));
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    const mode_toggle = document.getElementById("light-toggle");
+
+    mode_toggle.addEventListener("click", function() {
+        toggleTheme(localStorage.getItem("theme"));
+    });
+});