Merge branch 'nexeck-main'

exampleSite/content/basics/migration/_index.en.md

@@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.19.0 (0000-00-00) {#000}
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 10.3.0. This adds support for the [sankey diagram type]({{% relref "shortcodes/mermaid#sankey" %}}) and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Translation into Hungarian.
 
 ---

exampleSite/content/more/credits/_index.en.md

@@ -10,7 +10,7 @@ Many thanks to [Mathieu Cornic](https://github.com/matcornic) for his work on po
 
 Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating the [Learn theme](https://github.com/getgrav/grav-theme-learn2) for Grav.
 
-## Packages and Libraries
+## Theme Dependencies
 
 - [autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) - A lightweight and powerful vanilla JavaScript completion suggester
 - [clipboard.js](https://clipboardjs.com) - A modern approach to copy text to clipboard
@@ -24,7 +24,7 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating
   - [d3-transition](https://github.com/d3/d3-transition) - Animated transitions for D3 selections
   - [d3-drag](https://github.com/d3/d3-drag) - Drag and drop SVG, HTML or Canvas using mouse or touch input
 - [Font Awesome](https://fontawesome.com) - The internet's icon library and toolkit
-- [github-buttons](https://github.com/buttons/github-buttons) - Unofficial github:buttons
+- [js-yaml](https://github.com/nodeca/js-yaml) - JavaScript YAML parser and dumper
 - [Lunr](https://lunrjs.com) - Enables a great search experience without the need for external, server-side, search services
 - [Lunr Languages](https://github.com/MihaiValentin/lunr-languages) - A collection of languages stemmers and stopwords for Lunr Javascript library
 - [MathJax](https://mathjax.org/) - Beautiful math and chemical formulae in all browsers
@@ -33,7 +33,11 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating
 - [SwaggerUI](https://github.com/swagger-api/swagger-ui) - Generate beautiful documentation from a Swagger-compliant API
 - [WorkSans](https://weiweihuanghuang.github.io/Work-Sans/) - Work Sans is a 9 weight typeface family based loosely on early Grotesques
 
-## Tooling
+## Docs Dependencies
+
+- [github-buttons](https://github.com/buttons/github-buttons) - Unofficial github:buttons
+
+## Tooling Dependencies
 
 - [GitHub](https://github.com) - Continuous deployment, testing and hosting of this project's sources and its documentation
 - Various GitHub Actions

exampleSite/content/shortcodes/mermaid.en.md

@@ -598,3 +598,25 @@ timeline
     2005 : Youtube
     2006 : Twitter
 {{< /mermaid >}}
+
+### Sankey
+
+````go
+{{</* mermaid */>}}
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+{{</* /mermaid */>}}
+````
+
+{{< mermaid >}}
+sankey-beta
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+{{< /mermaid >}}

layouts/partials/footer.html

@@ -62,6 +62,7 @@
     <script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
     <script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
     <script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
+    <script src="{{"js/js-yaml.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
   {{- if isset .Params "custommermaidurl" }}
     <script src="{{ .Params.customMermaidURL }}" defer></script>
   {{- else if isset .Site.Params "custommermaidurl" }}

static/js/theme.js

@@ -164,13 +164,13 @@ function initMermaid( update, attrs ) {
         var YAML=1;
         var INIT=2;
         var GRAPH=3;
-        var d = /^(?:\s*[\n\r])*(-{3}\s*[\n\r](?:.*?)[\n\r]-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s
+        var d = /^(?:\s*[\n\r])*(?:-{3}(\s*[\n\r](?:.*?)[\n\r])-{3}(?:\s*[\n\r]+)+)?(?:\s*(?:%%\s*\{\s*\w+\s*:([^%]*?)%%\s*[\n\r]?))?(.*)$/s
         var m = d.exec( graph );
-        var yaml = '';
+        var yaml = {};
         var dir = {};
         var content = graph;
         if( m && m.length == 4 ){
-            yaml = m[YAML] ? m[YAML] : yaml;
+            yaml = m[YAML] ? jsyaml.load( m[YAML] ) : yaml;
             dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
             content = m[GRAPH] ? m[GRAPH] : content;
         }
@@ -179,8 +179,15 @@ function initMermaid( update, attrs ) {
     };
 
     var serializeGraph = function( graph ){
-        var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
-        return s;
+        var yamlPart = '';
+        if( Object.keys( graph.yaml ).length ){
+            yamlPart = '---\n' + jsyaml.dump( graph.yaml ) + '---\n';
+        }
+        var dirPart = '';
+        if( Object.keys( graph.dir ).length ){
+            dirPart = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
+        }
+        return yamlPart + dirPart + graph.content;
     };
 
     var init_func = function( attrs ){
@@ -189,11 +196,14 @@ function initMermaid( update, attrs ) {
         document.querySelectorAll('.mermaid').forEach( function( element ){
             var parse = parseGraph( decodeHTML( element.innerHTML ) );
 
+            if( parse.yaml.theme ){
+                parse.yaml.relearn_user_theme = true;
+            }
             if( parse.dir.theme ){
                 parse.dir.relearn_user_theme = true;
             }
-            if( !parse.dir.relearn_user_theme ){
-                parse.dir.theme = theme;
+            if( !parse.yaml.relearn_user_theme && !parse.dir.relearn_user_theme ){
+                parse.yaml.theme = theme;
             }
             is_initialized = true;
 
@@ -215,15 +225,15 @@ function initMermaid( update, attrs ) {
             var code = e.querySelector( '.mermaid-code' );
             var parse = parseGraph( decodeHTML( code.innerHTML ) );
 
-            if( parse.dir.relearn_user_theme ){
+            if( parse.yaml.relearn_user_theme || parse.dir.relearn_user_theme ){
                 return;
             }
-            if( parse.dir.theme == theme ){
+            if( parse.yaml.theme == theme || parse.dir.theme == theme ){
                 return;
             }
             is_initialized = true;
 
-            parse.dir.theme = theme;
+            parse.yaml.theme = theme;
             var graph = serializeGraph( parse );
             element.removeAttribute('data-processed');
             element.innerHTML = graph;
@@ -266,7 +276,7 @@ function initMermaid( update, attrs ) {
     }
     var is_initialized = ( update ? update_func( attrs ) : init_func( attrs ) );
     if( is_initialized ){
-        mermaid.init();
+        mermaid.init( {theme: attrs.theme} );
         // zoom for Mermaid
         // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
         var svgs = d3.selectAll( '.mermaid.zoom svg' );
@@ -1336,7 +1346,7 @@ function useMermaid( config ){
         return;
     }
     if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
-        mermaid.initialize( Object.assign( { "securityLevel": "antiscript", "startOnLoad": false     }, config ) );
+        mermaid.initialize( Object.assign( { "securityLevel": "antiscript", "startOnLoad": false }, config ) );
         if( config.theme && variants ){
             var write_style = variants.findLoadedStylesheet( 'variant-style' );
             write_style.setProperty( '--CONFIG-MERMAID-theme', config.theme );