From 7043881ae2a712487c0557926d75384a9d35b6ac Mon Sep 17 00:00:00 2001
From: olOwOlo <26087907+olOwOlo@users.noreply.github.com>
Date: Mon, 12 Mar 2018 21:30:47 +0800
Subject: [PATCH] feat: generate flowchart diagrams from code blocks (#35)
---
archetypes/default.md | 5 +
exampleSite/config.toml | 4 +
.../content/post/js-flowchart-diagrams.md | 131 ++++++++++++++++++
layouts/partials/scripts.html | 13 ++
src/js/even.js | 19 +++
src/js/main.js | 2 +
static/dist/even.min.js | 2 +-
static/dist/even.min.js.map | 2 +-
8 files changed, 176 insertions(+), 2 deletions(-)
create mode 100644 exampleSite/content/post/js-flowchart-diagrams.md
diff --git a/archetypes/default.md b/archetypes/default.md
index 2b730f4..1a437f3 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -21,6 +21,11 @@ contentCopyright: false
reward: false
mathjax: false
mathjaxEnableSingleDollar: false
+
+flowchartDiagrams:
+ enable: false
+ options: ""
+
---
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 6376691..4e72e0a 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -101,6 +101,10 @@ 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/
+ enable = false
+ options = ""
+
[params.busuanzi] # count web traffic by busuanzi # 是否使用不蒜子统计站点访问量
enable = false
siteUV = true
diff --git a/exampleSite/content/post/js-flowchart-diagrams.md b/exampleSite/content/post/js-flowchart-diagrams.md
new file mode 100644
index 0000000..2111c52
--- /dev/null
+++ b/exampleSite/content/post/js-flowchart-diagrams.md
@@ -0,0 +1,131 @@
+---
+title: "JS Flowchart Diagrams"
+date: 2015-03-04T21:57:50+08:00
+draft: false
+
+flowchartDiagrams:
+ enable: true
+ options: "{
+ 'x': 0,
+ 'y': 0,
+ 'line-width': 3,
+ 'line-length': 50,
+ 'text-margin': 10,
+ 'font-size': 14,
+ 'font-color': 'black',
+ 'line-color': 'black',
+ 'element-color': 'black',
+ 'fill': 'white',
+ 'yes-text': 'yes',
+ 'no-text': 'no',
+ 'arrow-end': 'block',
+ 'scale': 1,
+ 'i-am-a-comment-1': 'Do not use //!',
+ 'i-am-a-comment-2': 'style symbol types',
+ 'symbols': {
+ 'start': {
+ 'font-color': 'red',
+ 'element-color': 'green',
+ 'fill': 'yellow'
+ },
+ 'end': {
+ 'class': 'end-element'
+ }
+ },
+ 'i-am-a-comment-3': 'even flowstate support ;-)',
+ 'flowstate': {
+ 'request': {'fill': 'blue'}
+ }
+ }"
+---
+
+## Usage
+
+```flowchart
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+
+
+
+ ```flowchart
+ st=>start: Start|past:>http://www.google.com[blank]
+ e=>end: End:>http://www.google.com
+ op1=>operation: My Operation|past
+ op2=>operation: Stuff|current
+ sub1=>subroutine: My Subroutine|invalid
+ cond=>condition: Yes
+ or No?|approved:>http://www.google.com
+ c2=>condition: Good idea|rejected
+ io=>inputoutput: catch something...|request
+
+ st->op1(right)->cond
+ cond(yes, right)->c2
+ cond(no)->sub1(left)->op1
+ c2(yes)->io->e
+ c2(no)->op2->e
+ ```
+
+## Configuration
+
+Configure for all home and regular pages:
+
+```toml
+[params.flowchartDiagrams]
+ enable = true
+ options = ""
+```
+
+Configure for a single post in the front matter (**Params in front matter have higher precedence**):
+
+```yml
+flowchartDiagrams:
+ enable: true
+ options: "{
+ 'x': 0,
+ 'y': 0,
+ 'line-width': 3,
+ 'line-length': 50,
+ 'text-margin': 10,
+ 'font-size': 14,
+ 'font-color': 'black',
+ 'line-color': 'black',
+ 'element-color': 'black',
+ 'fill': 'white',
+ 'yes-text': 'yes',
+ 'no-text': 'no',
+ 'arrow-end': 'block',
+ 'scale': 1,
+ 'i-am-a-comment-1': 'Do not use //!',
+ 'i-am-a-comment-2': 'style symbol types',
+ 'symbols': {
+ 'start': {
+ 'font-color': 'red',
+ 'element-color': 'green',
+ 'fill': 'yellow'
+ },
+ 'end': {
+ 'class': 'end-element'
+ }
+ },
+ 'i-am-a-comment-3': 'even flowstate support ;-)',
+ 'flowstate': {
+ 'request': {'fill': 'blue'}
+ }
+ }"
+```
+
+See more information from https://github.com/adrai/flowchart.js.
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index fc254b5..01e5e16 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -8,6 +8,19 @@
{{ if .Site.Params.fancybox }}{{ end }}
+{{- end -}}
+
+
+{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
+
+
+
{{- end }}
diff --git a/src/js/even.js b/src/js/even.js
index 0d5813a..ca83a93 100644
--- a/src/js/even.js
+++ b/src/js/even.js
@@ -205,4 +205,23 @@ Even._linkToc = function () {
}
}
+Even.flowchart = function () {
+ if (!window.flowchart) return
+
+ const blocks = document.querySelectorAll('pre code.language-flowchart')
+ for (let i = 0; i < blocks.length; i++) {
+ const block = blocks[i]
+ const rootElement = block.parentElement
+
+ const container = document.createElement('div')
+ const id = `js-flowchart-diagrams-${i}`
+ container.id = id
+ container.className = 'align-center'
+ rootElement.parentElement.replaceChild(container, rootElement)
+
+ const diagram = flowchart.parse(block.childNodes[0].nodeValue)
+ diagram.drawSVG(id, window.flowchartDiagramsOptions ? window.flowchartDiagramsOptions : {})
+ }
+}
+
export {Even}
diff --git a/src/js/main.js b/src/js/main.js
index 1764dfd..bae31d9 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -9,5 +9,7 @@ $(document).ready(function () {
Even.fancybox()
})
+Even.flowchart()
+
hljs.initHighlighting()
Even.highlight()
diff --git a/static/dist/even.min.js b/static/dist/even.min.js
index a3795bf..f6e2fd8 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 c=n[o]={i:o,l:!1,exports:{}};return e[o].call(c.exports,c,c.exports,t),c.l=!0,c.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()}),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,c={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(c.end):e.css(c.process)})}var r=$(".toc-link"),i=$(".headerlink"),a=$(".post-toc-content li"),l=$.map(i,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"),$(a).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'+(a+1)+"";for(var l="",s=0;s'+c[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),c=0;c