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", "katex": "0.16.9",
"lodash": "4.17.21", "lodash": "4.17.21",
"mermaid": "10.6.1", "mermaid": "10.6.1",
"store2": "2.14.2" "store2": "2.14.2",
"uuid": "9.0.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "7.23.3", "@babel/eslint-parser": "7.23.3",

3
package.json
View file

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

29
src/js/mermaid.js
View file

@ -1,6 +1,9 @@
const Storage = require("store2") const Storage = require("store2")
const { v4: uuidv4 } = require("uuid")
const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js") const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
import mermaid from "mermaid"
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {
let lstore = Storage.namespace(THEME) let lstore = Storage.namespace(THEME)
let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
@ -16,15 +19,21 @@ document.addEventListener("DOMContentLoaded", function (event) {
theme = "dark" theme = "dark"
} }
import("mermaid") mermaid.initialize({
.then(({ default: md }) => { startOnLoad: false,
md.initialize({ flowchart: { useMaxWidth: true },
flowchart: { useMaxWidth: true }, theme: theme,
theme: theme, themeVariables: {
themeVariables: { darkMode: darkMode
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)) })
}) })