github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-21 20:50:40 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Kaussow 2024-01-15 21:33:44 +01:00 committed by GitHub
parent 785adf091b
commit 57afb60b99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -25,7 +25,7 @@
"eslint-plugin-prettier": "5.1.3",
"favicons": "7.1.5",
"favicons-webpack-plugin": "6.0.1",
"html-validate": "^8.9.1",
"html-validate": "8.9.1",
"npm-run-all": "4.1.5",
"postcss-loader": "7.3.4",
"prettier": "3.2.2",
@ -34,6 +34,7 @@
"shx": "0.3.4",
"svg-sprite": "2.0.2",
"svgtofont": "4.1.1",
"uuid": "9.0.1",
"webpack": "5.89.0",
"webpack-cli": "5.1.4",
"webpack-manifest-plugin": "5.0.0",

1
package.json
View File

@ -58,6 +58,7 @@
"shx": "0.3.4",
"svg-sprite": "2.0.2",
"svgtofont": "4.1.1",
"uuid": "9.0.1",
"webpack": "5.89.0",
"webpack-cli": "5.1.4",
"webpack-manifest-plugin": "5.0.0",

35
src/js/mermaid.js
View File

@ -1,30 +1,39 @@
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 currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
let darkMode = false
let theme = "default"
if (
currentColorTheme === COLOR_THEME_DARK ||
(currentColorTheme === COLOR_THEME_AUTO && darkModeQuery.matches)
currentMode === COLOR_THEME_DARK ||
(currentMode === COLOR_THEME_AUTO && darkModeQuery.matches)
) {
darkMode = true
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))
})
})