nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

mermaid: allow for YAML frontmatter inside of graph #564

Browse source
This commit is contained in:
Sören Weber 2023-06-09 21:45:57 +02:00
parent 59428415f2
commit e77afd6b70
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 24 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -117,11 +117,13 @@ mermaidZoom = true
## Examples
### Flowchart with Non-Default Mermaid Theme
### Flowchart with YAML-Title
````go
{{</* mermaid */>}}
%%{init:{"theme":"forest"}}%%
---
title: Example Diagram
---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
@ -131,7 +133,9 @@ graph LR;
````
{{< mermaid >}}
%%{init:{"theme":"forest"}}%%
---
title: Example Diagram
---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
@ -247,10 +251,11 @@ stateDiagram-v2
closed --> open: Open
{{< /mermaid >}}
### Entity Relationship Model
### Entity Relationship Model with Non-Default Mermaid Theme
````go
{{</* mermaid */>}}
%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
@ -264,6 +269,7 @@ erDiagram
````
{{< mermaid >}}
%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places

35
static/js/theme.js
View file

@ -158,35 +158,28 @@ function initMermaid( update, attrs ) {
};
var parseGraph = function( graph ){
var d = /^\s*(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
// See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
// for reference on the regex originally taken from jekyll
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 m = d.exec( graph );
var yaml = '';
var dir = {};
var content = graph;
if( m && m.length == 3 ){
dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
content = graph.substring( d.lastIndex );
if( m && m.length == 4 ){
yaml = m[YAML] ? m[YAML] : yaml;
dir = m[INIT] ? JSON.parse( '{ "init": ' + m[INIT] ).init : dir;
content = m[GRAPH] ? m[GRAPH] : content;
}
content = content.trim();
return { dir: dir, content: content };
var ret = { yaml: yaml, dir: dir, content: content.trim() }
return ret;
};
var serializeGraph = function( graph ){
// See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
// for reference on the regex originally taken from jekyll
const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
const matches = graph.content.match(frontMatterRegex);
// if we find front matter, we need to put this before the `%%{init` directive.
if (matches) {
const ymlFrontMatter = graph.content.substring(0, matches[0].length);
const graphContent = graph.content.slice(matches[0].length);
var s = ymlFrontMatter + '\n%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
s += graphContent;
var s = graph.yaml + '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
return s;
} else {
var s = '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n';
s += graph.content;
return s;
}
};
var init_func = function( attrs ){