Merge pull request #369 from h-enk/mermaid

Add Mermaid support
This commit is contained in:
Henk Verlinde 2021-07-05 09:55:52 +02:00 committed by GitHub
commit 86160f37f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 64 additions and 10 deletions

View File

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

View File

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

11
assets/js/mermaid.js Normal file
View File

@ -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');
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block 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 X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin Referrer-Policy: strict-origin
Feature-Policy: geolocation 'self' Feature-Policy: geolocation 'self'

View File

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

View File

@ -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 -}}

2
package-lock.json generated
View File

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

View File

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