Chart.js, Viz, Sequence Diagram, Wavedrom support

assets/js/zzo.js

@@ -104,4 +104,7 @@ $(document).ready(function() {
       $(this).removeClass('active');
     }
   });
+
+  // highlight
+  $("pre[class*='language-']").removeAttr("style");
 });

assets/sass/components/_diagram.scss

@@ -1,4 +1,4 @@
-/* Mermaid.js div */
+// mermaid
 .mermaid {
     width: 100%;
     text-align: center;
@@ -6,6 +6,45 @@
     overflow: auto;
 }
 
+// flowchart.js
 .diagram {
     overflow: auto;
 }
+
+// js-sequence-diagram
+.language-msc {
+    background: #fcfcfa !important;
+}
+
+// .sequence text {
+//     @include themify($themes) {
+//         fill: themed('body-color');
+//     }
+// }
+
+// .sequence path {
+//     @include themify($themes) {
+//         fill: themed('body-background-color');
+//     }
+// }
+
+// chart.js
+.language-chart {
+    background: #fcfcfa !important;
+}
+
+// wavedrom
+.language-wave {    
+    background: #fcfcfa !important;
+}
+
+// div[id^=WaveDrom_Display] {
+//     background-color: #FCFCFA;
+//     border-radius: 0.25rem;
+// }
+
+// viz.js
+.language-viz-dot {
+    background: transparent !important;
+}
+

assets/sass/components/_whoami.scss

@@ -21,12 +21,13 @@
   }
 
   &__title {
+    font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     padding-bottom: 0.5rem;    
   }
   
   &__desc {
-    
+    font-size: 1rem;
   }
 }

assets/sass/layout/_navigation.scss

@@ -115,6 +115,7 @@
 
   &__title {
     height: $grid_navbar_height;
+    font-size: 1.5rem;
     @include flexbox();
     @include align-items(center);    
     

assets/sass/pages/_single.scss

@@ -4,6 +4,7 @@
   width: 100%;
 
   &__title {
+    font-size: 2.5rem;
     font-weight: 900;
     font-family: $single_title_font;
     line-height: 3rem;
@@ -73,7 +74,7 @@
 
     pre {
       @include themify($themes) {        
-        background-color: themed("content-pre-background-color") !important;
+        background-color: themed("content-pre-background-color");
       }
       border-radius: 0.5rem;
       position: relative;

assets/sass/themes/_dark.scss

@@ -101,4 +101,5 @@ $dark: (
     gallery-mask-color: #FCFCFA,
     gallery-mask-background-color: rgba(0, 0, 0, 0.7),
     avatar-background-color: #403E41,
+    language-background-color: #bdbdbd,
 );

data/lib.toml

@@ -27,6 +27,44 @@
   sri = "sha256-ZATCxHgcbalqi3AxHm7sPmwbfs3oZ4feGmCARVDmXig="
   url = "https://cdn.jsdelivr.net/npm/swiper@5.2.0/js/swiper.min.js"
 
+[js.webfont]
+  sri = "" # no sri
+  url = "https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js"
+
+[js.snap_svg]
+  sri = "" # no sri
+  url = "https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg.min.js"
+
+[js.lodash]
+  sri = "sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ="
+  url = "https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"
+
+[js.sequence_diagram]
+  sri = "sha256-eadHf9g1REH9Wvp2FLV/D9vKNvQUFKuVPgWFvmMQxBE="
+  url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.js"
+
+[js.chart]
+  sri = "sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI="
+  url = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
+
+[js.wavedrom]
+  sri = "sha256-IDuClDzRPosOM4bqD2e6ANDjqDwqNJrQxvXvegg47eI="
+  url = "https://cdn.jsdelivr.net/npm/wavedrom@2.1.6/wavedrom.min.js"
+
+[js.wavedrom_skin]
+  sri = "sha256-AcH/tECvCrfgPUHK98GALAPyAE7XpAYyEsbpmQrniFo="
+  url = "https://cdn.jsdelivr.net/npm/wavedrom@2.1.6/skins/default.js"
+
+[js.viz]
+  sri = "" # no sri
+  url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.min.js"
+
+[js.viz_render]
+  sri = "sha256-Ogqs510LFnekr9o7OLdpelaaAmNss9egQRTyzCqV2NQ="
+  url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js"
+
+
+
 
 
 # css
@@ -38,6 +76,9 @@
   sri = "sha256-s2QA0JtYEOOqRUyzKN+k2a/RxcimDuF2HZBdsosQRbM="
   url = "https://cdn.jsdelivr.net/npm/swiper@5.2.0/css/swiper.min.css"
 
+[css.sequence_diagram]
+  sri = "sha256-On01v36B8LRDuL2tqhqs7Gb3Cm/NIpsLFy4OarOodUA="
+  url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.css"
 
 
 

data/msc.json

@@ -0,0 +1,3 @@
+{
+  "theme": "hand"
+}

exampleSite/content/_index.md

@@ -0,0 +1,72 @@
+---
+header:
+  - type: text
+    height: 235
+    paddingX: 50
+    paddingY: 0
+    align: left
+    title:
+      - header title1
+      - header title2
+    subtitle:
+      - header subtitle1
+      - header subtitle2
+    titleFontSize: 44
+    subtitleFontSize: 16
+    spaceBetweenTitleSubtitle: 20
+  
+  - type: img
+    image: images/header/background.jpg
+    height: 235
+    paddingX: 50
+    paddingY: 0
+    align: center
+    title:
+      - header title1
+      - header title2
+    subtitle:
+      - header subtitle1
+      - header subtitle2
+    titleFontSize: 44
+    subtitleFontSize: 16
+    spaceBetweenTitleSubtitle: 20
+
+  - type: slide
+    height: 235
+    slide:
+      - paddingX: 50
+        paddingY: 0
+        align: left
+        image: images/header/background.jpg
+        title:
+          - header title1
+        subtitle:
+          - header subtitle1
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+
+      - paddingX: 50
+        paddingY: 0
+        align: center
+        image: images/header/background.jpg
+        title:
+          - header title2
+        subtitle:
+          - header subtitle2
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+
+      - paddingX: 50
+        paddingY: 0
+        align: right
+        image: images/header/background.jpg
+        title:
+          - header title3
+        subtitle:
+          - header subtitle3
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+---

exampleSite/content/posts/test-chartjs.md

@@ -0,0 +1,51 @@
+---
+title: "Chart support"
+date: 2019-11-18T12:00:06+09:00
+description: "Simple yet flexible JavaScript charting for designers & developers"
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- chart
+featured_image: "feature1/graph.png"
+---
+
+```chart
+{
+    "type": "bar",
+    "data": 
+       {
+        "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
+        "datasets": [{
+            "label": "# of Votes",
+            "data": [12, 19, 3, 5, 3, 8]
+        }]
+    }
+}
+```
+
+```chart
+    {
+    "type": "line",
+        "data": {
+            "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
+            "datasets": [
+            {
+                "label": "# of Votes",
+                "data": [12, 19, 3, 5, 2, 3],
+                "backgroundColor":"transparent",
+                "borderColor":"orange"
+            },
+            {
+                "label": "Some other set",
+                "data": [15, 8, 13, 5, 5, 9],
+                "backgroundColor":"transparent",
+                "borderColor":"#44ccff"
+            }
+            ]
+        }
+    }
+```

exampleSite/content/posts/test-flowchart.md

@@ -1,5 +1,5 @@
 ---
-title: "Flowchart Test"
+title: "Flowchart support"
 date: 2019-11-14T12:00:06+09:00
 description: "flowchart.js is a flowchart DSL and SVG render that runs in the browser and terminal.
 Nodes and connections are defined in separately so that nodes can be reused and connections can be quickly changed."

exampleSite/content/posts/test-js-sequence-diagrams.md

@@ -0,0 +1,28 @@
+---
+title: "JS Sequence Diagram support"
+date: 2019-11-18T12:00:06+09:00
+description: "Generates UML sequence diagrams from simple text"
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- msc
+featured_image: "feature2/transfer.png"
+---
+
+```msc
+Alice->Bob: Hello Bob, how are you?
+Note right of Bob: Bob thinks
+Bob-->Alice: I am good thanks!
+```
+
+```msc
+Title: Here is a title
+A->B: Normal line
+B-->C: Dashed line
+C->>D: Open arrow
+D-->>A: Dashed open arrow
+```

exampleSite/content/posts/test-katext.md

@@ -1,5 +1,5 @@
 ---
-title: "Katex Test"
+title: "Katex support"
 date: 2019-11-15T12:00:06+09:00
 description: "KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web."
 tags:

exampleSite/content/posts/test-mathjax.md

@@ -1,5 +1,5 @@
 ---
-title: "MathJax Test"
+title: "MathJax support"
 date: 2019-11-16T12:00:06+09:00
 description: "A JavaScript display engine for mathematics that works in all browsers.No more setup for readers. It just works."
 tags:

exampleSite/content/posts/test-mermaid.md

@@ -1,5 +1,5 @@
 ---
-title: "Mermaid Test"
+title: "Mermaid support"
 date: 2019-11-17T12:00:06+09:00
 description: "Generate diagrams, charts, graphs or flows from markdown-like text via javascript."
 tags:

exampleSite/content/posts/test-viz.md

@@ -0,0 +1,45 @@
+---
+title: "Viz support"
+date: 2019-11-18T21:00:06+09:00
+description: "A hack to put Graphviz on the web."
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- viz
+featured_image: "feature2/graph.png"
+---
+
+```viz-dot
+  digraph G {
+
+	subgraph cluster_0 {
+		style=filled;
+		color=lightgrey;
+		node [style=filled,color=white];
+		a0 -> a1 -> a2 -> a3;
+		label = "process #1";
+	}
+
+	subgraph cluster_1 {
+		node [style=filled];
+		b0 -> b1 -> b2 -> b3;
+		label = "process #2";
+		color=blue
+	}
+	start -> a0;
+	start -> b0;
+	a1 -> b3;
+	b2 -> a3;
+	a3 -> a0;
+	a3 -> end;
+	b3 -> end;
+
+	start [shape=Mdiamond];
+	end [shape=Msquare];
+}
+
+```

exampleSite/content/posts/test-wavedrom.md

@@ -0,0 +1,24 @@
+---
+title: "Wavedrom support"
+date: 2019-11-18T18:00:06+09:00
+description: "WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics."
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- wavedrom
+featured_image: "feature1/wave.png"
+---
+
+```wave
+{ 
+  "signal": [ {"name": "CLK", "wave": "p.....|..."},
+            {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]},
+            {"name": "REQ", "wave": "0.1..0|1.0"},
+            {},
+            {"name": "ACK", "wave": "1.....|01."}
+]}
+```

layouts/_default/baseof.html

@@ -5,8 +5,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
-    {{ partial "head/scripts" . }}    
+    {{ partialCached "head/scripts" . }}    
-    {{ partial "head/styles" . }}
+    {{ partialCached "head/styles" . }}
     {{ partial "head/meta" . }}
     {{ partial "head/meta_json_ld" . }}
     {{ partial "head/service" . }}

layouts/_default/single.html

@@ -4,7 +4,7 @@
   {{ partial "body/breadcrumb" . }}
   {{ end }}
   <div class="single">
-    <h2 class="h4 single__title">{{ .Title }}</h2>
+    <h2 class="single__title">{{ .Title }}</h2>
     <div class="single__meta">
       <div class="caption">🕓 {{ .Date.Format (i18n "single-dateformat") }} · ☕{{ .ReadingTime }} min read</div>
     </div>    

layouts/partials/body/lib.html

@@ -3,6 +3,7 @@
 
 {{ 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 }});
@@ -30,6 +31,7 @@
   {{ 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 = [
@@ -63,6 +65,7 @@
 
 {{ if in .Params.Libraries "mathjax" }}
   {{ printf "<script async src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mathjax\"></script>" $js.mathjax.url $js.mathjax.sri | safeHTML }}
+  
   <script>
     window.MathJax = {
       tex: {
@@ -77,3 +80,127 @@
     };
   </script>
 {{ end }}
+
+{{ if in .Params.Libraries "msc" }}  
+  {{ printf "<script src=\"%s\" crossorigin=\"anonymous\" title=\"webfont\"></script>" $js.webfont.url | safeHTML }}
+  {{ printf "<script src=\"%s\" crossorigin=\"anonymous\" title=\"snap_svg\"></script>" $js.snap_svg.url | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"lodash\"></script>" $js.lodash.url $js.lodash.sri | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"sequence_diagram\"></script>" $js.sequence_diagram.url $js.sequence_diagram.sri | safeHTML }}
+  {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" $css.sequence_diagram.url $css.sequence_diagram.sri | safeHTML }}
+  
+  <script>
+    {{ $msc := .Site.Data.msc }}
+    var options = JSON.parse({{ $msc | jsonify }});
+    var chartPrefix = "language-msc";
+
+    var index = 0;
+    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+      x.style.display = 'none'
+      x.parentNode.style.backgroundColor = "transparent"
+      jsonContent = x.innerText;
+
+      node0 = document.createElement('div');
+      node0.id = 'msc' + index;
+      x.parentNode.insertBefore(node0, x);
+
+      var diagram = Diagram.parse(jsonContent);
+      diagram.drawSVG("msc" + index, options);
+
+      index += 1;
+    });
+  </script>
+{{ end }}
+
+{{ if in .Params.Libraries "chart" }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"chart\"></script>" $js.chart.url $js.chart.sri | safeHTML }}
+  <script>
+    var chartPrefix = "language-chart";
+    // setting defaults
+    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 index = 0;
+    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function(x){
+      x.style.display = 'none'
+      x.parentNode.style.backgroundColor = "transparent"
+      jsonContent = x.innerText;
+
+      node0 = document.createElement('canvas');
+      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>
+{{ end }}
+
+{{ if in .Params.Libraries "wavedrom" }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"wavedrom\"></script>" $js.wavedrom.url $js.wavedrom.sri | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"wavedrom_skin\"></script>" $js.wavedrom_skin.url $js.wavedrom_skin.sri | safeHTML }}
+
+  <script>
+    var wavePrefix = "language-wave";
+
+    var index = 0;
+    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + wavePrefix + "]"), function(x){
+      x.style.display = 'none'
+      x.parentNode.style.backgroundColor = "transparent"
+      jsonContent = x.innerText;
+
+      node0 = document.createElement('div');
+      node0.id = 'WaveDrom_Display_' + index;
+      source = JSON.parse(jsonContent);
+      x.parentNode.insertBefore(node0, x);
+
+      WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
+      index += 1;
+    });
+  </script>
+{{ end }}
+
+{{ if in .Params.Libraries "viz" }}
+  {{ printf "<script src=\"%s\" crossorigin=\"anonymous\" title=\"viz\"></script>" $js.viz.url | safeHTML }}
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"viz_render\"></script>" $js.viz_render.url $js.viz_render.sri | safeHTML }}
+  
+  <script>
+  (function(){
+    var vizPrefix = "language-viz-";
+    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function(x){
+      x.style.display = 'none'
+      x.parentNode.style.backgroundColor = "transparent"
+
+      var engine;
+      x.getAttribute("class").split(" ").forEach(function(cls){
+          if (cls.startsWith(vizPrefix)) {
+              engine = cls.substr(vizPrefix.length);
+          }
+      });
+
+      var viz = new Viz();
+      viz.renderSVGElement(x.innerText, {engine:engine})
+      .then(function(element) {
+          element.style.width = "100%";
+          x.parentNode.insertBefore(element, x);
+      })
+    });
+  })();
+  </script>
+{{ end }}

layouts/partials/body/whoami.html

@@ -16,10 +16,10 @@
     {{ end }}
   </div>
   <div>
-    <div class="whoami__title h6">
+    <div class="whoami__title">
       {{ .Site.Params.myname }}
     </div>
-    <div class="whoami__desc p2">
+    <div class="whoami__desc">
       {{ .Site.Params.whoami }}
     </div>
   </div>

layouts/partials/navbar/site-nav.html

@@ -6,7 +6,7 @@
     </a>
     {{ end }}
     <a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="navbar__title-link">
-      <h6 class="navbar__title h6">{{ .Site.Params.logoText }}</h6>
+      <h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
     </a>    
   </div>
   <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">

layouts/partials/sidebar/site-bio.html

@@ -7,11 +7,11 @@
       <img src="{{ $src }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
     {{ else }}
       {{ if (fileExists "static/images/whoami/avatar.png") }}
-        <img src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
       {{ else if (fileExists "static/images/whoami/avatar.jpg") }}
-        <img src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
       {{ else }}
-        <img src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
       {{ end }}      
     {{ end }}
   </div>