missing resource added, mermaid, math type with katex support. flowchartjs in progress

README.md

@@ -237,6 +237,7 @@ enableSidebarTags = true
 enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
+enableTocSwitch = true
 itemsPerCategory = 5
 enableSideSubscribe = false
 

archetypes/math.md

@@ -0,0 +1,13 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description:
+tags:
+-
+series:
+-
+categories:
+-
+libraries:
+- katex
+---

assets/sass/components/_mermaid.scss

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

assets/sass/main.scss

@@ -162,6 +162,7 @@ $gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};
 @import 'components/whoami';
 @import 'components/switch';
 @import 'components/subs';
+@import 'components/mermaid';
 
 @import 'pages/body';
 @import 'pages/home';

data/_config/_default/params.toml

@@ -21,6 +21,7 @@ enableSidebarTags = true
 enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
+enableTocSwitch = true
 itemsPerCategory = 5
 enableSideSubscribe = false
 

data/lib.toml

@@ -0,0 +1,25 @@
+# js
+[js.mermaid]
+  sri = "sha256-yJ19uNiJfpYvIw0kAA8Io4TByKjEG2xX+7l9nItQw4o="
+  url = "https://cdn.jsdelivr.net/npm/mermaid@8.4.2/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"
+
+# css
+[css.katex]
+  sri = "sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung="
+  url = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"

exampleSite/config.toml

@@ -47,6 +47,7 @@ rssLimit = 100
   enableSidebarSeries = true
   enableSidebarCategories = true
   enableToc = true
+  enableTocSwitch = true
   itemsPerCategory = 5
   enableSideSubscribe = false
   

exampleSite/content/posts/math-typesetting.mmark

@@ -3,8 +3,8 @@ author: Hugo Authors
 title: Math Typesetting
 date: 2019-03-08
 description: A brief guide to setup KaTeX
-markup: mmark
+libraries:
-math: true
+- katex
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
@@ -25,14 +25,6 @@ In this example we will be using [KaTeX](https://katex.org/)
 - To enable KaTex on a per page basis include the parameter `math: true` in content files.
 
 **Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
-{{< math.inline >}}
-{{ if or .Page.Params.math .Site.Params.math }}
-<!-- KaTeX -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
-{{ end }}
-{{</ math.inline >}}
 
 ### Examples
 

layouts/_default/single.html

@@ -7,7 +7,7 @@
     <h2 class="h4 single__title">{{ .Title }}</h2>
     <div class="single__meta">
       <div class="caption">🕓 {{ .Date.Format (i18n "single-dateformat") }} · ☕{{ .ReadingTime }} min read</div>
-    </div>
+    </div>    
     <article class="single__contents">
       {{ .Content }}
     </article>
@@ -17,6 +17,7 @@
     {{ partial "body/related" . }}
     {{ partial "pagination/pagination-single" . }}
     {{ partial "body/photoswipe" . }}
+    {{ partial "body/lib" . }}
   </div>
 </main>
 

layouts/partials/body/lib.html

@@ -0,0 +1,55 @@
+{{ $js := .Site.Data.lib.js }}
+{{ $css := .Site.Data.lib.css }}
+
+{{ if in .Params.Libraries "mermaid" }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mermaid\"></script>" $js.mermaid.url $js.mermaid.sri | safeHTML }}
+  <script>
+    {{ $themeVariant := (index .Site.Params.themeOptions 0) }}
+    var themeVariant = localStorage.getItem('theme') || JSON.parse({{ $themeVariant | jsonify }});
+
+    if (themeVariant === "dark" || themeVariant === "hacker") {
+      mermaid.initialize({ theme: 'dark' });
+    } else {
+      mermaid.initialize({ theme: 'default' });
+    }   
+
+    // mermaid Fix Mermaid.js clash with Highlight.js.  
+    let mermaids = [];
+    [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
+    for (i = 0; i < mermaids.length; i++) {
+      $(mermaids[i]).unwrap('pre');  // Remove <pre> wrapper.
+      $(mermaids[i]).replaceWith(function () {
+        // Convert <code> block to <div> and add `mermaid` class so that Mermaid will parse it.
+        return $("<div />").append($(this).contents()).addClass('mermaid');
+      });
+    }
+</script>
+{{ end }}
+
+{{ if in .Params.Libraries "katex" }}
+  {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" $css.katex.url $css.katex.sri | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"katex\"></script>" $js.katex.url $js.katex.sri | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"katex\"></script>" $js.katex_auto_render.url $js.katex_auto_render.sri | safeHTML }}
+  <script>
+    var mathElements = document.getElementsByClassName('math');
+    var options = [
+      { left: "$$", right: "$$", display: true },
+      { left: "\\(", right: "\\)", display: false },
+      { left: "\\[", right: "\\]", display: true }
+    ];
+
+    renderMathInElement(document.getElementsByClassName('single__contents')[0], options);
+  </script>
+{{ end }}
+
+{{ if in .Params.Libraries "flowchartjs" }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"flowchartjs\"></script>" $js.flowchartjs.url $js.flowchartjs.sri | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"raphael\"></script>" $js.raphael.url $js.raphael.sri | safeHTML }}
+  <script>
+    var diagramContent = $('#diagram').text().trim();
+    $('#diagram').text('');
+
+    // var diagram = flowchart.parse(diagramContent);
+    // diagram.drawSVG('diagram');    
+  </script>
+{{ end }}

layouts/partials/footer/select-theme.html

@@ -49,5 +49,16 @@
         }
       }
     });
+
+    if (mermaid) {
+      if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
+        mermaid.initialize({ theme: 'dark' });
+        location.reload();
+      } else {
+        mermaid.initialize({ theme: 'default' });
+        location.reload();
+      }
+      
+    }
   });
 </script>

layouts/partials/sidebar/sidebar-single.html

@@ -4,10 +4,12 @@
 <div class="sidebar">
   <div class="toc__flexbox">
     <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
-    <label class="switch">
+    {{ if $.Param "enableTocSwitch" }}
-      <input id="toggle-toc" type="checkbox" checked>
+      <label class="switch">
-      <span class="slider round"></span>
+        <input id="toggle-toc" type="checkbox" checked>
-    </label>
+        <span class="slider round"></span>
+      </label>
+    {{ end }}
   </div>
   <div class="toc">    
     <ul id="toc"></ul>

layouts/shortcodes/flowchartjs.html

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