From 7d6df42519cabcc89115df95d32a3aa9b968e4a6 Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Thu, 1 Jul 2021 16:21:03 +0200
Subject: [PATCH] feat: add mermaid code fences usage

---
 assets/js/clipboard.js                        |  6 ++-
 assets/js/mermaid.js                          |  1 +
 assets/scss/app.scss                          |  2 +-
 assets/scss/common/_dark.scss                 | 10 ++---
 assets/scss/components/_code.scss             |  4 ++
 .../{_diagrams.scss => _mermaid.scss}         |  0
 content/docs/prologue/quick-start.md          | 38 +++++++++++++++----
 layouts/shortcodes/mermaid.html               |  6 +--
 8 files changed, 50 insertions(+), 17 deletions(-)
 rename assets/scss/components/{_diagrams.scss => _mermaid.scss} (100%)

diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js
index d8a95ef..55eec7b 100644
--- a/assets/js/clipboard.js
+++ b/assets/js/clipboard.js
@@ -5,7 +5,11 @@ var pre = document.getElementsByTagName('pre');
 for (var i = 0; i < pre.length; ++ i)
 {
   var element = pre[i];
-  element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  var mermaid = element.getElementsByClassName('language-mermaid')[0];
+
+  if (mermaid == null) {
+    element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  }
 }
 
 var clipboard = new Clipboard('.btn-copy', {
diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index b8b2a82..2ab0b9a 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -7,4 +7,5 @@ var config = {
 
 document.addEventListener('DOMContentLoaded', () => {
   mermaid.initialize(config);
+  mermaid.init(undefined, '.language-mermaid');
 });
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index dea62e6..fc76d8e 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -22,9 +22,9 @@
 @import "components/code";
 @import "components/syntax";
 @import "components/comments";
-@import "components/diagrams";
 @import "components/forms";
 @import "components/images";
+@import "components/mermaid";
 @import "components/search";
 @import "components/tables";
 @import "layouts/footer";
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 44deb6c..7cafd9e 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -232,11 +232,6 @@ body.dark pre code::-webkit-scrollbar-thumb {
   background: $gray-400;
 }
 
-body.dark code:not(.hljs) {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
-}
-
 body.dark pre code:hover {
   scrollbar-width: thin;
   scrollbar-color: $border-dark transparent;
@@ -246,6 +241,11 @@ body.dark pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
 
+body.dark code:not(.hljs):not(.language-mermaid) {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
 body.dark blockquote {
   border-left: 3px solid $border-dark;
 }
diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss
index c53e6f7..eb0c0a0 100644
--- a/assets/scss/components/_code.scss
+++ b/assets/scss/components/_code.scss
@@ -60,3 +60,7 @@ pre code:hover {
 pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
+
+code.language-mermaid {
+  background: none;
+}
diff --git a/assets/scss/components/_diagrams.scss b/assets/scss/components/_mermaid.scss
similarity index 100%
rename from assets/scss/components/_diagrams.scss
rename to assets/scss/components/_mermaid.scss
diff --git a/content/docs/prologue/quick-start.md b/content/docs/prologue/quick-start.md
index 05d8ca7..74f27af 100644
--- a/content/docs/prologue/quick-start.md
+++ b/content/docs/prologue/quick-start.md
@@ -15,6 +15,8 @@ toc: true
 
 ## Flow
 
+### Shortcode
+
 ```md
 {{</* mermaid class="bg-light text-center" */>}}
 graph TD
@@ -33,6 +35,26 @@ graph TD
   C -->|Two| E[Result 2]
 {{< /mermaid >}}
 
+### Code fences
+
+````md
+```mermaid
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+```
+````
+
+```mermaid
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+```
+
 ## Sequence
 
 {{< mermaid >}}
@@ -51,13 +73,15 @@ sequenceDiagram
 
 {{< mermaid >}}
 gantt
-  section Section
-  Completed :done,    des1, 2014-01-06,2014-01-08
-  Active        :active,  des2, 2014-01-07, 3d
-  Parallel 1   :         des3, after des1, 1d
-  Parallel 2   :         des4, after des1, 1d
-  Parallel 3   :         des5, after des3, 1d
-  Parallel 4   :         des6, after des4, 1d
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
 {{< /mermaid >}}
 
 ## Class
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index 58bec09..ebba085 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -3,6 +3,6 @@
     {{ $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
+{{ else -}}
+  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }}
+{{ end -}}