feat: add support for mermaid diagrams (#244)

Brendan Ang

2022-11-27 5f3d4306997e87437b4c9de97aa9eed355133965

feat: add support for mermaid diagrams (#244)

 content/notes/config.md

@@ -57,6 +57,9 @@
enableGitHubEdit: true
GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content

# whether to render mermaid diagrams
enableMermaid: true

# whether to use Operand to power semantic search
# IMPORTANT: replace this API key with your own if you plan on using
# Operand search!

 data/config.yaml

@@ -11,6 +11,7 @@
enableContextualBacklinks: true
enableRecentNotes: false
enableGitHubEdit: true
enableMermaid: true
GitHubLink: https://github.com/jackyzha0/quartz/tree/hugo/content
search:
  enableSemanticSearch: false

 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/partials/head.html

@@ -50,6 +50,8 @@
  <script src="{{$s.Permalink}}"></script>
  {{end}}
  {{partial "katex.html" .}}

  {{partial "mermaid.html" .}}
    
  <script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
  <script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
@@ -145,6 +147,19 @@

        }
      {{end}}

      {{if $data.enableMermaid | default $.Site.Data.config.enableMermaid}}
        var els = document.getElementsByClassName("mermaid");
        if (els.length > 0) {
          import('https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs').then(
            (obj) => {
              // init forces mermaid to render mermaid markdown without waiting
              // for DOMContentLoaded event
              obj.default.init();
            }
          )
        }
      {{end}}
    }

    const init = (doc = document) => {

 layouts/partials/mermaid.html

New file
@@ -0,0 +1,8 @@
{{if $.Site.Data.config.enableMermaid}}
  {{ if .Page.Store.Get "hasMermaid" }}
    <script type="module">
      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  {{ end }}
{{ end }}