mirror of
https://github.com/cotes2020/chirpy-starter.git
synced 2025-07-01 20:08:55 +10:00
fix: update layout and import Chirpy template files
This commit is contained in:
62
_includes/mermaid.html
Normal file
62
_includes/mermaid.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!-- mermaid-js loader -->
|
||||
<script type="text/javascript">
|
||||
function updateMermaid(event) {
|
||||
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
|
||||
const mode = event.data.message;
|
||||
|
||||
if (typeof mermaid === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
|
||||
let config = { theme: expectedTheme };
|
||||
|
||||
{%- comment -%}
|
||||
Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
|
||||
{%- endcomment -%}
|
||||
const mermaidList = document.getElementsByClassName('mermaid');
|
||||
|
||||
[...mermaidList].forEach((elem) => {
|
||||
const svgCode = elem.previousSibling.children.item(0).innerHTML;
|
||||
elem.innerHTML = svgCode;
|
||||
elem.removeAttribute('data-processed');
|
||||
});
|
||||
|
||||
mermaid.initialize(config);
|
||||
mermaid.init(undefined, '.mermaid');
|
||||
}
|
||||
}
|
||||
|
||||
(function () {
|
||||
let initTheme = 'default';
|
||||
const html = document.documentElement;
|
||||
|
||||
if (
|
||||
(html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
|
||||
(!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
initTheme = 'dark';
|
||||
}
|
||||
|
||||
let mermaidConf = {
|
||||
theme: initTheme {%- comment -%} <default | dark | forest | neutral> {%- endcomment -%}
|
||||
};
|
||||
|
||||
{%- comment -%} Create mermaid tag {%- endcomment -%}
|
||||
const basicList = document.getElementsByClassName('language-mermaid');
|
||||
[...basicList].forEach((elem) => {
|
||||
const svgCode = elem.textContent;
|
||||
const backup = elem.parentElement;
|
||||
backup.classList.add('d-none');
|
||||
{%- comment -%} create mermaid node {%- endcomment -%}
|
||||
let mermaid = document.createElement('pre');
|
||||
mermaid.classList.add('mermaid');
|
||||
const text = document.createTextNode(svgCode);
|
||||
mermaid.appendChild(text);
|
||||
backup.after(mermaid);
|
||||
});
|
||||
|
||||
mermaid.initialize(mermaidConf);
|
||||
window.addEventListener('message', updateMermaid);
|
||||
})();
|
||||
</script>
|
Reference in New Issue
Block a user