diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 3e391797eb..dc38cf5b4c 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -205,4 +205,5 @@ disableHugoGeneratorInject = true # graphs; you usually will not need it and you should remove this for # security reasons mermaidInitialize = "{ \"securityLevel\": \"loose\" }" + mermaidZoom = true additionalContentLanguage = [ "en" ] diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 1692435b01..4b004d9fb7 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -28,6 +28,10 @@ This document shows you what's new in the latest release. For a detailed list of ```` +- {{% badge style="note" title=" " %}}Change{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid#parameter" %}}) diagrams can now be configured for pan and zoom on site and project level as individually for each graph. + + The default setting of `on`, in effect since 1.1.0, changed back to `off` as there was interference with scrolling on mobile and big pages. + - {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme is now capable to visually [adapt to your OS's light/dark mode setting]({{%relref "basics/customization/#adjust-to-os-settings" %}}). This is also the new default setting if you haven't configured `themeVariant` in your `config.toml`. @@ -459,6 +463,8 @@ This document shows you what's new in the latest release. For a detailed list of ## 1.1.0 (2021-07-02) +- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid" %}}) diagrams can now be panned and zoomed. This isn't configurable yet. + - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [`Mermaid`]({{% relref "shortcodes/mermaid#configuration" %}}) config options can be set in `config.toml`. --- diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 9b71632760..972e34f5f3 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -5,7 +5,7 @@ title = "Mermaid" The `mermaid` shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the [Mermaid](https://mermaidjs.github.io/) library. -{{< mermaid align="center" >}} +{{< mermaid align="center">}} graph LR; If --> Then Then --> Else @@ -33,7 +33,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl {{% tab name="codefence" %}} ````md -```mermaid { align="center" } +```mermaid { align="center" zoom="true" } graph LR; If --> Then Then --> Else @@ -44,7 +44,7 @@ graph LR; {{% tab name="shortcode" %}} ````go -{{}} +{{}} graph LR; If --> Then Then --> Else @@ -59,6 +59,7 @@ graph LR; "context" . "content" "graph LR;\nIf --> Then\nThen --> Else" "align" "center" + "zoom" "true" )}} ```` @@ -73,6 +74,7 @@ The generated graphs can be be panned by dragging them and zoomed by using the m | Name | Default | Notes | |:----------------------|:-----------------|:------------| | **align** | `center` | Allowed values are `left`, `center` or `right`. | +| **zoom** | see notes | Whether the graph is pan- and zoomable.

If not set the value is determined by the `mermaidZoom` setting of the [site](#global-configuration-file) or the [pages frontmatter](#pages-frontmatter) or `false` if not set at all.

- `false`: no pan or zoom
- `true`: pan and zoom active | | _**<content>**_ | _<empty>_ | Your Mermaid graph. | ## Configuration @@ -94,6 +96,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl ````toml [params] mermaidInitialize = "{ \"theme\": \"dark\" }" + mermaidZoom = true [markup] [markup.highlight] @@ -108,6 +111,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl ````toml +++ mermaidInitialize = "{ \"theme\": \"dark\" }" +mermaidZoom = true +++ ```` @@ -339,10 +343,10 @@ gantt Add to Mermaid :1d {{< /mermaid >}} -### Pie Chart +### Pie Chart without Zoom ````go -{{}} +{{}} pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 @@ -350,7 +354,7 @@ pie title Pets adopted by volunteers {{}} ```` -{{< mermaid >}} +{{< mermaid zoom="false" >}} pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 diff --git a/layouts/partials/shortcodes/mermaid.html b/layouts/partials/shortcodes/mermaid.html index 6dded3f2a1..f23124bff3 100644 --- a/layouts/partials/shortcodes/mermaid.html +++ b/layouts/partials/shortcodes/mermaid.html @@ -1,8 +1,21 @@ {{- $context := .context }} {{- $content := .content }} {{- $align := .align | default "center" }} +{{- $zoom := $context.Site.Params.mermaidZoom | default false }} +{{- with $context.Page.Params.mermaidZoom }} + {{- $zoom = . }} + {{- if eq (printf "%T" .) "string" }} + {{- $zoom = (eq . "true") }} + {{- end }} +{{- end }} +{{- with .zoom }} + {{- $zoom = . }} + {{- if eq (printf "%T" .) "string" }} + {{- $zoom = (eq . "true") }} + {{- end }} +{{- end }} {{- with $context }} -
+
{{- replaceRE "'" "'" ( replaceRE """ "\"" ( $content | safeHTML ) ) -}}
{{- .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html index bc52efc732..03918da815 100644 --- a/layouts/shortcodes/mermaid.html +++ b/layouts/shortcodes/mermaid.html @@ -3,4 +3,5 @@ "context" . "content" .Inner "align" (.Get "align") + "zoom" (.Get "zoom") ) }} \ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index 735dc47924..24ecc0a87c 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1121,12 +1121,15 @@ option { .mermaid > svg { border: 1px solid transparent; - cursor: pointer; /* remove inline height from generated diagram */ height: initial !important; } -.mermaid > svg:hover { +.mermaid.zoom > svg { + cursor: pointer; +} + +.mermaid.zoom > svg:hover { border-color: rgba( 134, 134, 134, .333 ); } diff --git a/static/js/theme.js b/static/js/theme.js index a057bf7250..80ae9f944a 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -227,7 +227,7 @@ function initMermaid( update, attrs ) { mermaid.init(); // zoom for Mermaid // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607 - var svgs = d3.selectAll( '.mermaid svg' ); + var svgs = d3.selectAll( '.mermaid.zoom svg' ); svgs.each( function(){ var svg = d3.select( this ); svg.html( '' + svg.html() + '' );