From 7a71dd87244820e00f9ec867c0d08ccbb2a9ddfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Mon, 24 Mar 2025 19:04:22 +0100 Subject: [PATCH 1/6] Allow different mermaid theme on dark mode --- assets/scripts/features/darkmode/index.js | 4 + assets/scripts/features/flowchart/mermaid.js | 93 +++++++++++++++++++- exampleSite/hugo.yaml | 3 +- 3 files changed, 96 insertions(+), 4 deletions(-) diff --git a/assets/scripts/features/darkmode/index.js b/assets/scripts/features/darkmode/index.js index 5d8443e..86b265a 100644 --- a/assets/scripts/features/darkmode/index.js +++ b/assets/scripts/features/darkmode/index.js @@ -1,3 +1,5 @@ +import { setMermaidTheme } from '../flowchart/mermaid.js' + const PERSISTENCE_KEY = 'darkmode:color-scheme' window.addEventListener('load', async () => { @@ -41,6 +43,8 @@ window.addEventListener('load', async () => { saveScheme(newScheme) setImages(theme) + + setMermaidTheme(theme) } setScheme(loadScheme()) diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js index e8b3e4d..99fd14d 100644 --- a/assets/scripts/features/flowchart/mermaid.js +++ b/assets/scripts/features/flowchart/mermaid.js @@ -1,7 +1,94 @@ import mermaid from 'mermaid' import * as params from '@params' -const mermaidOptions = params.flowchart?.mermaid || {} -const options = Object.assign({}, mermaidOptions, { startOnLoad: true }) +const elementCode = '.mermaid' -mermaid.initialize(options) +initMermaid(); + +// Save original mermaid code to data attribute +function saveOriginalData() { + return new Promise((resolve, reject) => { + try { + const elements = document.querySelectorAll(elementCode); + let count = elements.length; + + if (count === 0) { + resolve(); + return; + } + + elements.forEach(element => { + element.setAttribute('data-original-code', element.innerHTML); + count--; + if (count === 0) { + resolve(); + } + }); + } catch (error) { + reject(error); + } + }); +} + +// Reset processed diagrams to original state +function resetProcessed() { + return new Promise((resolve, reject) => { + try { + const elements = document.querySelectorAll(elementCode); + let count = elements.length; + + if (count === 0) { + resolve(); + return; + } + + elements.forEach(element => { + if (element.getAttribute('data-original-code') != null) { + element.removeAttribute('data-processed'); + element.innerHTML = element.getAttribute('data-original-code'); + } + count--; + if (count === 0) { + resolve(); + } + }); + } catch (error) { + reject(error); + } + }); +} + +function setMermaidTheme(siteTheme) { + let themeName = 'default'; + + if (siteTheme === 'dark') themeName = 'dark'; + + // Set custom theme + if (themeName === 'default' && params.flowchart?.mermaid['theme']) { + themeName = params.flowchart?.mermaid['theme']; + } + else if (themeName === 'dark' && params.flowchart?.mermaid['darktheme']) { + themeName = params.flowchart?.mermaid['darktheme']; + } + const mermaidOptions = { theme: themeName }; + const options = Object.assign({}, mermaidOptions, { startOnLoad: true }); + console.log(themeName); + console.log(params.flowchart?.mermaid); + console.log(mermaidOptions); + + // Initialize mermaid with the new options + mermaid.initialize(options); + + // Reload diagrams if they exist on the page + resetProcessed() + .then(() => { + mermaid.init(options, document.querySelectorAll(elementCode)); + }) + .catch(console.error); +} + +function initMermaid() { + saveOriginalData().catch(console.error); +} + +export { setMermaidTheme } \ No newline at end of file diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index ee01e39..e2572cd 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -245,7 +245,8 @@ params: # Uncomment for `mermaid` shortcode. mermaid: # For config options, see: https://mermaid-js.github.io/mermaid/#/Setup?id=configuration - # theme: dark + # theme: default + # darkTheme: dark # Enable this to create mathematic expressions using `$$` blocks math: From 6732f3310c2bf0cd23546728ced8639aae4fbdff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Mon, 24 Mar 2025 19:16:13 +0100 Subject: [PATCH 2/6] Improve lint --- assets/scripts/features/flowchart/mermaid.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js index 99fd14d..4519edc 100644 --- a/assets/scripts/features/flowchart/mermaid.js +++ b/assets/scripts/features/flowchart/mermaid.js @@ -64,11 +64,11 @@ function setMermaidTheme(siteTheme) { if (siteTheme === 'dark') themeName = 'dark'; // Set custom theme - if (themeName === 'default' && params.flowchart?.mermaid['theme']) { - themeName = params.flowchart?.mermaid['theme']; + if (themeName === 'default' && params.flowchart?.mermaid.theme) { + themeName = params.flowchart?.mermaid.theme; } - else if (themeName === 'dark' && params.flowchart?.mermaid['darktheme']) { - themeName = params.flowchart?.mermaid['darktheme']; + else if (themeName === 'dark' && params.flowchart?.mermaid.darktheme) { + themeName = params.flowchart?.mermaid.darktheme; } const mermaidOptions = { theme: themeName }; const options = Object.assign({}, mermaidOptions, { startOnLoad: true }); From 9d4fda1decb1725c9b47807966f2d094bc5d7d70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Wed, 26 Mar 2025 15:08:44 +0100 Subject: [PATCH 3/6] Fix mermaid --- assets/scripts/features/flowchart/mermaid.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js index 4519edc..f9ac57e 100644 --- a/assets/scripts/features/flowchart/mermaid.js +++ b/assets/scripts/features/flowchart/mermaid.js @@ -72,9 +72,6 @@ function setMermaidTheme(siteTheme) { } const mermaidOptions = { theme: themeName }; const options = Object.assign({}, mermaidOptions, { startOnLoad: true }); - console.log(themeName); - console.log(params.flowchart?.mermaid); - console.log(mermaidOptions); // Initialize mermaid with the new options mermaid.initialize(options); @@ -88,6 +85,7 @@ function setMermaidTheme(siteTheme) { } function initMermaid() { + setMermaidTheme("light"); saveOriginalData().catch(console.error); } From fe7b7e9dd48cb1d1a58f0fc7f44ea28f2f3866e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Wed, 26 Mar 2025 15:11:53 +0100 Subject: [PATCH 4/6] Set light theme as default --- assets/scripts/features/flowchart/mermaid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js index f9ac57e..501a48f 100644 --- a/assets/scripts/features/flowchart/mermaid.js +++ b/assets/scripts/features/flowchart/mermaid.js @@ -85,8 +85,8 @@ function setMermaidTheme(siteTheme) { } function initMermaid() { - setMermaidTheme("light"); saveOriginalData().catch(console.error); + setMermaidTheme("light"); } export { setMermaidTheme } \ No newline at end of file From 8cbd44b96f4058cec846d9ea2a6ebc8336fc8247 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Wed, 26 Mar 2025 16:19:13 +0100 Subject: [PATCH 5/6] Enable flowchart on exampleSite --- assets/scripts/features/flowchart/mermaid.js | 1 - exampleSite/hugo.yaml | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js index 501a48f..2d4365d 100644 --- a/assets/scripts/features/flowchart/mermaid.js +++ b/assets/scripts/features/flowchart/mermaid.js @@ -86,7 +86,6 @@ function setMermaidTheme(siteTheme) { function initMermaid() { saveOriginalData().catch(console.error); - setMermaidTheme("light"); } export { setMermaidTheme } \ No newline at end of file diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index e2572cd..0f0debd 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -240,7 +240,7 @@ params: # Enable this to create flowcharts using shortcodes. flowchart: - enable: false + enable: true services: # Uncomment for `mermaid` shortcode. mermaid: From 4ae3d003877a351eb50448f8d040834e83ceb0d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Wed, 26 Mar 2025 16:22:19 +0100 Subject: [PATCH 6/6] Set themes --- exampleSite/hugo.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 0f0debd..bbf054c 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -245,8 +245,8 @@ params: # Uncomment for `mermaid` shortcode. mermaid: # For config options, see: https://mermaid-js.github.io/mermaid/#/Setup?id=configuration - # theme: default - # darkTheme: dark + theme: default + darkTheme: dark # Enable this to create mathematic expressions using `$$` blocks math: