From 296ed03bc593a54af0eec50c7d4e4b63b7d0ac69 Mon Sep 17 00:00:00 2001
From: Wang Chucheng <me@wangchucheng.com>
Date: Wed, 31 Mar 2021 23:09:21 +0800
Subject: feat: add mermaid support

Closes #26
---
 data/assets.yaml                             |  7 +++++
 exampleSite/config/_default/params.yaml      | 14 +++++++++-
 exampleSite/content/posts/diagram-support.md | 41 ++++++++++++++++++++++++++++
 layouts/partials/head.html                   | 23 ++++++++++++----
 layouts/partials/utils/get-js-configs.html   | 13 +++++++++
 5 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 exampleSite/content/posts/diagram-support.md
 create mode 100644 layouts/partials/utils/get-js-configs.html

diff --git a/data/assets.yaml b/data/assets.yaml
index a66f90f..ba1e3e1 100644
--- a/data/assets.yaml
+++ b/data/assets.yaml
@@ -29,3 +29,10 @@ katex:
   autoRender:
     url: https://cdn.jsdelivr.net/npm/katex@%s/dist/contrib/auto-render.min.js
     sri: sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa
+
+# Mermaid
+mermaid:
+  version: 8.9.2
+  js:
+    url: https://cdn.jsdelivr.net/npm/mermaid@%s/dist/mermaid.min.js
+    sri: sha256-Zmpaaj+GXFsPF5WdPArSrnW3b30dovldeKsW00xBVwE=
\ No newline at end of file
diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml
index 8828b6d..77f9704 100644
--- a/exampleSite/config/_default/params.yaml
+++ b/exampleSite/config/_default/params.yaml
@@ -50,4 +50,16 @@ comment:
 
   commento:
     # If self-hosting, please enter the url (e.g. https://commento.example.com) here. Otherwise leave empty.
-    url:
\ No newline at end of file
+    url:
+
+diagram:
+  handler: mermaid
+
+  # mermaid:
+  #   # Browse https://mermaid-js.github.io/mermaid/#/Setup to see the options available.
+  #   # You can list the key and value you want as below.
+  #   # Because Hugo's config params are case-insensitive, you need to add `-` or `_` before the uppercase letters.
+  #   # For example, `diagramPadding` should be written as `diagram-Padding` or other acceptable formats.
+  #   theme: 
+  #   flowchart:
+  #     diagram-padding:
diff --git a/exampleSite/content/posts/diagram-support.md b/exampleSite/content/posts/diagram-support.md
new file mode 100644
index 0000000..a93a11d
--- /dev/null
+++ b/exampleSite/content/posts/diagram-support.md
@@ -0,0 +1,41 @@
+---
+title: Diagram Support
+description:
+toc: true
+authors:
+  - example-author
+tags:
+categories:
+series:
+date: '2021-03-31T13:11:22+08:00'
+lastmod: '2021-03-31T13:11:22+08:00'
+featuredImage:
+draft: false
+---
+
+Eureka supports the rendering of diagrams by using Mermaid.
+
+<!--more-->
+
+
+Please include the Mermaid diagram as below. Every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
+
+In order to render the HTML code in the Markdown file correctly, please make sure that `markup.goldmark.renderer.unsafe` in `config.yaml` is true.
+
+Here is one mermaid diagram:
+
+<div class="mermaid">
+  graph TD
+  A[Client] --> B[Load Balancer]
+  B --> C[Server1]
+  B --> D[Server2]
+</div>
+
+And here is another:
+
+<div class="mermaid">
+  graph TD
+  A[Client] -->|tcp_123| B(Load Balancer)
+  B -->|tcp_456| C[Server1]
+  B -->|tcp_456| D[Server2]
+</div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 24f81e9..f85393d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -110,6 +110,7 @@
 {{ return $input }}
 {{ end }}
 
+{{/*  KaTeX  */}}
 {{- if and (eq .Site.Params.math.handler "katex") $enableMath }}
 <link rel="stylesheet" href="{{ printf $assets.katex.css.url $assets.katex.version }}"
   {{ with $assets.katex.css.sri }} integrity="{{ . }}" {{ end }} media="print"
@@ -127,17 +128,27 @@
         { left: "\\(", right: "\\)", display: false },
         { left: "\\[", right: "\\]", display: true }
       ],
-      {{- range $key, $value := .Site.Params.math.katex }}
-      {{- if and (ne $value nil) (ne $value "") }}
-      {{- $key = partial "partials/camelize" $key }}
-      {{- $key | safeJS -}}: {{- $value | safeJS }},
-      {{- end }}
-      {{- end }}
+      {{- partial "utils/get-js-configs" .Site.Params.math.katex | safeJS }}
     });
   });
 </script>
 {{- end }}
 
+{{/*  Mermaid  */}}
+{{- if eq .Site.Params.diagram.handler "mermaid" }}
+<script defer src="{{ printf $assets.mermaid.js.url $assets.mermaid.version }}" {{ with $assets.mermaid.js.sri }}
+  integrity="{{ . }}" {{ end }} crossorigin></script>
+{{- with .Site.Params.diagram.mermaid }}
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    mermaid.initialize({
+      {{- partial "utils/get-js-configs" . | safeJS }}
+    });
+  });
+</script>
+{{- end }}
+{{- end }}
+
 {{- if and .Site.GoogleAnalytics hugo.IsProduction }}
 <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.GoogleAnalytics }}"></script>
diff --git a/layouts/partials/utils/get-js-configs.html b/layouts/partials/utils/get-js-configs.html
new file mode 100644
index 0000000..bb45a25
--- /dev/null
+++ b/layouts/partials/utils/get-js-configs.html
@@ -0,0 +1,13 @@
+{{- range $key, $value := . }}
+  {{- if or $value (eq $value false) }}
+    {{- $key = partial "partials/camelize" $key }}
+    {{- $key }}: 
+    {{- if reflect.IsMap $value }}
+      {
+        {{ partial "utils/get-js-configs" . }}
+      },
+    {{- else -}}
+      "{{ $value }}",
+    {{- end }}
+  {{- end }}
+{{- end }}
\ No newline at end of file
-- 
cgit v1.2.3