Merge branch 'dploeger:master' into master

README.md

@@ -84,6 +84,7 @@ You can also further customize the presentation:
 
 - `extra_css`: Additional CSS files added after the reveal [theme][]
 - `highlight_style_sheet`: CSS theme for highlight.js [reveal.js/lib/css/zenburn.css](reveal.js/lib/css/zenburn.css)
+- `mermaid_diagrams`: Feature toggle (defaults to `false`) for [mermaid.js](https://mermaid-js.github.io/) diagrams
 
 ### Specifying reveal options and dependencies
 
@@ -229,3 +230,34 @@ This is only displayed in the speaker notes.
 [dependencies]: https://github.com/hakimel/reveal.js#dependencies
 [posts]: https://jekyllrb.com/docs/posts/#creating-posts
 [theme]: https://github.com/hakimel/reveal.js#theming
+
+### SVG Diagrams
+
+You can use [mermaid-js](https://mermaid-js.github.io/mermaid/) to create SVG diagrams.
+
+Once you’ve enabled the feature by setting `mermaid_diagrams` to `true` in `_config.yml`, code like this:
+
+```markdown
+<mermaid>
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+    D-->E
+</mermaid>
+```
+
+should render like this:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+    D-->E
+```
+
+You can tweak the height of the diagram by following the closing tag with an [element attribute](https://revealjs.com/markdown/#element-attributes): 
+`<!-- .element: style="height: 400px;" -->`.

_config.yml

@@ -29,11 +29,14 @@ reveal_notes_server: false
 reveal_options: 
 
 # Additional reveal.js dependencies
-reveal_dependencies: 
+reveal_dependencies:
 
 # Reveal.js subdirectory
 reveal_path: assets/reveal.js/
 
+# mermaid.js diagram integration
+mermaid_diagrams: true
+
 # Exclude directories and/or files from the conversion
 exclude:
   - Gemfile*

_layouts/reveal.html

@@ -20,7 +20,9 @@
 		<link rel="stylesheet" href="{{ css_file }}">
 	{% endfor %}
 {% endif %}
-
+{% if site.mermaid_diagrams %}
+		<link rel="stylesheet" href="{{ 'css/mermaid.css' | relative_url }}">
+{% endif %}
 		<!-- For syntax highlighting -->
 		{% if site.highlight_style_sheet %}
 			{% assign highlight_style_sheet = site.highlight_style_sheet %}
@@ -61,6 +63,8 @@
 								| replace:'</backgroundimage>','" --> '
 								| replace:'<backgroundimageopacity>','<!-- .slide: data-background-opacity="'
 								| replace:'</backgroundimageopacity>','" -->'
+								| replace:'<mermaid>','<!-- .slide: class="diagram-slide" data-transition="none"--><span class="diagram-data" style="display:none;">'
+								| replace:'</mermaid>','</span><div class="diagram-display" style="height: 300px;"></div>'
 %}{%
 							assign first_char = line | strip
 								| slice: 0,1
@@ -82,7 +86,6 @@
 			</div>
 
 		</div>
-
 		<script src="{{ site.reveal_path }}lib/js/head.min.js"></script>
 		<script src="{{ site.reveal_path }}js/reveal.js"></script>
 
@@ -118,6 +121,10 @@
 					{ src: '{{ site.reveal_path }}plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: '{{ site.reveal_path }}plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 					{ src: '{{ site.reveal_path }}plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+					{% if site.mermaid_diagrams %}
+					{ src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js'},
+					{ src: '{{ 'js/mermaid/reveal-js-mermaid-plugin.js' | relative_url }}'},
+					{% endif %}
 					{% if site.reveal_notes_server %}
 					{ src: '{{ site.reveal_path }}socket.io/socket.io.js', async: true },
 					{ src: '{{ site.reveal_path }}plugin/notes-server/client.js', async: true }

_posts/0000-01-09-svg-diagrams.md

@@ -0,0 +1,22 @@
+# SVG Diagrams
+
+<background>white</background>
+
+You can use [mermaid-js](https://mermaid-js.github.io/mermaid/) to create SVG diagrams.
+
+(enable the feature by setting `mermaid_diagrams` to `true` in `_config.yml`)
+
+<!-- .element: style="font-size: 50%;" -->
+
+<mermaid>
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+    D-->E
+</mermaid>
+<!-- .element: style="height: 250px;" -->
+
+<!-- .element: style="font-size: 50%;" -->You can tweak the height of the diagram by following the closing tag with an [element attribute](https://revealjs.com/markdown/#element-attributes):  
+`<!-- .element: style="height: 400px;" -->`

css/mermaid.css

@@ -0,0 +1,11 @@
+div.diagram-display {
+    position: relative;
+}
+div.diagram-display svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    max-width: 100% !important;
+    width: 100%;
+    height: 100%;
+}

js/mermaid/LICENSE.txt

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Rachael Ludwick
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

js/mermaid/reveal-js-mermaid-plugin.js

@@ -0,0 +1,93 @@
+// Source: https://github.com/ludwick/reveal.js-mermaid-plugin
+
+(function(){
+
+  function fixUpSvgSize(divElem, svgElem) {
+    var width = svgElem.getBoundingClientRect().width;
+    var height = svgElem.getBoundingClientRect().height;
+    var divWidth = divElem.offsetWidth;
+    var divHeight = divElem.offsetHeight;
+
+    if (width > divWidth || height > divHeight) {
+      var viewBox = '0 0 ' + width + ' ' + height;
+      svgElem.setAttribute('viewBox', viewBox);
+      svgElem.setAttribute('width', divElem.offsetWidth);
+      svgElem.setAttribute('height', divElem.offsetHeight);
+    }
+  }
+
+  function getDataElem(slide) {
+    var children = slide.getElementsByClassName('diagram-data');
+    var spans = Array.prototype.filter.call(children, function(element) {
+      return element.nodeName === 'SPAN';
+    });
+
+    var diagramSource = slide.getAttribute('data-diagram-source');
+    if (diagramSource) {
+      var diagramSlides = document.getElementsByClassName('diagram-slide');
+
+      var sourceSlides = Array.prototype.filter.call(diagramSlides, function(slide) {
+        return slide.getAttribute('data-state') === diagramSource;
+      });
+
+      return getDataElem(sourceSlides[0]);
+    } else {
+      return spans[0];
+    }
+  }
+
+  function getDisplayDiv(slide) {
+    var children = slide.getElementsByClassName('diagram-display');
+    var divs = Array.prototype.filter.call(children, function(element) {
+      return element.nodeName === 'DIV';
+    });
+
+    return divs[0];
+  }
+
+  function isDiagramSlide(slide) {
+    return slide.classList.contains("diagram-slide");
+  }
+
+  function destroyDiagram(slide) {
+    if (!isDiagramSlide(slide)) { return; }
+
+    var svgDiv = getDisplayDiv(slide);
+    while (svgDiv.firstChild) {
+      svgDiv.removeChild(svgDiv.firstChild);
+    }
+    svgDiv.removeAttribute("data-processed");
+  }
+
+  function showDiagram(slide) {
+
+    if (!isDiagramSlide(slide)) { return; }
+
+    var dataElem = getDataElem(slide);
+    var svgDiv = getDisplayDiv(slide);
+
+    svgDiv.innerHTML = dataElem.innerHTML;
+
+    mermaid.flowchartConfig
+    var config = {};
+    mermaid.init(config, svgDiv);
+
+    // Fix up svg element size
+    var svgElem = svgDiv.getElementsByTagName("svg")[0]; 
+    if (svgElem) {
+      fixUpSvgSize(svgDiv, svgElem);
+    }
+
+  }
+
+  Reveal.addEventListener( 'slidechanged', function( event ) {
+    if (event.previousSlide) {
+      destroyDiagram(event.previousSlide);
+    }
+
+    if (event.currentSlide) {
+      showDiagram(event.currentSlide);
+    }
+  });
+
+}());