pages/_includes/scripts/mermaid.liquid
George 06bc36762d
Move libs versions to config (#2139)
Moved libs versions and hashes to `_config.yml`.

Fixes #2067.

Deferring everything possible to keep pages loads fast.

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
2024-01-28 19:10:42 -03:00

56 lines
1.9 KiB
Plaintext

{% if page.mermaid and page.mermaid.enabled %}
<script
defer
src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"
integrity="{{ site.mermaid.integrity }}"
crossorigin="anonymous"
></script>
{% if page.mermaid.zoomable %}
<script
defer
src="https://cdn.jsdelivr.net/npm/d3@{{ site.d3.version }}/dist/d3.min.js"
integrity="{{ site.d3.integrity }}"
crossorigin="anonymous"
></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.onreadystatechange = () => {
if (document.readyState === 'complete') {
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 %}