- Add optional support for mermaid charts

Author: DannyBen

README.md

@@ -51,6 +51,7 @@ $ alias madness='docker run --rm -it -v $PWD:/docs -p 3000:3000 dannyben/madness
 - Can optionally show additional file types in the navigation menu (e.g. PDF
   files).
 - Optional support for `[[Short Link]]` syntax.
+- Optional support for Mermaid diagrams.
 - Optional basic authentication.
 - Support for extended markdown syntax, such as footnotes and syntax
   highlighting.
@@ -153,6 +154,10 @@ auto_toc: true
 # enable syntax highlighter for code snippets
 highlighter: true
 
+# enable mermaid diagramming and charting
+# put your diagram code inside <div class='mermaid'>...</div>
+mermaid: false
+
 # enable the copy to clipboard icon for code snippets
 copy_code: true
 
@@ -258,6 +263,11 @@ specifying internal links, where `[[Anything]]` will be converted to
 `[Anything](Anything)`, which will then be rendered as an internal link to a
 file or a directory in the same directory as the file itself.
 
+### Mermaid Diagrams and Charts
+
+When the `mermaid` option is enabled, you may display any mermaid diagram in
+your document by enclosing it in a `<div class='mermaid'>...</div>` block.
+
 ### Table of Contents Generation
 
 #### Site-wide

app/public/js/vendor/mermaid.min.js

@@ -17,5 +17,10 @@ html
       script src="#{config.base_uri}/js/vendor/clipboard.min.js"
       script src="#{config.base_uri}/js/clipboard.js"
 
+    - if config.mermaid
+      script src="#{config.base_uri}/js/vendor/mermaid.min.js"
+      javascript:
+        mermaid.initialize({startOnLoad:true});
+
   body
     == yield

app/views/layout.slim

@@ -6,7 +6,7 @@ class Pandoc
       include ServerHelper
 
       def render(text)
-        PandocRuby.new(text, [{ from: :markdown, to: :html }], *options).convert
+        PandocRuby.new(text, [{ from: :gfm, to: :html }], *options).convert
       end
 
     private

lib/madness/rendering/pandoc.rb

@@ -64,6 +64,7 @@ def defaults
         auto_nav:          true,
         auto_toc:          true,
         highlighter:       true,
+        mermaid:           false,
         copy_code:         true,
         shortlinks:        false,
         source_link:       nil,

lib/madness/settings.rb

@@ -42,6 +42,10 @@ auto_toc: true
 # enable syntax highlighter for code snippets
 highlighter: true
 
+# enable mermaid diagramming and charting
+# put your diagram code inside <div class='mermaid'>...</div>
+mermaid: false
+
 # enable the copy to clipboard icon for code snippets
 copy_code: true
 

lib/madness/templates/madness.yml

@@ -37,6 +37,7 @@ <h2 id="table-of-contents">Table of Contents</h2>
 <li><a href="#images-and-static-files">Images and Static Files</a></li>
 <li><a href="#automatic-h1">Automatic H1</a></li>
 <li><a href="#shortlinks">Shortlinks</a></li>
+<li><a href="#mermaid-diagrams-and-charts">Mermaid Diagrams and Charts</a></li>
 <li><a href="#table-of-contents-generation">Table of Contents Generation</a></li>
 <li><a href="#hidden-directories">Hidden Directories</a></li>
 <li><a href="#controlling-sort-order">Controlling Sort Order</a></li>
@@ -82,6 +83,7 @@ <h2 id="feature-highlights">Feature Highlights</h2>
 <li>Can optionally show additional file types in the navigation menu (e.g. PDF
 files).</li>
 <li>Optional support for <code>[[Short Link]]</code> syntax.</li>
+<li>Optional support for Mermaid diagrams.</li>
 <li>Optional basic authentication.</li>
 <li>Support for extended markdown syntax, such as footnotes and syntax
 highlighting.</li>
@@ -171,6 +173,10 @@ <h2 id="configuration-file">Configuration File</h2>
 <span class="c1"># enable syntax highlighter for code snippets</span>
 <span class="na">highlighter</span><span class="pi">:</span> <span class="kc">true</span>
 
+<span class="c1"># enable mermaid diagramming and charting</span>
+<span class="c1"># put your diagram code inside &lt;div class='mermaid'&gt;...&lt;/div&gt;</span>
+<span class="na">mermaid</span><span class="pi">:</span> <span class="kc">false</span>
+
 <span class="c1"># enable the copy to clipboard icon for code snippets</span>
 <span class="na">copy_code</span><span class="pi">:</span> <span class="kc">true</span>
 
@@ -273,6 +279,11 @@ <h3 id="shortlinks">Shortlinks</h3>
 <code>[Anything](Anything)</code>, which will then be rendered as an internal link to a
 file or a directory in the same directory as the file itself.</p>
 
+<h3 id="mermaid-diagrams-and-charts">Mermaid Diagrams and Charts</h3>
+
+<p>When the <code>mermaid</code> option is enabled, you may display any mermaid diagram in
+your document by enclosing it in a <code>&lt;div class=&#39;mermaid&#39;&gt;...&lt;/div&gt;</code> block.</p>
+
 <h3 id="table-of-contents-generation">Table of Contents Generation</h3>
 
 <h4 id="site-wide">Site-wide</h4>

site/index.html

@@ -9,6 +9,7 @@
             auto_nav:  true
             auto_toc:  true
          highlighter:  true
+             mermaid:  ~
            copy_code:  true
           shortlinks:  ~
          source_link:  ~

spec/approvals/cli/config/show

@@ -9,6 +9,7 @@
             auto_nav:  true
             auto_toc:  true
          highlighter:  true
+             mermaid:  ~
            copy_code:  true
           shortlinks:  ~
          source_link:  ~

spec/approvals/cli/config/show-non-default

@@ -15,6 +15,7 @@
 - tmp/theme-test/public/js/vendor
 - tmp/theme-test/public/js/vendor/clipboard.min.js
 - tmp/theme-test/public/js/vendor/jquery.min.js
+- tmp/theme-test/public/js/vendor/mermaid.min.js
 - tmp/theme-test/styles
 - tmp/theme-test/styles/_anchor.scss
 - tmp/theme-test/styles/_breadcrumbs.scss