github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-22 13:10: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", "eslint-plugin-prettier": "5.1.3",
"favicons": "7.1.5", "favicons": "7.1.5",
"favicons-webpack-plugin": "6.0.1", "favicons-webpack-plugin": "6.0.1",
"html-validate": "^8.9.1", "html-validate": "8.9.1",
"npm-run-all": "4.1.5", "npm-run-all": "4.1.5",
"postcss-loader": "7.3.4", "postcss-loader": "7.3.4",
"prettier": "3.2.2", "prettier": "3.2.2",
@ -34,6 +34,7 @@
"shx": "0.3.4", "shx": "0.3.4",
"svg-sprite": "2.0.2", "svg-sprite": "2.0.2",
"svgtofont": "4.1.1", "svgtofont": "4.1.1",
"uuid": "9.0.1",
"webpack": "5.89.0", "webpack": "5.89.0",
"webpack-cli": "5.1.4", "webpack-cli": "5.1.4",
"webpack-manifest-plugin": "5.0.0", "webpack-manifest-plugin": "5.0.0",

1
package.json
View File

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

23
src/js/mermaid.js
View File

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