From 5bcf92d8fe6e0b3f350a5122df92ac51c4dbe18d Mon Sep 17 00:00:00 2001
From: olOwOlo <26087907+olOwOlo@users.noreply.github.com>
Date: Mon, 12 Mar 2018 21:44:54 +0800
Subject: feat: generate sequence diagrams from code blocks (#35)
Close #35
---
archetypes/default.md | 4 +
exampleSite/config.toml | 6 +-
exampleSite/content/post/js-sequence-diagrams.md | 95 ++++++++++++++++++++++++
layouts/partials/scripts.html | 16 ++++
src/js/even.js | 19 +++++
src/js/main.js | 1 +
static/dist/even.min.js | 2 +-
static/dist/even.min.js.map | 2 +-
8 files changed, 142 insertions(+), 3 deletions(-)
create mode 100644 exampleSite/content/post/js-sequence-diagrams.md
diff --git a/archetypes/default.md b/archetypes/default.md
index 1a437f3..21255a1 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -26,6 +26,10 @@ flowchartDiagrams:
enable: false
options: ""
+sequenceDiagrams:
+ enable: false
+ options: ""
+
---
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 4e72e0a..8d8c433 100644
--- a/exampleSite/config.toml
+++ b/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
diff --git a/exampleSite/content/post/js-sequence-diagrams.md b/exampleSite/content/post/js-sequence-diagrams.md
new file mode 100644
index 0000000..3ca3a1c
--- /dev/null
+++ b/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!
+```
+
+
+
+ ```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
+ ```
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 01e5e16..4122086 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -21,6 +21,22 @@
+{{- end -}}
+
+
+{{- if and (or .Params.sequenceDiagrams.enable (and .Site.Params.sequenceDiagrams.enable (ne .Params.sequenceDiagrams.enable false))) (or .IsPage .IsHome) -}}
+
+
+
+
+
+
{{- end }}
diff --git a/src/js/even.js b/src/js/even.js
index ca83a93..6b544a4 100644
--- a/src/js/even.js
+++ b/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}
diff --git a/src/js/main.js b/src/js/main.js
index bae31d9..289b8dc 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -10,6 +10,7 @@ $(document).ready(function () {
})
Even.flowchart()
+Even.sequence()
hljs.initHighlighting()
Even.highlight()
diff --git a/static/dist/even.min.js b/static/dist/even.min.js
index f6e2fd8..548a4e4 100644
--- a/static/dist/even.min.js
+++ b/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();no?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;te[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('')})}),$(".fancybox").fancybox({selector:".fancybox",protect:!0}))},o.highlight=function(){for(var e=document.querySelectorAll("pre code"),n=0;n'+(i+1)+"";for(var l="",s=0;s'+a[s]+"";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='",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;nh"+t),a=0;a