550 lines
21 KiB
HTML
550 lines
21 KiB
HTML
{{ $js := .Site.Data.lib.js }}
|
|
{{ $css := .Site.Data.lib.css }}
|
|
|
|
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $enquire.RelPermalink }}"></script>
|
|
{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $clipboard.RelPermalink }}"></script>
|
|
{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $lazysizes.RelPermalink }}"></script>
|
|
{{ $getParents := resources.Get "js/helper/getParents.js" | resources.Minify }}
|
|
<script defer src="{{ $getParents.RelPermalink }}"></script>
|
|
{{ $closest := resources.Get "js/helper/closest.js" | resources.Minify }}
|
|
<script defer src="{{ $closest.RelPermalink }}"></script>
|
|
{{ $prev := resources.Get "js/helper/prev.js" | resources.Minify }}
|
|
<script defer src="{{ $prev.RelPermalink }}"></script>
|
|
{{ $prop := resources.Get "js/helper/prop.js" | resources.Minify }}
|
|
<script defer src="{{ $prop.RelPermalink }}"></script>
|
|
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
|
|
<script defer src="{{ $fadeinout.RelPermalink }}"></script>
|
|
|
|
{{ if in .Params.Libraries "mermaid" }}
|
|
<script defer src="{{ $js.mermaid.url }}" integrity="{{ $js.mermaid.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "katex" }}
|
|
<link rel="stylesheet" href="{{ $css.katex.url }}" integrity="{{$css.katex.sri }}" crossorigin="anonymous">
|
|
<script defer src="{{ $js.katex.url }}" integrity="{{ $js.katex.sri }}" crossorigin="anonymous"></script>
|
|
<script defer src="{{ $js.katex_auto_render.url }}" integrity="{{ $js.katex_auto_render.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "flowchartjs" }}
|
|
<script defer src="{{ $js.raphael.url }}" integrity="{{ $js.raphael.sri }}" crossorigin="anonymous"></script>
|
|
<script defer src="{{ $js.flowchartjs.url }}" integrity="{{ $js.flowchartjs.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "mathjax" }}
|
|
<script defer src="{{ $js.mathjax.url }}" integrity="{{ $js.mathjax.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "msc" }}
|
|
<script defer src="{{ $js.webfont.url }}"></script>
|
|
<script defer src="{{ $js.snap_svg.url }}"></script>
|
|
<script defer src="{{ $js.lodash.url }}" integrity="{{ $js.lodash.sri }}" crossorigin="anonymous"></script>
|
|
<script defer src="{{ $js.sequence_diagram.url }}" integrity="{{ $js.sequence_diagram.sri }}" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="{{ $css.sequence_diagram.url }}" integrity="{{ $css.sequence_diagram.sri }}" crossorigin="anonymous">
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "chart" }}
|
|
<script defer src="{{ $js.chart.url }}" integrity="{{ $js.chart.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "wavedrom" }}
|
|
<script defer src="{{ $js.wavedrom.url }}" integrity="{{ $js.wavedrom.sri }}" crossorigin="anonymous"></script>
|
|
<script defer src="{{ $js.wavedrom_skin.url }}" integrity="{{ $js.wavedrom_skin.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
{{ if in .Params.Libraries "viz" }}
|
|
<script defer src="{{ $js.viz.url }}" crossorigin="anonymous"></script>
|
|
<script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
window.onload = function() {
|
|
var navbar = document.querySelector('.navbar');
|
|
var singleContentsElem = document.querySelector('.single__contents');
|
|
|
|
// ====================== markdown code block ======================
|
|
function wrap(el, wrapper) {
|
|
el.parentNode.insertBefore(wrapper, el);
|
|
wrapper.appendChild(el);
|
|
}
|
|
|
|
(function () {
|
|
singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
|
|
var dataLang = elem.getAttribute('data-lang');
|
|
if (!dataLang) {
|
|
var dataLangWrapper = document.createElement('div');
|
|
dataLangWrapper.setAttribute('data-lang', 'Code');
|
|
dataLangWrapper.className = 'language-code';
|
|
wrap(elem.parentNode, dataLangWrapper);
|
|
}
|
|
});
|
|
})();
|
|
|
|
var langCodeElem = document.querySelectorAll('.language-code');
|
|
langCodeElem ? langCodeElem.forEach(function (elem) {
|
|
var newElem = document.createElement('span');
|
|
newElem.className = 'copy-to-clipboard';
|
|
newElem.setAttribute('title', 'Copy to clipboard');
|
|
elem.append(newElem);
|
|
}) : null;
|
|
// =================================================================
|
|
|
|
|
|
// ======================= busuanzi counter ========================
|
|
{{ $enableBusuanzi := .Site.Params.enableBusuanzi }}
|
|
{{ $busuanziPagePV := .Site.Params.busuanziPagePV }}
|
|
var enableBusuanzi = JSON.parse({{ $enableBusuanzi | jsonify }});
|
|
var busuanziPagePV = JSON.parse({{ $busuanziPagePV | jsonify }});
|
|
|
|
if (enableBusuanzi && busuanziPagePV) {
|
|
var pagePvElem = document.querySelector('#busuanzi_value_page_pv');
|
|
pagePvElem.textContent = pagePvElem.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ============================== toc ==============================
|
|
{{ $enableToc := ($.Param "enableToc") }}
|
|
{{ $toc := ($.Param "toc") }}
|
|
{{ $hideToc := ($.Param "hideToc") }}
|
|
var enableToc = JSON.parse({{ $enableToc | jsonify }});
|
|
var toc = JSON.parse({{ $toc | jsonify }});
|
|
var hideToc = JSON.parse({{ $hideToc | jsonify }});
|
|
|
|
if (enableToc || toc) {
|
|
var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
|
|
tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
|
|
liElem.querySelectorAll('ul').forEach(function (ulElem) {
|
|
ulElem.style.display = 'none';
|
|
});
|
|
});
|
|
|
|
tableOfContentsElem.querySelectorAll('a').forEach(function(elem) {
|
|
elem.addEventListener('click', function() {
|
|
var id = elem.getAttribute('id');
|
|
navbar.classList.remove('navbar--show');
|
|
navbar.classList.remove('navbar--hide');
|
|
navbar.classList.add('navbar--hide');
|
|
|
|
document.querySelector('.toc').querySelectorAll('a').forEach(function(elem) {
|
|
elem.classList.remove('active');
|
|
});
|
|
elem.classList.add('active');
|
|
|
|
tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
|
|
liElem.querySelectorAll('ul').forEach(function(ulElem) {
|
|
ulElem.style.display = 'none';
|
|
});
|
|
});
|
|
|
|
var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
|
|
if (curElem && curElem.nextElementSibling) {
|
|
curElem.nextElementSibling.style.display = 'block';
|
|
}
|
|
if (curElem) {
|
|
getParents(curElem, 'ul') ?
|
|
getParents(curElem, 'ul').forEach(function (elem) {
|
|
elem.style.display = 'block';
|
|
}) : null;
|
|
}
|
|
});
|
|
});
|
|
|
|
// toc visibility
|
|
var toggleTocElem = document.querySelector("#toggle-toc");
|
|
var tocElem = document.querySelector('.toc');
|
|
var mainElem = document.querySelector('main');
|
|
var sideElem = document.querySelector('side');
|
|
var tocFlexboxElem = document.querySelector('.toc__flexbox');
|
|
|
|
toggleTocElem ?
|
|
toggleTocElem.addEventListener('change', function(e) {
|
|
if (e.target.checked) {
|
|
if (tocElem) {
|
|
fadeIn(tocElem, 200);
|
|
}
|
|
if (tocFlexboxElem) {
|
|
tocFlexboxElem.setAttribute('data-position', 'fixed');
|
|
}
|
|
|
|
if (mainElem) {
|
|
mainElem.classList.remove('main-main');
|
|
mainElem.classList.remove('main');
|
|
mainElem.classList.add('main-main');
|
|
}
|
|
if (sideElem) {
|
|
sideElem.classList.remove('main-side');
|
|
}
|
|
} else {
|
|
if (tocElem) {
|
|
fadeOut(tocElem, 200);
|
|
}
|
|
if (tocFlexboxElem) {
|
|
tocFlexboxElem.setAttribute('data-position', 'absolute');
|
|
}
|
|
|
|
if (mainElem) {
|
|
mainElem.classList.remove('main-main');
|
|
mainElem.classList.remove('main');
|
|
mainElem.classList.add('main');
|
|
}
|
|
if (sideElem) {
|
|
sideElem.classList.remove('main-side');
|
|
}
|
|
}
|
|
}) : null;
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ======================== markdown table =========================
|
|
var tables = document.querySelectorAll('.single__contents > table');
|
|
for (let i = 0; i < tables.length; i++) {
|
|
var table = tables[i];
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'table-wrapper';
|
|
table.parentElement.replaceChild(wrapper, table);
|
|
wrapper.appendChild(table);
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ==================== add links in all titles ====================
|
|
var text, clip = new ClipboardJS('.anchor');
|
|
var headers = singleContentsElem.querySelectorAll("h1, h2, h3, h4");
|
|
|
|
headers ?
|
|
headers.forEach(function (elem) {
|
|
var url = encodeURI(document.location.origin + document.location.pathname);
|
|
var link = url + "#" + elem.getAttribute('id');
|
|
|
|
var newElemOuter = document.createElement('span');
|
|
newElemOuter.classList.add('anchor');
|
|
newElemOuter.classList.add('hide');
|
|
newElemOuter.setAttribute('data-clipboard-text', link);
|
|
newElemOuter.style.position = 'relative';
|
|
|
|
var newElemInner = document.createElement('span');
|
|
newElemInner.style.fontSize = '1rem';
|
|
newElemInner.style.position = 'absolute';
|
|
newElemInner.style.right = '-2rem';
|
|
newElemInner.style.top = '50%';
|
|
newElemInner.style.transform = 'translateY(-50%)';
|
|
newElemInner.innerText = "🔗";
|
|
|
|
newElemOuter.append(newElemInner);
|
|
elem.append(newElemOuter);
|
|
|
|
elem.addEventListener('mouseenter', function() {
|
|
this.querySelector('.anchor').classList.remove('hide');
|
|
});
|
|
elem.addEventListener('mouseleave', function () {
|
|
this.querySelector('.anchor').classList.add('hide');
|
|
});
|
|
}) : null;
|
|
|
|
document.querySelectorAll('.anchor').forEach(function(elem) {
|
|
elem.addEventListener('mouseleave', function() {
|
|
elem.setAttribute('aria-label', null);
|
|
elem.classList.remove('tooltipped');
|
|
elem.classList.remove('tooltipped-s');
|
|
elem.classList.remove('tooltipped-w');
|
|
});
|
|
});
|
|
|
|
clip.on('success', function (e) {
|
|
e.clearSelection();
|
|
e.trigger.setAttribute('aria-label', 'Link copied to clipboard!');
|
|
e.trigger.classList.add('tooltipped');
|
|
e.trigger.classList.add('tooltipped-s');
|
|
});
|
|
// =================================================================
|
|
|
|
|
|
// =========================== clipboard ===========================
|
|
var clipInit = false;
|
|
var preChromaElem = document.querySelectorAll('pre.chroma');
|
|
var langCodeElem = document.querySelectorAll('.language-code');
|
|
var makeClipboard = function(elem) {
|
|
var code = elem,
|
|
text = elem.textContent;
|
|
|
|
if (text.length > 30) {
|
|
if (!clipInit) {
|
|
var text, clip = new ClipboardJS('.copy-to-clipboard', {
|
|
text: function (trigger) {
|
|
var codeElem = prev(trigger).querySelectorAll('code');
|
|
if (codeElem.length > 1) {
|
|
text = prev(trigger).querySelector('code[class^="language-"]').textContent;
|
|
} else {
|
|
text = prev(trigger).querySelector('code').textContent;
|
|
}
|
|
|
|
return text.replace(/^\$\s/gm, '');
|
|
}
|
|
});
|
|
|
|
var inPre;
|
|
clip.on('success', function (e) {
|
|
e.clearSelection();
|
|
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
|
|
e.trigger.setAttribute('aria-label', 'Copied to clipboard!');
|
|
e.trigger.classList.add('tooltipped');
|
|
e.trigger.classList.add('tooltipped-w');
|
|
});
|
|
|
|
clip.on('error', function (e) {
|
|
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
|
|
e.trigger.setAttribute('aria-label', e.action.toString());
|
|
e.trigger.classList.add('tooltipped');
|
|
e.trigger.classList.add('tooltipped-w');
|
|
});
|
|
|
|
clipInit = true;
|
|
}
|
|
|
|
var notAllowedClass = ['language-mermaid', 'language-viz', 'language-wave', 'language-chart', 'language-msc', 'language-flowchart'];
|
|
var isNotAllowedIncluded = false;
|
|
var curClassName = code.getAttribute('class');
|
|
|
|
for (let str of notAllowedClass) {
|
|
if (curClassName && curClassName.startsWith(str)) {
|
|
isNotAllowedIncluded = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!isNotAllowedIncluded) {
|
|
if (curClassName) {
|
|
var newClipboardElem = document.createElement('span');
|
|
newClipboardElem.setAttribute('class', 'copy-to-clipboard');
|
|
newClipboardElem.setAttribute('title', 'Copy to clipboard');
|
|
closest(code, 'div.chroma').append(newClipboardElem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
preChromaElem ?
|
|
preChromaElem.forEach(function(elem) {
|
|
elem.querySelectorAll('code').forEach(function(codeElem) {
|
|
makeClipboard(codeElem);
|
|
});
|
|
}) : null;
|
|
|
|
langCodeElem ?
|
|
langCodeElem.forEach(function(elem) {
|
|
elem.querySelectorAll('code').forEach(function (codeElem) {
|
|
makeClipboard(codeElem);
|
|
});
|
|
}) : null;
|
|
// =================================================================
|
|
|
|
|
|
// ============================ mermaid ============================
|
|
{{ $lib := .Params.libraries }}
|
|
var lib = JSON.parse({{ $lib | jsonify }});
|
|
|
|
if (lib && lib.includes('mermaid')) {
|
|
{{ $themeVariant := (index .Site.Params.themeOptions 0) }}
|
|
var themeVariant = localStorage.getItem('theme') || JSON.parse({{ $themeVariant | jsonify }});
|
|
|
|
if (themeVariant === "dark" || themeVariant === "hacker") {
|
|
mermaid.initialize({ theme: 'dark' });
|
|
} else {
|
|
mermaid.initialize({ theme: 'default' });
|
|
}
|
|
|
|
var mermaids = [];
|
|
[].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
|
|
mermaids.forEach(function(elem) {
|
|
var elemParentNode = elem.parentNode;
|
|
|
|
if (elemParentNode !== document.body) {
|
|
elemParentNode.parentNode.insertBefore(elem, elemParentNode);
|
|
elemParentNode.parentNode.removeChild(elemParentNode);
|
|
}
|
|
|
|
var newElemWrapper = document.createElement('div');
|
|
newElemWrapper.classList.add('mermaid');
|
|
newElemWrapper.style.padding = '34px 4px 6px';
|
|
newElemWrapper.innerHTML = elem.innerHTML;
|
|
elem.replaceWith(newElemWrapper);
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ============================= katex =============================
|
|
if (lib && lib.includes('katex')) {
|
|
var mathElements = document.getElementsByClassName('math');
|
|
var options = [
|
|
{ left: "$$", right: "$$", display: true },
|
|
{ left: "\\(", right: "\\)", display: false },
|
|
{ left: "\\[", right: "\\]", display: true }
|
|
];
|
|
|
|
renderMathInElement(document.querySelector('.single__contents'), options);
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ========================= flowchart.js ==========================
|
|
if (lib && lib.includes('flowchartjs')) {
|
|
{{ $flowchartjs := .Site.Data.flowchartjs }}
|
|
var options = JSON.parse({{ $flowchartjs | jsonify }});
|
|
var jsonContent = null;
|
|
|
|
var flowchartPrefix = "language-flowchart";
|
|
var index = 0;
|
|
Array.prototype.forEach.call(document.querySelectorAll("[class^=" + flowchartPrefix + "]"), function(x){
|
|
x.style.display = 'none'
|
|
x.parentNode.style.backgroundColor = "transparent"
|
|
jsonContent = x.innerText;
|
|
|
|
var node0 = document.createElement('div');
|
|
node0.id = 'flowchart' + index;
|
|
x.parentNode.insertBefore(node0, x);
|
|
|
|
var diagram = flowchart.parse(jsonContent);
|
|
diagram.drawSVG("flowchart"+index, options);
|
|
|
|
index +=1;
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ============================ mathjax ============================
|
|
if (lib && lib.includes('mathjax')) {
|
|
window.MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
|
displayMath: [['$$', '$$'], ['\\[', '\\]']],
|
|
processEscapes: false,
|
|
packages: { '[+]': ['noerrors'] }
|
|
},
|
|
loader: {
|
|
load: ['[tex]/noerrors']
|
|
},
|
|
};
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ====================== js-sequence-diagram ======================
|
|
if (lib && lib.includes('msc')) {
|
|
{{ $msc := .Site.Data.msc }}
|
|
var options = JSON.parse({{ $msc | jsonify }});
|
|
var jsonContent = null;
|
|
|
|
var index = 0;
|
|
var chartPrefix = "language-msc";
|
|
Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
|
|
x.style.display = 'none'
|
|
x.parentNode.style.backgroundColor = "transparent"
|
|
jsonContent = x.innerText;
|
|
var node0 = document.createElement('div');
|
|
node0.id = 'msc' + index;
|
|
x.parentNode.insertBefore(node0, x);
|
|
var diagram = Diagram.parse(jsonContent);
|
|
diagram.drawSVG("msc" + index, options);
|
|
index += 1;
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// =========================== chart.js ============================
|
|
if (lib && lib.includes('chart')) {
|
|
var borderColor = "#666";
|
|
var bgColor = "#ddd";
|
|
var borderWidth = 2;
|
|
|
|
Chart.defaults.global.elements.rectangle.borderWidth = borderWidth;
|
|
Chart.defaults.global.elements.rectangle.borderColor = borderColor;
|
|
Chart.defaults.global.elements.rectangle.backgroundColor = bgColor;
|
|
|
|
Chart.defaults.global.elements.line.borderWidth = borderWidth;
|
|
Chart.defaults.global.elements.line.borderColor = borderColor;
|
|
Chart.defaults.global.elements.line.backgroundColor = bgColor;
|
|
|
|
Chart.defaults.global.elements.point.borderWidth = borderWidth;
|
|
Chart.defaults.global.elements.point.borderColor = borderColor;
|
|
Chart.defaults.global.elements.point.backgroundColor = bgColor;
|
|
|
|
var chartPrefix = "language-chart";
|
|
var index = 0;
|
|
var jsonContent = null;
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
|
|
x.style.display = 'none'
|
|
x.parentNode.style.backgroundColor = "transparent"
|
|
jsonContent = x.innerText;
|
|
var node0 = document.createElement('canvas');
|
|
var source = null;
|
|
node0.height = 200;
|
|
node0.style.height = 200;
|
|
node0.id = 'myChart' + index;
|
|
source = JSON.parse(jsonContent);
|
|
x.parentNode.insertBefore(node0, x);
|
|
var ctx = document.getElementById('myChart' + index).getContext('2d');
|
|
var myChart = new Chart(ctx, source);
|
|
index += 1;
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// =========================== wavedrom ============================
|
|
if (lib && lib.includes('wavedrom')) {
|
|
var wavePrefix = "language-wave";
|
|
var index = 0;
|
|
var jsonContent = null;
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll("[class^=" + wavePrefix + "]"), function (x) {
|
|
x.style.display = 'none'
|
|
x.parentNode.style.backgroundColor = "transparent"
|
|
jsonContent = x.innerText;
|
|
var node0 = document.createElement('div');
|
|
var source = null;
|
|
node0.id = 'WaveDrom_Display_' + index;
|
|
source = JSON.parse(jsonContent);
|
|
x.parentNode.insertBefore(node0, x);
|
|
WaveDrom.RenderWaveForm(index, source, "WaveDrom_Display_");
|
|
index += 1;
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
|
|
// ========================== viz diagram ==========================
|
|
if (lib && lib.includes('viz')) {
|
|
var vizPrefix = "language-viz-";
|
|
Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function (x) {
|
|
x.style.display = 'none'
|
|
x.parentNode.style.backgroundColor = "transparent"
|
|
var engine;
|
|
x.getAttribute("class").split(" ").forEach(function (cls) {
|
|
if (cls.startsWith(vizPrefix)) {
|
|
engine = cls.substr(vizPrefix.length);
|
|
}
|
|
});
|
|
var viz = new Viz();
|
|
viz.renderSVGElement(x.innerText, { engine: engine })
|
|
.then(function (element) {
|
|
element.style.width = "100%";
|
|
x.parentNode.insertBefore(element, x);
|
|
})
|
|
});
|
|
}
|
|
// =================================================================
|
|
|
|
}
|
|
</script>
|