feat: generate sequence diagrams from code blocks (#35)

Close #35

archetypes/default.md

@@ -26,6 +26,10 @@ flowchartDiagrams:
   enable: false
   options: ""
 
+sequenceDiagrams: 
+  enable: false
+  options: ""
+
 ---
 
 <!--more-->

exampleSite/config.toml

@@ -101,10 +101,14 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     clientId = ""           # Your client ID
     clientSecret = ""       # Your client secret
 
-  [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
+  [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-flowchart-diagrams/
     enable = false
     options = ""
 
+  [params.sequenceDiagrams] # see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
+    enable = false
+    options = ""            # default: "{theme: 'simple'}"
+
   [params.busuanzi]         # count web traffic by busuanzi                             # 是否使用不蒜子统计站点访问量
     enable = false
     siteUV = true

exampleSite/content/post/js-sequence-diagrams.md

@@ -0,0 +1,95 @@
+---
+title: "JS Sequence Diagrams"
+date: 2015-03-04T21:57:45+08:00
+draft: false
+
+sequenceDiagrams: 
+  enable: true
+  options: "{theme: 'hand'}"
+---
+
+## Usage
+
+```sequence
+Andrew->China: Says Hello
+Note right of China: China thinks\nabout it
+China-->Andrew: How are you?
+Andrew->>China: I am good thanks!
+```
+
+<!--more-->
+
+    ```sequence
+    Andrew->China: Says Hello
+    Note right of China: China thinks\nabout it
+    China-->Andrew: How are you?
+    Andrew->>China: I am good thanks!
+    ```
+
+## Configuration
+
+Configure for all home and regular pages:
+
+```toml
+[params.sequenceDiagrams]
+  enable = true
+  options = "{theme: 'hand'}"
+```
+
+Configure for a single post in the front matter (**Params in front matter have higher precedence**):
+
+```yml
+sequenceDiagrams: 
+  enable: true
+  options: "{theme: 'hand'}"
+```
+
+### Options
+
+```js
+options = {
+  // Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...).
+  theme: string,
+
+  // CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
+  css_class: string,
+}
+```
+
+See more information from https://github.com/bramp/js-sequence-diagrams.
+
+## Examples
+
+```sequence
+Title: Here is a title
+A->B: Normal line
+B-->C: Dashed line
+C->>D: Open arrow
+D-->>A: Dashed open arrow
+```
+
+    ```sequence
+    Title: Here is a title
+    A->B: Normal line
+    B-->C: Dashed line
+    C->>D: Open arrow
+    D-->>A: Dashed open arrow
+    ```
+
+---
+
+```sequence
+# Example of a comment.
+Note left of A: Note to the\n left of A
+Note right of A: Note to the\n right of A
+Note over A: Note over A
+Note over A,B: Note over both A and B
+```
+
+    ```sequence
+    # Example of a comment.
+    Note left of A: Note to the\n left of A
+    Note right of A: Note to the\n right of A
+    Note over A: Note over A
+    Note over A,B: Note over both A and B
+    ```

layouts/partials/scripts.html

@@ -21,6 +21,22 @@
 </script>
 <script src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.8.0/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>
+{{- end -}}
+
+<!-- js-sequence-diagrams -->
+{{- if and (or .Params.sequenceDiagrams.enable (and .Site.Params.sequenceDiagrams.enable (ne .Params.sequenceDiagrams.enable false))) (or .IsPage .IsHome) -}}
+<script>
+  {{- if .Params.sequenceDiagrams.options -}}
+  window.sequenceDiagramsOptions = {{ .Params.sequenceDiagrams.options | safeJS }};
+  {{- else if .Site.Params.sequenceDiagrams.options -}}
+  window.sequenceDiagramsOptions = {{ .Site.Params.sequenceDiagrams.options | safeJS }};
+  {{- end -}}
+</script>
+<script src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg-min.js" integrity="sha256-oI+elz+sIm+jpn8F/qEspKoKveTc5uKeFHNNVexe6d8=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/underscore@1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.js" integrity="sha384-8748Vn52gHJYJI0XEuPB2QlPVNUkJlJn9tHqKec6J3q2r9l8fvRxrgn/E5ZHV0sP" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.css" integrity="sha384-6QbLKJMz5dS3adWSeINZe74uSydBGFbnzaAYmp+tKyq60S7H2p6V7g1TysM5lAaF" crossorigin="anonymous">
 {{- end }}
 <script type="text/javascript" src="{{ "dist/even.min.js?v=3.0.1" | relURL }}"></script>
 

src/js/even.js

@@ -224,4 +224,23 @@ Even.flowchart = function () {
   }
 }
 
+Even.sequence = function () {
+  if (!window.Diagram) return
+
+  const blocks = document.querySelectorAll('pre code.language-sequence')
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+    const rootElement = block.parentElement
+
+    const container = document.createElement('div')
+    const id = `js-sequence-diagrams-${i}`
+    container.id = id
+    container.className = 'align-center'
+    rootElement.parentElement.replaceChild(container, rootElement)
+
+    const diagram = Diagram.parse(block.childNodes[0].nodeValue)
+    diagram.drawSVG(id, window.sequenceDiagramsOptions ? window.sequenceDiagramsOptions : {theme: 'simple'})
+  }
+}
+
 export {Even}

src/js/main.js

@@ -10,6 +10,7 @@ $(document).ready(function () {
 })
 
 Even.flowchart()
+Even.sequence()
 
 hljs.initHighlighting()
 Even.highlight()

static/dist/even.min.js

@@ -1,2 +1,2 @@
-!function(e){var n={};function t(o){if(n[o])return n[o].exports;var a=n[o]={i:o,l:!1,exports:{}};return e[o].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";var o=t(1);t(2),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.toc(),o.Even.fancybox()}),o.Even.flowchart(),hljs.initHighlighting(),o.Even.highlight()},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o={};o.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},o.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),t=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});t.disableTouch(),n.click(function(){t.toggle()}),t.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),t.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){t.isOpen()&&n.click()})},o._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var t=e.offset().top-20,o=n.offset().top-e.height()-20,a={start:{position:"absolute",top:t},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var n=$(window).scrollTop();n<t?e.css(a.start):n>o?e.css(a.end):e.css(a.process)})}var r=$(".toc-link"),c=$(".headerlink"),i=$(".post-toc-content li"),l=$.map(c,function(e){return $(e).offset().top}),s=$.map(l,function(e){return e-30});$(window).scroll(function(){var e=$(window).scrollTop(),n=function(e,n){for(var t=0;t<e.length-1;t++)if(n>e[t]&&n<=e[t+1])return t;return n>e[e.length-1]?e.length-1:-1}(s,e);if($(r).removeClass("active"),$(i).removeClass("has-active"),-1!==n){$(r[n]).addClass("active");for(var t=r[n].parentNode;"NAV"!==t.tagName;)$(t).addClass("has-active"),t=t.parentNode.parentNode}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n<e.length;n++){var t=e[n],o=t.parentElement,a=t.innerHTML.split(/\n/);""===a[a.length-1]&&a.pop();for(var r=a.length,c="",i=0;i<r;i++)c+='<div class="line">'+(i+1)+"</div>";for(var l="",s=0;s<r;s++)l+='<div class="line">'+a[s]+"</div>";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+c+'</pre></td><td class="code"><pre>'+l+"</pre></td></tr></tbody></table>",o.parentElement.replaceChild(d,o)}},o.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},o._refactorToc=function(e){for(var n=e.children[0],t=n,o=void 0;1===t.children.length&&"UL"===(o=t.children[0].children[0]).tagName;)t=o;t!==n&&e.replaceChild(t,n)},o._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a:first-child"),n=0;n<e.length;n++)e[n].className+=" toc-link";for(var t=1;t<=6;t++)for(var o=document.querySelectorAll(".post-content>h"+t),a=0;a<o.length;a++){var r=o[a];r.innerHTML='<a href="#'+r.id+'" class="headerlink"></a>'+r.innerHTML}},o.flowchart=function(){if(window.flowchart)for(var e=document.querySelectorAll("pre code.language-flowchart"),n=0;n<e.length;n++){var t=e[n],o=t.parentElement,a=document.createElement("div"),r="js-flowchart-diagrams-"+n;a.id=r,a.className="align-center",o.parentElement.replaceChild(a,o),flowchart.parse(t.childNodes[0].nodeValue).drawSVG(r,window.flowchartDiagramsOptions?window.flowchartDiagramsOptions:{})}},n.Even=o},function(e,n){}]);
+!function(e){var n={};function t(o){if(n[o])return n[o].exports;var a=n[o]={i:o,l:!1,exports:{}};return e[o].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";var o=t(1);t(2),$(document).ready(function(){o.Even.backToTop(),o.Even.mobileNavbar(),o.Even.toc(),o.Even.fancybox()}),o.Even.flowchart(),o.Even.sequence(),hljs.initHighlighting(),o.Even.highlight()},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o={};o.backToTop=function(){var e=$("#back-to-top");$(window).scroll(function(){$(window).scrollTop()>100?e.fadeIn(1e3):e.fadeOut(1e3)}),e.click(function(){$("body,html").animate({scrollTop:0})})},o.mobileNavbar=function(){var e=$("#mobile-navbar"),n=$(".mobile-navbar-icon"),t=new Slideout({panel:document.getElementById("mobile-panel"),menu:document.getElementById("mobile-menu"),padding:180,tolerance:70});t.disableTouch(),n.click(function(){t.toggle()}),t.on("beforeopen",function(){e.addClass("fixed-open"),n.addClass("icon-click").removeClass("icon-out")}),t.on("beforeclose",function(){e.removeClass("fixed-open"),n.addClass("icon-out").removeClass("icon-click")}),$("#mobile-panel").on("touchend",function(){t.isOpen()&&n.click()})},o._initToc=function(){var e=$(".post-toc"),n=$(".post-footer");if(e.length){var t=e.offset().top-20,o=n.offset().top-e.height()-20,a={start:{position:"absolute",top:t},process:{position:"fixed",top:20},end:{position:"absolute",top:o}};$(window).scroll(function(){var n=$(window).scrollTop();n<t?e.css(a.start):n>o?e.css(a.end):e.css(a.process)})}var r=$(".toc-link"),c=$(".headerlink"),i=$(".post-toc-content li"),l=$.map(c,function(e){return $(e).offset().top}),s=$.map(l,function(e){return e-30});$(window).scroll(function(){var e=$(window).scrollTop(),n=function(e,n){for(var t=0;t<e.length-1;t++)if(n>e[t]&&n<=e[t+1])return t;return n>e[e.length-1]?e.length-1:-1}(s,e);if($(r).removeClass("active"),$(i).removeClass("has-active"),-1!==n){$(r[n]).addClass("active");for(var t=r[n].parentNode;"NAV"!==t.tagName;)$(t).addClass("has-active"),t=t.parentNode.parentNode}})},o.fancybox=function(){$.fancybox&&($(".post-content").each(function(){$(this).find("img").each(function(){$(this).wrap('<a class="fancybox" href="'+this.src+'" data-fancybox="gallery" data-caption="'+this.title+'"></a>')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n<e.length;n++){var t=e[n],o=t.parentElement,a=t.innerHTML.split(/\n/);""===a[a.length-1]&&a.pop();for(var r=a.length,c="",i=0;i<r;i++)c+='<div class="line">'+(i+1)+"</div>";for(var l="",s=0;s<r;s++)l+='<div class="line">'+a[s]+"</div>";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+c+'</pre></td><td class="code"><pre>'+l+"</pre></td></tr></tbody></table>",o.parentElement.replaceChild(d,o)}},o.toc=function(){var e=document.getElementById("post-toc");if(null!==e){var n=document.getElementById("TableOfContents");null===n?e.parentNode.removeChild(e):(this._refactorToc(n),this._linkToc(),this._initToc())}},o._refactorToc=function(e){for(var n=e.children[0],t=n,o=void 0;1===t.children.length&&"UL"===(o=t.children[0].children[0]).tagName;)t=o;t!==n&&e.replaceChild(t,n)},o._linkToc=function(){for(var e=document.querySelectorAll("#TableOfContents a:first-child"),n=0;n<e.length;n++)e[n].className+=" toc-link";for(var t=1;t<=6;t++)for(var o=document.querySelectorAll(".post-content>h"+t),a=0;a<o.length;a++){var r=o[a];r.innerHTML='<a href="#'+r.id+'" class="headerlink"></a>'+r.innerHTML}},o.flowchart=function(){if(window.flowchart)for(var e=document.querySelectorAll("pre code.language-flowchart"),n=0;n<e.length;n++){var t=e[n],o=t.parentElement,a=document.createElement("div"),r="js-flowchart-diagrams-"+n;a.id=r,a.className="align-center",o.parentElement.replaceChild(a,o),flowchart.parse(t.childNodes[0].nodeValue).drawSVG(r,window.flowchartDiagramsOptions?window.flowchartDiagramsOptions:{})}},o.sequence=function(){if(window.Diagram)for(var e=document.querySelectorAll("pre code.language-sequence"),n=0;n<e.length;n++){var t=e[n],o=t.parentElement,a=document.createElement("div"),r="js-sequence-diagrams-"+n;a.id=r,a.className="align-center",o.parentElement.replaceChild(a,o),Diagram.parse(t.childNodes[0].nodeValue).drawSVG(r,window.sequenceDiagramsOptions?window.sequenceDiagramsOptions:{theme:"simple"})}},n.Even=o},function(e,n){}]);
 //# sourceMappingURL=even.min.js.map