From cb08968dd6ad505077e52a86dc8aedd95a490bf4 Mon Sep 17 00:00:00 2001
From: Ben Krieger <ben.krieger@intel.com>
Date: Thu, 18 Aug 2022 10:13:21 -0400
Subject: [PATCH] Render mermaid from code fences

---
 .gitignore                 | 1 +
 README.md                  | 6 ++++++
 layouts/partials/foot.html | 5 +++++
 src/js/mermaid.js          | 7 +++++++
 4 files changed, 19 insertions(+)

diff --git a/.gitignore b/.gitignore
index 2042e769..f36f822b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 /exampleSite/public/
 /exampleSite/config/development/
 CHANGELOG.md
+VERSION
 
 # translation envs
 exampleSite/content/de
diff --git a/README.md b/README.md
index 3b67dda5..3c0b5093 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,12 @@ npm install
 
 # run the build script to build required assets
 npm run build
+
+# build release tarball
+echo "${VERSION:-development}" > VERSION
+tar czf "dist/hugo-geekdoc-${VERSION:-development}.tar.gz" \
+  archetypes assets data i18n images layouts static \
+  theme.toml LICENSE README.md VERSION
 ```
 
 See the [Getting Started Guide](https://geekdocs.de/usage/getting-started/) for details about the different setup options.
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index 99dbffa6..e27cce58 100644
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@@ -4,3 +4,8 @@
   {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
   {{- $searchConfig.Publish -}}
 {{ end }}
+
+<!-- Include mermaid if not already included by a shortcode but a mermaid code fence is present -->
+{{ if and (findRE "[\n^]```mermaid[\n ]" .RawContent) (not (.Scratch.Get "mermaid")) }}
+  <script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
+{{ end }}
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index 178d0297..1b85aa90 100644
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@@ -18,6 +18,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
   import("mermaid")
     .then(({ default: md }) => {
+      // Configure mermaid with matching color scheme
       md.initialize({
         flowchart: { useMaxWidth: true },
         theme: theme,
@@ -25,6 +26,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
           darkMode: darkMode
         }
       })
+
+      // Render mermaid from shortcodes and code fences
+      md.init(undefined, ".mermaid,.language-mermaid", (id) => {
+        // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
+        document.getElementById(id).setAttribute("height", "100%")
+      })
     })
     .catch((error) => console.error(error))
 })