Merge pull request #369 from h-enk/mermaid

Add Mermaid support

assets/js/clipboard.js

@@ -5,7 +5,11 @@ var pre = document.getElementsByTagName('pre');
 for (var i = 0; i < pre.length; ++ i)
 {
   var element = pre[i];
-  element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  var mermaid = element.getElementsByClassName('language-mermaid')[0];
+
+  if (mermaid == null) {
+    element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  }
 }
 
 var clipboard = new Clipboard('.btn-copy', {

assets/js/highlight.js

@@ -18,7 +18,7 @@ hljs.registerLanguage('yaml', yaml);
 hljs.registerLanguage('md', markdown);
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('pre code').forEach((block) => {
+  document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
     hljs.highlightElement(block);
   });
 });

assets/js/mermaid.js

@@ -0,0 +1,11 @@
+import mermaid from 'mermaid/dist/mermaid';
+
+var config = {
+  theme: 'default',
+  fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  mermaid.initialize(config);
+  mermaid.init(undefined, '.language-mermaid');
+});

assets/scss/app.scss

@@ -24,6 +24,7 @@
 @import "components/comments";
 @import "components/forms";
 @import "components/images";
+@import "components/mermaid";
 @import "components/search";
 @import "components/tables";
 @import "layouts/footer";

assets/scss/common/_dark.scss

@@ -232,11 +232,6 @@ body.dark pre code::-webkit-scrollbar-thumb {
   background: $gray-400;
 }
 
-body.dark code:not(.hljs) {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
-}
-
 body.dark pre code:hover {
   scrollbar-width: thin;
   scrollbar-color: $border-dark transparent;
@@ -246,6 +241,16 @@ body.dark pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
 
+body.dark code:not(.hljs):not(.language-mermaid) {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+body.dark .mermaid,
+body.dark pre code.language-mermaid {
+  background: $white;
+}
+
 body.dark blockquote {
   border-left: 3px solid $border-dark;
 }

assets/scss/components/_code.scss

@@ -60,3 +60,7 @@ pre code:hover {
 pre code::-webkit-scrollbar-thumb:hover {
   background: $gray-500;
 }
+
+code.language-mermaid {
+  background: none;
+}

assets/scss/components/_mermaid.scss

@@ -0,0 +1,8 @@
+.mermaid {
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+}
+
+.mermaid svg {
+  height: auto;
+}

config/_default/config.toml

@@ -93,3 +93,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/katex"
     target = "assets/js/vendor/katex"
+  [[module.mounts]]
+    source = "node_modules/mermaid"
+    target = "assets/js/vendor/mermaid"

config/postcss.config.js

@@ -22,6 +22,7 @@ module.exports = {
         ...whitelister([
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
+          './assets/scss/components/_diagrams.scss',
           './assets/scss/components/_syntax.scss',
           './assets/scss/components/_search.scss',
           './assets/scss/common/_dark.scss',

layouts/index.headers

@@ -2,7 +2,7 @@
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
   X-Content-Type-Options: nosniff
   X-XSS-Protection: 1; mode=block
-  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'
+  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'
   X-Frame-Options: SAMEORIGIN
   Referrer-Policy: strict-origin
   Feature-Policy: geolocation 'self'

layouts/partials/footer/script-footer.html

@@ -10,6 +10,8 @@
 {{ $katex := resources.Get "js/vendor/katex/dist/katex.js" -}}
 {{ $katexAutoRender := resources.Get "js/vendor/katex/dist/contrib/auto-render.js" -}}
 
+{{ $mermaid := resources.Get "js/mermaid.js" | js.Build -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -63,6 +65,9 @@
     <script src="{{ $katexAutoRender.RelPermalink }}" onload="renderMathInElement(document.body);" defer></script>
   {{ end -}}
   <script src="{{ $js.RelPermalink }}" defer></script>
+  {{ with .Params.mermaid -}}
+    <script src="{{ $mermaid.RelPermalink }}" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" defer></script>
   {{ end -}}
@@ -73,6 +78,7 @@
   {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
   {{ $katex := $katex | minify | fingerprint "sha512" -}}
   {{ $katexAutoRender := $katexAutoRender | minify | fingerprint "sha512" -}}
+  {{ $mermaid := $mermaid | minify | fingerprint "sha512" -}}
   {{ if .Site.Params.options.bootStrapJs -}}
     <script src="{{ $bs.RelPermalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
@@ -84,6 +90,9 @@
     <script src="{{ $katexAutoRender.RelPermalink }}" integrity="{{ $katexAutoRender.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
   <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ with .Params.mermaid -}}
+    <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}

layouts/shortcodes/mermaid.html

@@ -0,0 +1,8 @@
+{{ if .Page.Params.mermaid -}}
+  <div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
+    {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
+    {{ replaceRE "(```\\s+$)" "" $data -}}
+  </div>
+{{ else -}}
+  {{ errorf "Failed to process mermaid shortcode: %s. Set mermaid to true in page front matter." .Position }}
+{{ end -}}

package-lock.json

@@ -27,7 +27,7 @@
         "katex": "^0.13",
         "lazysizes": "^5.3",
         "markdownlint-cli": "^0.27",
-        "mermaid": "^8.10.2",
+        "mermaid": "^8.11",
         "postcss": "^8.3",
         "postcss-cli": "^8.3",
         "purgecss-whitelister": "^2.4",

package.json

@@ -51,7 +51,7 @@
     "katex": "^0.13",
     "lazysizes": "^5.3",
     "markdownlint-cli": "^0.27",
-    "mermaid": "^8.10.2",
+    "mermaid": "^8.11",
     "postcss": "^8.3",
     "postcss-cli": "^8.3",
     "purgecss-whitelister": "^2.4",