mirror of
https://git.adityakumar.xyz/hugo-theme-even.git
synced 2024-11-08 22:49:44 +00:00
feat: generate flowchart diagrams from code blocks (#35)
This commit is contained in:
olOwOlo
parent
1da110d6b1
commit
7043881ae2
8 changed files with 176 additions and 2 deletions
|
|
@ -21,6 +21,11 @@ contentCopyright: false
|
|||
reward: false
|
||||
mathjax: false
|
||||
mathjaxEnableSingleDollar: false
|
||||
|
||||
flowchartDiagrams:
|
||||
enable: false
|
||||
options: ""
|
||||
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
131
exampleSite/content/post/js-flowchart-diagrams.md
Normal file
131
exampleSite/content/post/js-flowchart-diagrams.md
Normal file
|
|
@ -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
|
||||
```
|
||||
|
||||
<!--more-->
|
||||
|
||||
```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.
|
||||
|
|
@ -8,6 +8,19 @@
|
|||
<script type="text/javascript" src="{{ "lib/jquery/jquery-3.2.1.min.js" | relURL }}"></script>
|
||||
<script type="text/javascript" src="{{ "lib/slideout/slideout-1.0.1.min.js" | relURL }}"></script>
|
||||
{{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
<!-- flowchart -->
|
||||
{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
|
||||
<script>
|
||||
{{- if .Params.flowchartDiagrams.options -}}
|
||||
window.flowchartDiagramsOptions = {{ .Params.flowchartDiagrams.options | safeJS }};
|
||||
{{- else if .Site.Params.flowchartDiagrams.options -}}
|
||||
window.flowchartDiagramsOptions = {{ .Site.Params.flowchartDiagrams.options | safeJS }};
|
||||
{{- end -}}
|
||||
</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 }}
|
||||
<script type="text/javascript" src="{{ "dist/even.min.js?v=3.0.1" | relURL }}"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,7 @@ $(document).ready(function () {
|
|||
Even.fancybox()
|
||||
})
|
||||
|
||||
Even.flowchart()
|
||||
|
||||
hljs.initHighlighting()
|
||||
Even.highlight()
|
||||
|
|
|
|||
2
static/dist/even.min.js
vendored
2
static/dist/even.min.js
vendored
|
|
@ -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();n<t?e.css(c.start):n>o?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;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"),$(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('<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,c=t.innerHTML.split(/\n/);""===c[c.length-1]&&c.pop();for(var r=c.length,i="",a=0;a<r;a++)i+='<div class="line">'+(a+1)+"</div>";for(var l="",s=0;s<r;s++)l+='<div class="line">'+c[s]+"</div>";t.className+=" highlight";var d=document.createElement("figure");d.className=t.className,d.innerHTML='<table><tbody><tr><td class="gutter"><pre>'+i+'</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),c=0;c<o.length;c++){var r=o[c];r.innerHTML='<a href="#'+r.id+'" class="headerlink"></a>'+r.innerHTML}},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(),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){}]);
|
||||
//# sourceMappingURL=even.min.js.map
|
||||
2
static/dist/even.min.js.map
vendored
2
static/dist/even.min.js.map
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue