Changed mermaid support in template (#1992)

Fix #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

@@ -215,7 +215,6 @@ keep_files:
 # Plug-ins
 plugins:
   - jekyll-archives
-  - jekyll-diagrams
   - jekyll-email-protect
   - jekyll-feed
   - jekyll-get-json
@@ -348,14 +347,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

@@ -39,5 +39,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 %}

_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 %}

_posts/2021-07-04-diagrams.md

@@ -4,41 +4,32 @@ title: a post with diagrams
 date: 2021-07-04 17:39:00
 tags: formatting diagrams
 description: an example of a blog post with diagrams
+mermaid:
+    enabled: true
+    zoomable: true
+
 ---
 
-This theme supports generating various diagrams from a text description using [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin.
+This theme supports generating various diagrams from a text description using [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}. Previously, this was done using the [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin. For more information on this matter, see the [related issue](https://github.com/alshedivat/al-folio/issues/1609#issuecomment-1656995674). To disable the zooming feature, set `mermaid.zoomable` to `false` in this post frontmatter.
-Below, we generate a few examples of such diagrams using languages such as [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}, [plantuml](https://plantuml.com/){:target="\_blank"}, [vega-lite](https://vega.github.io/vega-lite/){:target="\_blank"}, etc.
-
-**Note:** different diagram-generation packages require external dependencies to be installed on your machine.
-Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW.
-For any other details, please refer to [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} README.
-
 
 ## Mermaid
 
-Install mermaid using `node.js` package manager `npm` by running the following command:
-```bash
-npm install -g mermaid.cli
-```
-
 The diagram below was generated by the following code:
 
-{% raw %}
+````markdown
-```
+```mermaid
-{% mermaid %}
 sequenceDiagram
     participant John
     participant Alice
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
-{% endmermaid %}
 ```
-{% endraw %}
+````
 
-{% mermaid %}
+```mermaid
 sequenceDiagram
     participant John
     participant Alice
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
-{% endmermaid %}
+```

_sass/_base.scss

@@ -928,8 +928,8 @@ progress::-moz-progress-bar {
     font-size: medium;
     opacity: 0;
     position: absolute;
-    right: .5rem;
+    right: .2rem;
-    top: .5rem;
+    top: .2rem;
   }
 
   &:active .copy,
@@ -1059,6 +1059,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/dark_mode.js

@@ -1,8 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const mode_toggle = document.getElementById("light-toggle");
-
-    mode_toggle.addEventListener("click", function() {
-        toggleTheme(localStorage.getItem("theme"));
-    });
-});
-

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,6 +87,49 @@ 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(() => {
@@ -87,6 +137,7 @@ let transTheme = () => {
   }, 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"));
+    });
+});