feat: added mermaid support for displaying diagrams (#359)

Jeffrey Forman

21.47.2022 d511a6f520bcc2ffab10ce009239904774ed6bb0

feat: added mermaid support for displaying diagrams (#359)

* add mermaid support for making diagrams

Co-authored-by: Jeffrey Forman <jforman@gmail.com>
Co-authored-by: Alexander Bilz <mail@alexbilz.com>

 README.md

@@ -30,6 +30,7 @@
- Custom JavaScript and CSS (optional)
- Compliant to strict CSP
- Post Series
- Mermaid diagram support (optional)

## Preview the Example Site


 exampleSite/config/_default/params.toml

@@ -73,3 +73,6 @@
icon = "fas fa-envelope"
title = "e-mail"
url = "mailto:mail@example.com"

[mermaid]
# enable = true

 layouts/_default/_markup/render-codeblock-mermaid.html

New file
@@ -0,0 +1,4 @@
<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

 layouts/_default/single.html

@@ -68,6 +68,12 @@


      {{- end -}}

      {{- if (eq .Site.Params.mermaid.enable true) -}}
        {{- partial "mermaid.html" . -}}


      {{- end -}}
    </div>
    <div class="post__footer">
      {{ with .Page.Params.Categories }}

 layouts/partials/mermaid.html

New file
@@ -0,0 +1,7 @@
{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>

{{ end }}