pages/_includes/scripts/mermaid.liquid
Maruan beb6f27d59
format code with prettier.io (#2048)
summary:
- adds prettier formatter configuration
- formats the entire repo using prettier, ignoring minified files
(`*.min.css`) and heavy generated html
- changes extensions of all `.html` files to `.liquid`, which is more
correct and necessary for prettier to work correctly
- replaces "%-" and "-%" with just "%" — manual liquid formatting using
minus signs is superfluous since we are compressing and minifying the
code anyway
- adds CI action for running prettier check on PR and pushes to master
2024-01-10 00:10:51 -05:00

42 lines
1.5 KiB
Plaintext

{% if page.mermaid and page.mermaid.enabled %}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
{% if page.mermaid.zoomable %}
<script src="https://d3js.org/d3.v7.min.js"></script>
{% endif %}
<script>
let theme = localStorage.getItem('theme');
/* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
this is done to enable retrieving the code again when changing theme between light/dark */
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
const svgCode = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create mermaid node */
let mermaid = document.createElement('pre');
mermaid.classList.add('mermaid');
const text = document.createTextNode(svgCode);
mermaid.appendChild(text);
backup.after(mermaid);
});
mermaid.initialize({ theme: theme });
/* Zoomable mermaid diagrams */
if (typeof d3 !== 'undefined') {
window.addEventListener('load', function () {
var svgs = d3.selectAll('.mermaid svg');
svgs.each(function () {
var svg = d3.select(this);
svg.html('<g>' + svg.html() + '</g>');
var inner = svg.select('g');
var zoom = d3.zoom().on('zoom', function (event) {
inner.attr('transform', event.transform);
});
svg.call(zoom);
});
});
}
</script>
{% endif %}