From b7eda8559341e2b2765abc0a906375c4dcb2f8e9 Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Wed, 30 Jun 2021 20:32:28 +0200
Subject: [PATCH] feat: update mermaid shortcode

---
 assets/js/mermaid.js                 |  8 +++----
 config/_default/config.toml          |  3 ---
 content/docs/prologue/quick-start.md | 33 +++++++++++++++++++++-------
 layouts/shortcodes/mermaid.html      | 11 +++++++---
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index b6d3bfd..7831e65 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -3,8 +3,6 @@ var config = {
   fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
 };
 
-/* eslint-disable no-undef */
-
-mermaid.initialize(config);
-
-/* eslint-enable no-undef */
+document.addEventListener('DOMContentLoaded', () => {
+  mermaid.initialize(config);
+});
diff --git a/config/_default/config.toml b/config/_default/config.toml
index c87068f..d0cc42f 100644
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@@ -92,6 +92,3 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/mermaid"
     target = "assets/js/vendor/mermaid"
-  [[module.mounts]]
-    source = "node_modules/mermaid"
-    target = "static/js/vendor/mermaid"
diff --git a/content/docs/prologue/quick-start.md b/content/docs/prologue/quick-start.md
index 817c5f7..05d8ca7 100644
--- a/content/docs/prologue/quick-start.md
+++ b/content/docs/prologue/quick-start.md
@@ -15,6 +15,16 @@ toc: true
 
 ## Flow
 
+```md
+{{</* mermaid class="bg-light text-center" */>}}
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+{{</* /mermaid */>}}
+```
+
 {{< mermaid class="bg-light text-center">}}
 graph TD
   A[Hard] -->|Text| B(Round)
@@ -54,14 +64,21 @@ gantt
 
 {{< mermaid >}}
 classDiagram
-  classA --|> classB : Inheritance
-  classC --* classD : Composition
-  classE --o classF : Aggregation
-  classG --> classH : Association
-  classI -- classJ : Link(Solid)
-  classK ..> classL : Dependency
-  classM ..|> classN : Realization
-  classO .. classP : Link(Dashed)
+  Class01 <|-- AveryLongClass : Cool
+  <<interface>> Class01
+  Class09 --> C2 : Where am i?
+  Class09 --* C3
+  Class09 --|> Class07
+  Class07 : equals()
+  Class07 : Object[] elementData
+  Class01 : size()
+  Class01 : int chimp
+  Class01 : int gorilla
+  class Class10 {
+    <<service>>
+    int id
+    size()
+  }
 {{< /mermaid >}}
 
 ## State
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index d26624e..58bec09 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,3 +1,8 @@
-<div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
-  {{- .Inner -}}
-</div>
\ No newline at end of file
+{{ if .Site.Params.options.mermaid -}}
+  <div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
+    {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
+    {{ replaceRE "(```\\s+$)" "" $data -}}
+  </div>
+{{ else }}
+  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`"}}
+{{ end }}
\ No newline at end of file