Switch to non-module Mermaid loading and move initialization to DOMContentLoaded

This commit is contained in:
Dennis Dornon 2025-04-02 14:19:05 -04:00
parent 1c07125597
commit 53941de9ef

View file

@ -18,18 +18,7 @@
<!-- Theme scripts (deferred) -->
<script src="{{ site.baseurl }}/dox-theme/assets/js/vendor/jquery.min.js" defer></script> <!-- Keep vendor -->
<script src="{{ site.baseurl }}/dox-theme/assets/js/vendor/highlight.pack.js" defer></script> <!-- Keep vendor -->
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#7fb100',
secondaryColor: '#446200',
tertiaryColor: '#4682b4'
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="{{ site.baseurl }}/dox-theme/assets/js/theme-toggle.js" defer></script> <!-- Restore -->
<script src="{{ site.baseurl }}/dox-theme/assets/js/navigation.js" defer></script> <!-- Keep navigation.js -->
<script src="{{ site.baseurl }}/dox-theme/assets/js/page-nav.js" defer></script> <!-- Restore -->
@ -72,7 +61,7 @@

{% include footer.html bordered=true %}

<!-- Initialize highlighting after defer ensures hljs is loaded -->
<!-- Initialize highlighting and Mermaid after defer ensures libraries are loaded -->
<script defer>
document.addEventListener('DOMContentLoaded', (event) => {
// Initialize Highlight.js
@ -81,6 +70,21 @@
} else {
console.error('Highlight.js (hljs) not loaded');
}

// Initialize Mermaid
if (typeof mermaid !== 'undefined') {
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
themeVariables: {
primaryColor: '#7fb100',
secondaryColor: '#446200',
tertiaryColor: '#4682b4'
}
});
} else {
console.error('Mermaid.js not loaded');
}
});
</script>