Files
puzzle-design-kb/mermaid-init.js
Bryce 9242bc446a Re-render KQVI mermaid chart at higher resolution with source link
- Extract original mermaid code from git history (faa30b9)
- Create kings-quest-vi-chart.mmd with raw mermaid source
- Render preview at 3000px wide (247KB PNG)
- Render full-size at 6000px wide (657KB PNG)
- Add link to raw mermaid source file in markdown
- Also fix: set mermaid startOnLoad: false to prevent duplicate renders
2026-03-19 20:43:29 -07:00

54 lines
1.7 KiB
JavaScript

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
(() => {
const darkThemes = ['ayu', 'navy', 'coal'];
const lightThemes = ['light', 'rust'];
const classList = document.getElementsByTagName('html')[0].classList;
let lastThemeWasLight = true;
for (const cssClass of classList) {
if (darkThemes.includes(cssClass)) {
lastThemeWasLight = false;
break;
}
}
const theme = lastThemeWasLight ? 'default' : 'dark';
mermaid.initialize({ startOnLoad: false, theme });
// Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
function initThemeButtons() {
for (const darkTheme of darkThemes) {
const darkBtn = document.getElementById(darkTheme);
if (darkBtn) {
darkBtn.addEventListener('click', () => {
if (lastThemeWasLight) {
window.location.reload();
}
});
}
}
for (const lightTheme of lightThemes) {
const lightBtn = document.getElementById(lightTheme);
if (lightBtn) {
lightBtn.addEventListener('click', () => {
if (!lastThemeWasLight) {
window.location.reload();
}
});
}
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initThemeButtons);
} else {
initThemeButtons();
}
})();