Render mermaid from code fences

.gitignore

@@ -9,6 +9,7 @@
 /exampleSite/public/
 /exampleSite/config/development/
 CHANGELOG.md
+VERSION
 
 # translation envs
 exampleSite/content/de

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.

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 }}

src/js/mermaid.js

@@ -18,13 +18,20 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
   import("mermaid")
     .then(({ default: md }) => {
+      // Configure mermaid with matching color scheme
       md.initialize({
         flowchart: { useMaxWidth: true },
         theme: theme,
         themeVariables: {
           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))
 })