mermaid, katex, mathjax, chart, flowchartjs support

#6

assets/sass/components/_lib.scss

@@ -0,0 +1,7 @@
+// mermaid
+.mermaid {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  overflow: auto;
+}

assets/sass/main.scss

@@ -38,6 +38,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/bgcolor';
 @import 'components/tag';
 @import 'components/section';
+@import 'components/lib';
 
 @import 'layout/grid';
 @import 'layout/footer';

data/flowchartjs.json

@@ -0,0 +1,58 @@
+{
+    "x": 0,
+    "y": 0,
+    "line-width": 3,
+    "line-length": 50,
+    "text-margin": 10,
+    "font-size": 14,
+    "font-color": "black",
+    "line-color": "black",
+    "element-color": "black",
+    "fill": "white",
+    "yes-text": "yes",
+    "no-text": "no",
+    "arrow-end": "block",
+    "scale": 1,
+    "symbols": {
+        "start": {
+            "font-color": "red",
+            "element-color": "green",
+            "fill": "yellow"
+        },
+        "end": {
+            "class": "end-element"
+        }
+    },
+    "flowstate": {
+        "past": {
+            "fill": "#CCCCCC",
+            "font-size": 12
+        },
+        "current": {
+            "fill": "yellow",
+            "font-color": "red",
+            "font-weight": "bold"
+        },
+        "future": {
+            "fill": "#FFFF99"
+        },
+        "request": {
+            "fill": "blue"
+        },
+        "invalid": {
+            "fill": "#444444"
+        },
+        "approved": {
+            "fill": "#58C4A3",
+            "font-size": 12,
+            "yes-text": "APPROVED",
+            "no-text": "n/a"
+        },
+        "rejected": {
+            "fill": "#C45879",
+            "font-size": 12,
+            "yes-text": "n/a",
+            "no-text": "REJECTED"
+        }
+    }
+}

data/lib.toml

@@ -0,0 +1,34 @@
+# js
+[js.mermaid]
+  sri = "sha256-wV/0jM5E/0V+KqyxUio2Ve5OAC/gweTTqdbnRX1fgAE="
+  url = "https://cdn.jsdelivr.net/npm/mermaid@8.4.6/dist/mermaid.min.js"
+
+[js.katex]
+  sri = "sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc="
+  url = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
+
+[js.katex_auto_render]
+  sri = "sha256-90d2pnfw0r4K8CZAWPko4rpFXQsZvJhTBGYNkipDprI="
+  url = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
+
+[js.flowchartjs]
+  sri = "sha256-xghRsaOFJXNxT9sgANknngHh3FjUQWrJUae7GP+2Atc="
+  url = "https://cdn.jsdelivr.net/npm/flowchart.js@1.12.0/release/flowchart.min.js"
+
+[js.raphael]
+  sri = "sha256-TabprKdeNXbSesCWLMrcbWSDzUhpAdcNPe5Q53rn9Yg="
+  url = "https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"
+
+[js.mathjax]
+  url = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js"
+
+[js.chart]
+  sri = "sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI="
+  url = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
+
+
+
+# css
+[css.katex]
+  sri = "sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung="
+  url = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"

layouts/partials/main/single.html

@@ -22,6 +22,7 @@
   </div>
 </div>
 
+{{ partial "script/single-script.html" . }}
 <script>
   var listSide = document.getElementById('list-side');
   var listMain = document.getElementById('list-main');

layouts/partials/script/single-script.html

@@ -0,0 +1,186 @@
+{{ $js := .Site.Data.lib.js }}
+{{ $css := .Site.Data.lib.css }}
+
+{{ $getParents := resources.Get "js/helper/getParents.js" | resources.Minify }}
+<script defer src="{{ $getParents.RelPermalink }}"></script>
+{{ $closest := resources.Get "js/helper/closest.js" | resources.Minify }}
+<script defer src="{{ $closest.RelPermalink }}"></script>
+{{ $prev := resources.Get "js/helper/prev.js" | resources.Minify }}
+<script defer src="{{ $prev.RelPermalink }}"></script>
+{{ $prop := resources.Get "js/helper/prop.js" | resources.Minify }}
+<script defer src="{{ $prop.RelPermalink }}"></script>
+{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
+<script defer src="{{ $fadeinout.RelPermalink }}"></script>
+
+{{ if in .Params.Libraries "mermaid" }}
+<script defer src="{{ $js.mermaid.url }}" integrity="{{ $js.mermaid.sri }}" crossorigin="anonymous"></script>
+{{ end }}
+
+{{ if in .Params.Libraries "katex" }}
+  <link rel="stylesheet" href="{{ $css.katex.url }}" integrity="{{$css.katex.sri }}" crossorigin="anonymous">
+  <script defer src="{{ $js.katex.url }}" integrity="{{ $js.katex.sri }}" crossorigin="anonymous"></script>
+  <script defer src="{{ $js.katex_auto_render.url }}" integrity="{{ $js.katex_auto_render.sri }}" crossorigin="anonymous"></script>
+{{ end }}
+
+{{ if in .Params.Libraries "flowchartjs" }}
+  <script defer src="{{ $js.raphael.url }}" integrity="{{ $js.raphael.sri }}" crossorigin="anonymous"></script>
+  <script defer src="{{ $js.flowchartjs.url }}" integrity="{{ $js.flowchartjs.sri }}" crossorigin="anonymous"></script>
+{{ end }}
+
+{{ if in .Params.Libraries "mathjax" }}
+  <script type="text/javascript" async src="{{ $js.mathjax.url }}?config=TeX-AMS-MML_HTMLorMML">
+    MathJax.Hub.Config({
+      tex2jax: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$']],
+        processEscapes: true,
+        processEnvironments: true,
+        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+        TeX: {
+          equationNumbers: { autoNumber: "AMS" },
+          extensions: ["AMSmath.js", "AMSsymbols.js"]
+        }
+      }
+    });
+    MathJax.Hub.Queue(function () {
+      // Fix <code> tags after MathJax finishes running. This is a
+      // hack to overcome a shortcoming of Markdown. Discussion at
+      // https://github.com/mojombo/jekyll/issues/199
+      var all = MathJax.Hub.getAllJax(), i;
+      for (i = 0; i < all.length; i += 1) {
+        all[i].SourceElement().parentNode.className += ' has-jax';
+      }
+    });
+
+    MathJax.Hub.Config({
+      // Autonumbering by mathjax
+      TeX: { equationNumbers: { autoNumber: "AMS" } }
+    });
+  </script>
+{{ end }}
+
+{{ if in .Params.Libraries "chart" }}
+  <script defer src="{{ $js.chart.url }}" integrity="{{ $js.chart.sri }}" crossorigin="anonymous"></script>
+{{ end }}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    'use strict';
+    
+    // ============================ mermaid ============================
+    {{ $lib := .Params.libraries }}
+    var lib = JSON.parse({{ $lib | jsonify }});
+
+    if (lib && lib.includes('mermaid')) {
+      var themeVariant = localStorage.getItem('theme') || 'light';
+
+      if (themeVariant === "dark") {
+        mermaid.initialize({ theme: 'dark' });
+      } else {
+        mermaid.initialize({ theme: 'default' });
+      }
+      
+      var mermaids = [];
+      [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
+      mermaids.forEach(function(elem) {
+        var elemParentNode = elem.parentNode;
+
+        if (elemParentNode !== document.body) {
+          elemParentNode.parentNode.insertBefore(elem, elemParentNode);
+          elemParentNode.parentNode.removeChild(elemParentNode);
+        }
+
+        var newElemWrapper = document.createElement('div');
+        newElemWrapper.classList.add('mermaid');
+        newElemWrapper.innerHTML = elem.innerHTML;
+        elem.replaceWith(newElemWrapper);
+      });
+    }
+    // =================================================================
+    
+
+    // ============================= katex =============================
+    if (lib && lib.includes('katex')) {
+      var mathElements = document.getElementsByClassName('math');
+      var options = {
+        delimiters: [
+          { left: "$$", right: "$$", display: true },
+          { left: "\\[", right: "\\]", display: true },
+          { left: "$", right: "$", display: false },
+          { left: "\\(", right: "\\)", display: false }
+        ],
+      };
+
+      renderMathInElement(document.querySelector('.single__contents'), options);
+    }
+    // =================================================================
+
+
+    // ========================= flowchart.js ==========================
+    if (lib && lib.includes('flowchartjs')) {
+      {{ $flowchartjs := .Site.Data.flowchartjs }}
+      var options = JSON.parse({{ $flowchartjs | jsonify }});
+      var jsonContent = null;
+
+      var flowchartPrefix = "language-flowchart";
+      var index = 0;
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + flowchartPrefix + "]"), function(x){
+          x.style.display = 'none'
+          x.parentNode.style.backgroundColor = "transparent"
+          jsonContent = x.innerText;
+
+          var node0 = document.createElement('div');
+          node0.id = 'flowchart' + index;
+          x.parentNode.insertBefore(node0, x);
+
+          var diagram = flowchart.parse(jsonContent);
+          diagram.drawSVG("flowchart"+index, options);
+
+          index +=1;
+      });      
+    }
+    // =================================================================
+
+
+    // =========================== chart.js ============================
+    if (lib && lib.includes('chart')) {
+      var borderColor = "#666";
+      var bgColor = "#ddd";
+      var borderWidth = 2;
+
+      Chart.defaults.global.elements.rectangle.borderWidth = borderWidth;
+      Chart.defaults.global.elements.rectangle.borderColor = borderColor;
+      Chart.defaults.global.elements.rectangle.backgroundColor = bgColor;
+
+      Chart.defaults.global.elements.line.borderWidth = borderWidth;
+      Chart.defaults.global.elements.line.borderColor = borderColor;
+      Chart.defaults.global.elements.line.backgroundColor = bgColor;
+
+      Chart.defaults.global.elements.point.borderWidth = borderWidth;
+      Chart.defaults.global.elements.point.borderColor = borderColor;
+      Chart.defaults.global.elements.point.backgroundColor = bgColor;
+
+      var chartPrefix = "language-chart";
+      var index = 0;
+      var jsonContent = null;
+
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        jsonContent = x.innerText;
+        var node0 = document.createElement('canvas');
+        var source = null;
+        node0.height = 200;
+        node0.style.height = 200;
+        node0.id = 'myChart' + index;
+        source = JSON.parse(jsonContent);
+        x.parentNode.insertBefore(node0, x);
+        var ctx = document.getElementById('myChart' + index).getContext('2d');
+        var myChart = new Chart(ctx, source);
+        index += 1;
+      });            
+    }
+    // =================================================================
+    
+  });
+</script>