From 399f70fd658e3b036af8ac829d86fc4672f6a6e6 Mon Sep 17 00:00:00 2001 From: George <31376482+george-gca@users.noreply.github.com> Date: Tue, 2 Jan 2024 18:35:57 -0300 Subject: [PATCH] Changed mermaid support in template (#1992) Fix #1609 --------- Signed-off-by: George Araujo Co-authored-by: Maruan Al-Shedivat --- Gemfile | 1 - _config.yml | 9 ----- _includes/head.html | 3 +- _includes/scripts/mermaid.html | 41 +++++++++++++++++++++++ _layouts/default.html | 1 + _sass/_base.scss | 8 +++-- assets/js/copy_code.js | 2 +- assets/js/dark_mode.js | 8 ----- assets/js/theme.js | 61 ++++++++++++++++++++++++++++++++++ 9 files changed, 111 insertions(+), 23 deletions(-) create mode 100644 _includes/scripts/mermaid.html delete mode 100644 assets/js/dark_mode.js diff --git a/Gemfile b/Gemfile index 6855510db9e1..85c0d05cafc2 100644 --- a/Gemfile +++ b/Gemfile @@ -3,7 +3,6 @@ group :jekyll_plugins do gem 'classifier-reborn' gem 'jekyll' gem 'jekyll-archives' - gem 'jekyll-diagrams' gem 'jekyll-email-protect' gem 'jekyll-feed' gem 'jekyll-get-json' diff --git a/_config.yml b/_config.yml index 2d7e17f86fc2..5531c59ec102 100644 --- a/_config.yml +++ b/_config.yml @@ -217,7 +217,6 @@ keep_files: # Plug-ins plugins: - jekyll-archives - - jekyll-diagrams - jekyll-email-protect - jekyll-feed - jekyll-get-json @@ -351,14 +350,6 @@ imagemagick: output_formats: webp: "-quality 85" -# ----------------------------------------------------------------------------- -# Jekyll Diagrams -# ----------------------------------------------------------------------------- - -jekyll-diagrams: - # configuration, see https://github.com/zhustec/jekyll-diagrams. - # feel free to comment out this section if not using jekyll diagrams. - # ----------------------------------------------------------------------------- # Optional Features diff --git a/_includes/head.html b/_includes/head.html index ee74cc771a50..f0d55a72cadb 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -48,5 +48,4 @@ {% if site.enable_darkmode %} - - {% endif %} \ No newline at end of file + {% endif %} diff --git a/_includes/scripts/mermaid.html b/_includes/scripts/mermaid.html new file mode 100644 index 000000000000..995aa1c0448e --- /dev/null +++ b/_includes/scripts/mermaid.html @@ -0,0 +1,41 @@ + {% if page.mermaid and page.mermaid.enabled %} + + {% if page.mermaid.zoomable %} + + {% endif %} + + {% endif %} diff --git a/_layouts/default.html b/_layouts/default.html index 38aca32271c6..753f70d6be69 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -53,6 +53,7 @@ {% include scripts/jquery.html %} {% include scripts/bootstrap.html %} {% include scripts/masonry.html %} + {% include scripts/mermaid.html %} {% include scripts/misc.html %} {% include scripts/badges.html %} {% include scripts/mathjax.html %} diff --git a/_sass/_base.scss b/_sass/_base.scss index 2d1080dad171..6bda3b04b3eb 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -939,8 +939,8 @@ progress::-moz-progress-bar { font-size: medium; opacity: 0; position: absolute; - right: .5rem; - top: .5rem; + right: .2rem; + top: .2rem; } &:active .copy, @@ -1070,6 +1070,10 @@ nav[data-toggle="toc"] { } } +.unloaded { + display: none !important; +} + .medium-zoom-overlay, .medium-zoom-image--opened { z-index: 999; diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js index e8c3783bb64f..305f19acedae 100644 --- a/assets/js/copy_code.js +++ b/assets/js/copy_code.js @@ -1,7 +1,7 @@ // create element for copy button in code blocks var codeBlocks = document.querySelectorAll('pre'); codeBlocks.forEach(function (codeBlock) { - if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) { + if ((codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) && codeBlock.querySelector('code:not(.language-mermaid)')) { // create copy button var copyButton = document.createElement('button'); copyButton.className = 'copy'; diff --git a/assets/js/dark_mode.js b/assets/js/dark_mode.js deleted file mode 100644 index 863b273fe725..000000000000 --- a/assets/js/dark_mode.js +++ /dev/null @@ -1,8 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - const mode_toggle = document.getElementById("light-toggle"); - - mode_toggle.addEventListener("click", function() { - toggleTheme(localStorage.getItem("theme")); - }); -}); - diff --git a/assets/js/theme.js b/assets/js/theme.js index 9a630e9a7d9f..ca5d66b43e35 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -8,10 +8,15 @@ let toggleTheme = (theme) => { } }; + let setTheme = (theme) => { transTheme(); setHighlight(theme); setGiscusTheme(theme); + // if mermaid is not defined, do nothing + if (typeof mermaid !== 'undefined') { + setMermaidTheme(theme); + } if (theme) { document.documentElement.setAttribute("data-theme", theme); @@ -56,6 +61,7 @@ let setTheme = (theme) => { } }; + let setHighlight = (theme) => { if (theme == "dark") { document.getElementById("highlight_theme_light").media = "none"; @@ -66,6 +72,7 @@ let setHighlight = (theme) => { } }; + let setGiscusTheme = (theme) => { function sendMessage(message) { const iframe = document.querySelector("iframe.giscus-frame"); @@ -80,6 +87,49 @@ let setGiscusTheme = (theme) => { }); }; + +let addMermaidZoom = (records, observer) => { + var svgs = d3.selectAll(".mermaid svg"); + svgs.each(function () { + var svg = d3.select(this); + svg.html("" + svg.html() + ""); + var inner = svg.select("g"); + var zoom = d3.zoom().on("zoom", function (event) { + inner.attr("transform", event.transform); + }); + svg.call(zoom); + }); + observer.disconnect(); +}; + + +let setMermaidTheme = (theme) => { + if (theme == "light") { + // light theme name in mermaid is 'default' + // https://mermaid.js.org/config/theming.html#available-themes + theme = "default"; + } + + /* Re-render the SVG, based on https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html */ + document.querySelectorAll('.mermaid').forEach((elem) => { + // Get the code block content from previous element, since it is the mermaid code itself as defined in Markdown, but it is hidden + let svgCode = elem.previousSibling.childNodes[0].innerHTML; + elem.removeAttribute('data-processed'); + elem.innerHTML = svgCode; + }); + + mermaid.initialize({ theme: theme }); + window.mermaid.init(undefined, document.querySelectorAll('.mermaid')); + + const observable = document.querySelector(".mermaid svg"); + if (observable !== null) { + var observer = new MutationObserver(addMermaidZoom); + const observerOptions = { childList: true }; + observer.observe(observable, observerOptions); + } +}; + + let transTheme = () => { document.documentElement.classList.add("transition"); window.setTimeout(() => { @@ -87,6 +137,7 @@ let transTheme = () => { }, 500); }; + let initTheme = (theme) => { if (theme == null || theme == "null") { const userPref = window.matchMedia; @@ -98,4 +149,14 @@ let initTheme = (theme) => { setTheme(theme); }; + initTheme(localStorage.getItem("theme")); + + +document.addEventListener('DOMContentLoaded', function() { + const mode_toggle = document.getElementById("light-toggle"); + + mode_toggle.addEventListener("click", function() { + toggleTheme(localStorage.getItem("theme")); + }); +});