Skip to content

Commit

Permalink
Changed mermaid support in template (alshedivat#1992)
Browse files Browse the repository at this point in the history
Fix alshedivat#1609

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>
  • Loading branch information
george-gca and alshedivat authored Jan 2, 2024
1 parent d59b2c7 commit 3f9a2bc
Showing 10 changed files with 120 additions and 41 deletions.
1 change: 0 additions & 1 deletion Gemfile
Original file line number Diff line number Diff line change
@@ -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'
9 changes: 0 additions & 9 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -215,7 +215,6 @@ keep_files:
# Plug-ins
plugins:
- jekyll-archives
- jekyll-diagrams
- jekyll-email-protect
- jekyll-feed
- jekyll-get-json
@@ -348,14 +347,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
1 change: 0 additions & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
@@ -39,5 +39,4 @@
{% if site.enable_darkmode %}
<link rel="stylesheet" href="{{ '/assets/css/jekyll-pygments-themes-native.css' | relative_url | bust_file_cache }}" media="none" id="highlight_theme_dark" />
<script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
<script src="{{ '/assets/js/dark_mode.js' | relative_url | bust_file_cache }}"></script>
{% endif %}
41 changes: 41 additions & 0 deletions _includes/scripts/mermaid.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{% if page.mermaid and page.mermaid.enabled %}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
{% if page.mermaid.zoomable %}
<script src="https://d3js.org/d3.v7.min.js"></script>
{% endif %}
<script>
let theme = localStorage.getItem("theme");

/* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
this is done to enable retrieving the code again when changing theme between light/dark */
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
const svgCode = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create mermaid node */
let mermaid = document.createElement('pre');
mermaid.classList.add('mermaid');
const text = document.createTextNode(svgCode);
mermaid.appendChild(text);
backup.after(mermaid);
});

mermaid.initialize({ theme: theme })

/* Zoomable mermaid diagrams */
if (typeof d3 !== 'undefined') {
window.addEventListener('load', function () {
var svgs = d3.selectAll(".mermaid svg");
svgs.each(function () {
var svg = d3.select(this);
svg.html("<g>" + svg.html() + "</g>");
var inner = svg.select("g");
var zoom = d3.zoom().on("zoom", function (event) {
inner.attr("transform", event.transform);
});
svg.call(zoom);
});
});
}
</script>
{% endif %}
1 change: 1 addition & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -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 %}
29 changes: 10 additions & 19 deletions _posts/2021-07-04-diagrams.md
Original file line number Diff line number Diff line change
@@ -4,41 +4,32 @@ title: a post with diagrams
date: 2021-07-04 17:39:00
tags: formatting diagrams
description: an example of a blog post with diagrams
---

This theme supports generating various diagrams from a text description using [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin.
Below, we generate a few examples of such diagrams using languages such as [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}, [plantuml](https://plantuml.com/){:target="\_blank"}, [vega-lite](https://vega.github.io/vega-lite/){:target="\_blank"}, etc.
mermaid:
enabled: true
zoomable: true

**Note:** different diagram-generation packages require external dependencies to be installed on your machine.
Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW.
For any other details, please refer to [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} README.
---

This theme supports generating various diagrams from a text description using [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}. Previously, this was done using the [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin. For more information on this matter, see the [related issue](https://github.com/alshedivat/al-folio/issues/1609#issuecomment-1656995674). To disable the zooming feature, set `mermaid.zoomable` to `false` in this post frontmatter.

## Mermaid

Install mermaid using `node.js` package manager `npm` by running the following command:
```bash
npm install -g mermaid.cli
```

The diagram below was generated by the following code:

{% raw %}
```
{% mermaid %}
````markdown
```mermaid
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
{% endmermaid %}
```
{% endraw %}
````

{% mermaid %}
```mermaid
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
{% endmermaid %}
```
8 changes: 6 additions & 2 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
@@ -928,8 +928,8 @@ progress::-moz-progress-bar {
font-size: medium;
opacity: 0;
position: absolute;
right: .5rem;
top: .5rem;
right: .2rem;
top: .2rem;
}

&:active .copy,
@@ -1059,6 +1059,10 @@ nav[data-toggle="toc"] {
}
}

.unloaded {
display: none !important;
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
z-index: 999;
2 changes: 1 addition & 1 deletion assets/js/copy_code.js
Original file line number Diff line number Diff line change
@@ -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';
8 changes: 0 additions & 8 deletions assets/js/dark_mode.js

This file was deleted.

61 changes: 61 additions & 0 deletions assets/js/theme.js
Original file line number Diff line number Diff line change
@@ -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,13 +87,57 @@ let setGiscusTheme = (theme) => {
});
};


let addMermaidZoom = (records, observer) => {
var svgs = d3.selectAll(".mermaid svg");
svgs.each(function () {
var svg = d3.select(this);
svg.html("<g>" + svg.html() + "</g>");
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(() => {
document.documentElement.classList.remove("transition");
}, 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"));
});
});

0 comments on commit 3f9a2bc

Please sign in to comment.