feat(mermaid): improve mermaid style and render

assets/css/_page/_post.scss

@@ -344,6 +344,10 @@
   @import "../_partial/_post/admonition";
 
   .mermaid {
+    width: 100%;
+    margin: 3% auto;
+    text-align: center;
+
     @import "../_mermaid/neutral/index";
 
     .dark-theme & {
@@ -364,6 +368,7 @@
     height: 0;
     padding-bottom: 75%;
     margin: 3% auto;
+    text-align: center;
 
     iframe {
       position: absolute;

assets/js/blog.js

@@ -33,7 +33,7 @@ jQuery(function($) {
     _Blog.dynamicToTop = function() {
         const min = 300;
         var $toTop = $('#dynamic-to-top');
-        $(window).scroll(function() {
+        $(window).scroll(() => {
             var scrollTop = $(window).scrollTop();
             if (typeof document.body.style.maxHeight === 'undefined') {
                 $toTop.css({
@@ -103,7 +103,6 @@ jQuery(function($) {
             && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
             newTocList = temp;
         }
-
         if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
     };
 
@@ -220,19 +219,33 @@ jQuery(function($) {
         }
     };
 
+    _Blog.mermaid = function() {
+        if (window.mermaidMap) {
+            const mermaidAPI = mermaid.mermaidAPI
+            Object.keys(mermaidMap).forEach((id) => {
+                const element = document.getElementById(id);
+                mermaidAPI.render("d" + id, mermaidMap[id], (svgCode) => {
+                    element.innerHTML = svgCode;
+                    const svg = element.firstChild;
+                    svg.style.width = "100%"
+                }, element);
+            });
+        }
+    }
+
     _Blog.echarts = function() {
         if (window.echartsMap) {
             for (let i = 0; i < echartsArr.length; i++) {
                 echartsArr[i].dispose();
             }
             echartsArr = [];
-            Object.keys(echartsMap).forEach(function(id) {
+            Object.keys(echartsMap).forEach((id) => {
                 let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
                 myChart.setOption(echartsMap[id]);
                 echartsArr.push(myChart);
             });
             window.addEventListener("resize", function() {
-                this.setTimeout(function(){
+                this.setTimeout(() => {
                     for (let i = 0; i < echartsArr.length; i++) {
                         echartsArr[i].resize();
                     }
@@ -275,13 +288,14 @@ jQuery(function($) {
         }
     };
 
-    $(document).ready(function() {
+    $(document).ready(() => {
         _Blog.toggleMobileMenu();
         _Blog.toggleTheme();
         _Blog.changeTitle();
         _Blog.dynamicToTop();
         _Blog.chroma();
         _Blog.responsiveTable();
+        _Blog.mermaid();
         _Blog.echarts();
         _Blog.countdown();
         _Blog.typeit();

exampleSite/zh/content/posts/test.md

@@ -1,299 +0,0 @@
----
-title: "Test Page"
-date: 2019-08-04T22:49:56+08:00
-lastmod: 2019-08-17T22:41:56+08:00
-draft: true
-description: "This is a test page."
-show_in_homepage: true
-show_description: false
-
-tags: []
-categories: []
-
-featured_image: ""
-featured_image_preview: ""
-
-comment: false
-toc: true
-autoCollapseToc: true
-math: true
-dev: true
----
-
-## This is a test page
-
-Test all features in development[^link test].
-
-[^link test]: https://www.google.com/
-
-<!--more-->
-
-## Test ECharts
-
-{{< echarts height="500px" >}}
-{
-    title : {
-        text: '某站点用户访问来源',
-        subtext: '纯属虚构',
-        x:'center'
-    },
-    tooltip : {
-        trigger: 'item',
-        formatter: "{a} <br/>{b} : {c} ({d}%)"
-    },
-    legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
-    },
-    series : [
-        {
-            name: '访问来源',
-            type: 'pie',
-            radius : '55%',
-            center: ['50%', '60%'],
-            data:[
-                {value:335, name:'直接访问'},
-                {value:310, name:'邮件营销'},
-                {value:234, name:'联盟广告'},
-                {value:135, name:'视频广告'},
-                {value:1548, name:'搜索引擎'}
-            ],
-            itemStyle: {
-                emphasis: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-            }
-        }
-    ]
-}
-{{< /echarts >}}
-
-## Test Ruby
-
-人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。
-当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴，
-选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。
-
-## Test Music
-
-## Test Toc
-
-Toc
-
-### Toc1
-
-Toc
-
-#### Toc 1-1
-
-Toc
-
-#### Toc 1-2
-
-Toc
-
-#### Toc 1-3
-
-Toc
-
-### Toc2
-
-Toc
-
-#### Toc 2-1
-
-Toc
-
-#### Toc 2-2
-
-Toc
-
-### Toc3
-
-Toc
-
-## Test Table
-
-| Tables        | Are           | Cool  |
-| :------------ |:-------------:| -----:|
-| col 3 is      | right-aligned | $1600 |
-| col 2 is      | centered      |   $12 |
-| zebra stripes | are neat      |    $1 |
-
-## Test Diagram
-
-{{< diagram >}}
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->John: Hello John, how are you?
-    loop Healthcheck
-        John->John: Fight against hypochondria
-    end
-    Note right of John: Rational
-    John-->Alice: Great!
-    John->Bob: How about you?
-    Bob-->John: Jolly good!
-{{< /diagram >}}
-
-## Test kbd
-
-<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
-
-## Test Mixed Lists
-
-Mixed Lists
-
-- item 1
-  * [X] item A
-  * [ ] item B
-    more text
-    1. item a
-    2. itemb
-    3. item c
-  * [X] item C
-- item 2
-- item 3
-
-Really Mixed Lists
-
-- item 1
-  * [X] item A
-  - item B
-    more text
-    1. item a
-    + itemb
-    + [ ] item c
-  1. item C
-1. item 2
-- [X] item 3
-
-## Test fa (Font Awesome)
-
-:(fab fa-weixin fa-2x):
-
-## Test Footnote
-
-This is a footnote[^1]
-
-[^1]: This is a footnote
-
-## Test Admonition
-
-{{% admonition quote %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition quote "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition example "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition bug "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition danger "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition failure "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition warning "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition question "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition success "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition tip "I'm title!" false %}}
-biu biu biu.
-{{% /admonition %}}
-
-{{% admonition info "I'm title!" true %}}
-**biu biu biu.**
-{{% /admonition %}}
-
-{{% admonition note "I'm title!" false %}}
-**biu biu biu.**
-{{% /admonition %}}
-
-{{% admonition type="abstract" title="Test Admonition" %}}
-This is a Admonition.
-{{% /admonition %}}
-
-## Test Highlight
-
-`ls` 命令
-
-```go
-// You can edit this code!
-// Click here and start typing.
-package main
-
-import "fmt"
-
-func main() {
-  fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界")
-}
-```
-
-- This is a list that contains multiple code blocks.
-
-  - Here is an indented block
-
-    ```Code
-    This will still be parsed
-    as a normal indented code block.
-    ```
-
-  - Here is a fenced code block:
-
-    ```Code
-    This will still be parsed
-    as a fenced code block.
-    ```
-
-    > ```Code
-    > Blockquotes?
-    > Not a problem!
-    > ```
-
-## Test Typeit
-
-{{< typeit group="test" tag="h3" >}}
-Here is a story about love...
-{{< /typeit >}}
-
-{{< typeit group="test" code="java" >}}
-u.accepted(); // [2018/01/05](/since/) special
-
-int a = 1;
-{{< /typeit >}}
-
-## Test Img
-
-![Gif](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Title")
-
-## Test Align
-
-{{% align-right %}}
-**Test Text**
-{{% /align-right %}}
-
-## Test Katex
-
-$$ c = \pm\sqrt{a^2 + b^2} $$

layouts/partials/scripts.html

@@ -54,7 +54,8 @@
     {{ $res := resources.Get "js/lib/mermaid/mermaid.min.js" | resources.Minify }}
     {{ $mermaid = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
 {{ end }}
-{{ $mermaid = delimit (slice $mermaid "<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>") "" }}
+{{ $mermaidInit := "<script>mermaid.initialize({startOnLoad: false, theme: null});</script>" }}
+{{ $mermaid = delimit (slice $mermaid $mermaidInit) "" }}
 <!-- ECharts https://github.com/apache/incubator-echarts -->
 {{ $echarts_js := "" }}
 {{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.echarts_js }}
@@ -121,17 +122,18 @@
     {{ if .Params.dev }}
         {{ with .Scratch.Get "echartsMap" }}
             {{ $echarts | safeHTML }}
-            {{ $echartsMap := . }}
             <script>window.echartsMap = {
-                {{ range $key, $var := $echartsMap }}
+                {{ range $key, $var := . }}
                     {{ $key }}: {{ $var | safeJS }},
                 {{ end }}
             };window.echartsArr=[];</script>
         {{ end }}
     {{ end }}
+    {{/* dev feature */}}
 
-    {{ if .Scratch.Get "diagram" }}
+    {{ with .Scratch.Get "mermaidMap" }}
         {{ $mermaid | safeHTML }}
+        <script>window.mermaidMap = {{ . | jsonify | safeJS }};</script>
     {{ end }}
 
     {{ if or .Params.math .Site.Params.math }}

layouts/shortcodes/align-center.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-center">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/align-left.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-left">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/align-right.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="align-right">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/align.html

@@ -0,0 +1,5 @@
+{{ $_hugo_config := `{ "version": 1 }` -}}
+<!-- [left, center, right] -->
+<div class={{ .Get 0 | printf "align-%s" }}>
+    {{- .Inner -}}
+</div>

layouts/shortcodes/countdown.html

@@ -1,6 +1,6 @@
 {{ if .Get "date" -}}
     {{ $date := .Get "date" }}
-    {{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "cd-%s" -}}
+    {{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "countdown-%s" -}}
     {{ $defaultPattern := printf "%%D %s %%H %s %%M %s %%S %s" (T "day") (T "hour") (T "minute") (T "second") }}
     {{ $new := dict $id (dict "date" $date "pattern" (.Get "pattern" | default $defaultPattern)) }}
     {{ with .Page.Scratch.Get "countdownMap" -}}

layouts/shortcodes/dev/echarts.html

@@ -1,10 +1,10 @@
 <!-- shuffle md5 as id -->
-{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
+{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "echarts-%s" -}}
 {{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
 {{ if $echartsMap -}}
-    {{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
+    {{ $echartsMap = .Inner | printf "{%s}" | dict $id | merge $echartsMap -}}
 {{ else -}}
-    {{ $echartsMap = dict $id .Inner -}}
+    {{ $echartsMap = .Inner | printf "{%s}" | dict $id -}}
 {{ end -}}
 {{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
 <div class="echarts" id="{{ $id }}"></div>

layouts/shortcodes/float-right.html

@@ -1,4 +0,0 @@
-{{ $_hugo_config := `{ "version": 1 }` -}}
-<div class="float-right">
-    {{- .Inner -}}
-</div>

layouts/shortcodes/float.html

@@ -1,5 +1,5 @@
 {{ $_hugo_config := `{ "version": 1 }` -}}
-{{ .Page.Scratch.Set "diagram" "true" }}
+<!-- [left, right] -->
-<div class="mermaid">
+<div class={{ .Get 0 | printf "float-%s" }}>
     {{- .Inner -}}
 </div>

layouts/shortcodes/mermaid.html

@@ -0,0 +1,10 @@
+<!-- shuffle md5 as id -->
+{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "mermaid-%s" -}}
+{{ $mermaidMap := .Page.Scratch.Get "mermaidMap" -}}
+{{ if $mermaidMap -}}
+    {{ $mermaidMap = trim .Inner "\n" | dict $id | merge $mermaidMap -}}
+{{ else -}}
+    {{ $mermaidMap = trim .Inner "\n" | dict $id -}}
+{{ end -}}
+{{ .Page.Scratch.Set "mermaidMap" $mermaidMap -}}
+<div class="mermaid" id="{{ $id }}"></div>

layouts/shortcodes/typeit.html

@@ -1,7 +1,7 @@
 <!-- only the trailing newline is retained -->
 {{ $content := replaceRE `(?s)^\n*(.*?)\n*$` "$1\n" .Inner }}
 <!-- shuffle md5 as id -->
-{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "tp-%s" }}
+{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "typeit-%s" }}
 
 <div class={{ .Get "class" | default "typeit" }}>
     <!-- raw html content -->