diff options
author | Wang Chucheng <me@wangchucheng.com> | 2021-03-31 18:09:21 +0300 |
---|---|---|
committer | Wang Chucheng <me@wangchucheng.com> | 2021-03-31 18:09:21 +0300 |
commit | 296ed03bc593a54af0eec50c7d4e4b63b7d0ac69 (patch) | |
tree | 6ae468204a3d3f96095001578b4ee8e2d7cb5a7b | |
parent | 4b0bb031102826fccf891a648f44713636f33dd0 (diff) |
feat: add mermaid support
Closes #26
-rw-r--r-- | data/assets.yaml | 7 | ||||
-rw-r--r-- | exampleSite/config/_default/params.yaml | 14 | ||||
-rw-r--r-- | exampleSite/content/posts/diagram-support.md | 41 | ||||
-rw-r--r-- | layouts/partials/head.html | 23 | ||||
-rw-r--r-- | layouts/partials/utils/get-js-configs.html | 13 |
5 files changed, 91 insertions, 7 deletions
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 |