diff --git a/assets/css/main.css b/assets/css/main.css index cd76a71..88cc182 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -167,8 +167,8 @@ th, td { pre { max-width: 100%; overflow: auto; - margin-top: 0; - margin-bottom: 0; + /* margin-top: 0; */ + /* margin-bottom: 0; */ } code, diff --git a/exampleSiteMultilingual/content/posts/advanced.md b/exampleSiteMultilingual/content/posts/advanced.md new file mode 100644 index 0000000..1c8f723 --- /dev/null +++ b/exampleSiteMultilingual/content/posts/advanced.md @@ -0,0 +1,105 @@ ++++ +author = "Hugo Authors" +title = "Advanced Diagram Usage" +date = "2024-04-09" +description = "Guide to advanced usage of Anubis2" +tags = [ + "emoji", +] ++++ + + +## GoAT + +```goat + . . . .--- 1 .-- 1 / 1 + / \ | | .---+ .-+ + + / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2 + + + | | | | ---+ ---+ + + / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3 + / \ / \ | | | | | | | | '---+ '-+ + + 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4 +``` + +## Mermaid Diagrams + +Get more examples at [here](https://mermaid.js.org/intro/) + +```mermaid +gitGraph: + commit "Ashish" + branch newbranch + checkout newbranch + commit id:"1111" + commit tag:"test" + checkout main + commit type: HIGHLIGHT + commit + merge newbranch + commit + branch b2 + commit +``` + +```mermaid +gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1, 20d + section Another + Task in Another :2014-01-12, 12d + another task :24d + +``` + +```mermaid +stateDiagram + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] + +``` + +```mermaid +sankey-beta + +Pumped heat,"Heating and cooling, ""homes""",193.026 +Pumped heat,"Heating and cooling, ""commercial""",70.672 +``` + +```mermaid +sequenceDiagram + loop Daily query + Alice->>Bob: Hello Bob, how are you? + alt is sick + Bob->>Alice: Not so good :( + else is well + Bob->>Alice: Feeling fresh like a daisy + end + + opt Extra response + Bob->>Alice: Thanks for asking + end + end + +``` + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 0000000..753a2d8 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +
+    {{- .Inner | safeHTML }}
+
+{{ .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 38f3b57..ddda08d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -41,4 +41,15 @@ {{ if not .Params.disableComments }} {{ partial "comments.html" . }} {{ end }} + + {{/* When you use ```mermaid``, render-codeblock-mermaid.html is called and + `.Store.Set "hasMermaid"` is executed. + `.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded. + */}} + {{ if .Store.Get "hasMermaid" }} + + {{ end }} {{ end }}