Merge pull request #117 from davidovich/adds-mermaid

adds mermaid support

10 files changed, 116 insertions, 7 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index b201cf0..c29b219 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,7 +19,7 @@ unsafe = true
 # choose between Hugo compile-time or Highlight.js
 # syntax highlighting for code inside of code fences
 [markup.highlight]
-codeFences = false  # use highlight.js 
+codeFences = false  # use highlight.js
 # codeFences = true  # use hugo highlighting at compile time
 style = "tango"  # set a style for hugo highlighting
 
@@ -34,4 +34,4 @@ history = true
 # used in content/template-example
 [params.reveal_hugo.templates.grey]
 background = "#424242"
-transition = "convex"
\ No newline at end of file
+transition = "convex"
diff --git a/exampleSite/content/home/features.md b/exampleSite/content/home/features.md
index 5d70186..ce89fe7 100644
--- a/exampleSite/content/home/features.md
+++ b/exampleSite/content/home/features.md
@@ -21,5 +21,5 @@ weight = 10
 - Shortcodes for fragments, sections, slides & more
 - All Reveal.js parameters can be customized
 - Any Hugo section can be output as a presentation
+- Supports mermaid codeblocks
 - Supports offline development or using a CDN
-
diff --git a/exampleSite/content/home/shortcodes/mermaid.md b/exampleSite/content/home/shortcodes/mermaid.md
new file mode 100644
index 0000000..b9c04ac
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/mermaid.md
@@ -0,0 +1,27 @@
++++
+weight = 32
++++
+
+{{< slide id=mermaid-shortcode >}}
+
+# Mermaid diagrams
+
+Use the `mermaid` shortcode if you need to enable reveal-js highligting module
+(`codeFences = false`). Otherwize, when `codeFences = true`, ` ```mermaid ``` ` codeblocks
+are also supported. [More info](hugo-hl-example/#/5).
+
+```code
+{{</* mermaid */>}}
+graph LR
+    A --> B
+    B --> C
+{{</* /mermaid */>}}
+```
+
+results in:
+
+{{< mermaid >}}
+graph LR
+    A --> B
+    B --> C
+{{< /mermaid >}}
diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md
index a9ebe9d..fb81cc1 100644
--- a/exampleSite/content/home/usage.md
+++ b/exampleSite/content/home/usage.md
@@ -53,6 +53,41 @@ Hello program!
 
 ---
 
+### Mermaid
+
+Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams:
+
+````code
+```mermaid
+graph LR
+    A --> B
+    B --> C
+```
+````
+
+Or (see [mermaid shortcode](#/mermaid-shortcode))
+
+```code
+{{</* mermaid */>}}
+graph LR
+    A --> B
+    B --> C
+{{</* /mermaid */>}}
+```
+
+results in:
+
+{{< mermaid >}}
+graph LR
+    A --> B
+    B --> C
+{{< /mermaid >}}
+
+<small>💡 Note: for codeblocks support (` ```mermaid ...``` `), hugo highlighting must be on (codeFences = true in config.toml)</small>
+
+
+---
+
 ### Add slides with other files
 
 Add slides to `content/home/*.md`
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..2ed7001
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+    {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/partials/layout/javascript.html b/layouts/partials/layout/javascript.html
index fe99cb9..4022bf5 100644
--- a/layouts/partials/layout/javascript.html
+++ b/layouts/partials/layout/javascript.html
@@ -57,6 +57,41 @@
 {{ range $.Param "reveal_hugo.plugins" }}
 <script type="text/javascript" src="{{ . | relURL }}"></script>
 {{ end }}
+
+{{/*  check if we need to load mermaid and its render trick.
+      mermaid is not rendered correctly in reveal if we don't hook
+      to the slidechanged event. (mermaid viewBox element has wrong sizes).
+      manage hot-reload by using the reveal ready event.
+*/}}
+{{ $hasMermaid := true }}
+{{ range .Site.RegularPages }}
+{{ if .Store.Get "hasMermaid" }}
+  {{ $hasMermaid = true }}
+{{ end }}
+{{ end }}
+
+{{ if $hasMermaid }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({startOnLoad: false});
+    let render = (event) => {
+      let mermaidElems = event.currentSlide.querySelectorAll('.mermaid');
+      if (!mermaidElems.length){
+          return
+      }
+      mermaidElems.forEach(mermaidElem => {
+          let processed = mermaidElem.getAttribute('data-processed');
+          if (!processed){
+              // https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344
+              mermaid.init(undefined, mermaidElem);
+          }
+      });
+    };
+    Reveal.addEventListener('slidechanged', render);
+    Reveal.addEventListener('ready', render);
+  </script>
+{{ end }}
+
 {{- $custom_js := $.Param "reveal_hugo.custom_js" -}}
 {{- if $custom_js -}}
 <script type="text/javascript" src="{{ $custom_js | relURL }}"></script>
diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html
index 0bed8a9..63f72da 100644
--- a/layouts/partials/reveal-hugo/slides.html
+++ b/layouts/partials/reveal-hugo/slides.html
@@ -1,7 +1,7 @@
 <!-- Use the array of pages passed as a param -->
 {{ range . -}}
 <!-- Don't process empty content files -->
-  {{- if ne (len .Content) 0 -}}
+  {{- if .Content  -}}
     <!-- Remove the <hr /> tag generated by blackfriday for footnotes -->
     {{- $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" -}}
     <!-- <code> blocks processed by Hugo's highlighter have a data-lang attribute. For those, we disable -->
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..2ed7001
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+    {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/netlify.toml b/netlify.toml
index 564244b..78bc7a2 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -3,7 +3,7 @@ command = "hugo -b $URL -s exampleSite"
 publish = "exampleSite/public"
 
 [context.production.environment]
-HUGO_VERSION = "0.92.2"
+HUGO_VERSION = "0.98.0"
 
 [context.deploy-preview.environment]
-HUGO_VERSION = "0.92.2"
+HUGO_VERSION = "0.98.0"
diff --git a/theme.toml b/theme.toml
index 3a2b1b8..f5f1902 100644
--- a/theme.toml
+++ b/theme.toml
@@ -12,4 +12,8 @@ homepage = "https://dzello.com/"
 [original]
 name = "reveal.js"
 homepage = "https://revealjs.com"
-repo = "https://github.com/hakimel/reveal.js/"
\ No newline at end of file
+repo = "https://github.com/hakimel/reveal.js/"
+
+[module]
+    [module.hugoVersion]
+        min = "0.93.0"