systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: use selector loop to manually render all charts on a page (#765)

Browse source
This commit is contained in:
Robert Kaussow 2024-01-09 09:29:41 +01:00 committed by GitHub
parent 46a170c6f5
commit ff6e9ed824
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package-lock.json generated
View file

@ -15,7 +15,8 @@
"katex": "0.16.9",
"lodash": "4.17.21",
"mermaid": "10.6.1",
"store2": "2.14.2"
"store2": "2.14.2",
"uuid": "9.0.1"
},
"devDependencies": {
"@babel/eslint-parser": "7.23.3",

3
package.json
View file

@ -39,7 +39,8 @@
"katex": "0.16.9",
"lodash": "4.17.21",
"mermaid": "10.6.1",
"store2": "2.14.2"
"store2": "2.14.2",
"uuid": "9.0.1"
},
"devDependencies": {
"@babel/eslint-parser": "7.23.3",

29
src/js/mermaid.js
View file

@ -1,6 +1,9 @@
const Storage = require("store2")
const { v4: uuidv4 } = require("uuid")
const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
import mermaid from "mermaid"
document.addEventListener("DOMContentLoaded", function (event) {
let lstore = Storage.namespace(THEME)
let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
@ -16,15 +19,21 @@ document.addEventListener("DOMContentLoaded", function (event) {
theme = "dark"
}
import("mermaid")
.then(({ default: md }) => {
md.initialize({
flowchart: { useMaxWidth: true },
theme: theme,
themeVariables: {
darkMode: darkMode
}
})
mermaid.initialize({
startOnLoad: false,
flowchart: { useMaxWidth: true },
theme: theme,
themeVariables: {
darkMode: darkMode
}
})
document.querySelectorAll(".mermaid").forEach(function (el) {
let id = "graph-" + uuidv4()
mermaid.render(id, el.innerText).then(({ svg, bindFunctions }) => {
el.innerHTML = svg
bindFunctions?.(el)
})
.catch((error) => console.error(error))
})
})