feat: add mermaid

gethyas · Jun 30, 2021 · f1fa5c5 · f1fa5c5
1 parent 4894d96
commit f1fa5c5
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 425 deletions.
diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
@@ -0,0 +1,10 @@
+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";',
+};
+
+/* eslint-disable no-undef */
+
+mermaid.initialize(config);
+
+/* eslint-enable no-undef */
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -22,6 +22,7 @@
 @import "components/code";
 @import "components/syntax";
 @import "components/comments";
+@import "components/diagrams";
 @import "components/forms";
 @import "components/images";
 @import "components/search";

diff --git a/assets/scss/components/_diagrams.scss b/assets/scss/components/_diagrams.scss
@@ -0,0 +1,8 @@
+.mermaid {
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+}
+
+.mermaid svg {
+  height: auto;
+}
diff --git a/config/_default/config.toml b/config/_default/config.toml
@@ -89,3 +89,9 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/katex"
     target = "assets/js/vendor/katex"
+  [[module.mounts]]
+    source = "node_modules/mermaid"
+    target = "assets/js/vendor/mermaid"
+  [[module.mounts]]
+    source = "node_modules/mermaid"
+    target = "static/js/vendor/mermaid"
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -72,3 +72,4 @@ editPage = false
   highLight = true
   kaTex = false
   collapsibleSidebar = false
+  mermaid = true
diff --git a/config/postcss.config.js b/config/postcss.config.js
@@ -22,6 +22,7 @@ module.exports = {
         ...whitelister([
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
+          './assets/scss/components/_diagrams.scss',
           './assets/scss/components/_syntax.scss',
           './assets/scss/components/_search.scss',
           './assets/scss/common/_dark.scss',

diff --git a/content/docs/prologue/quick-start.md b/content/docs/prologue/quick-start.md
@@ -13,6 +13,94 @@ weight: 110
 toc: true
 ---
 
+## Flow
+
+{{< mermaid class="bg-light text-center">}}
+graph TD
+  A[Hard] -->|Text| B(Round)
+  B --> C{Decision}
+  C -->|One| D[Result 1]
+  C -->|Two| E[Result 2]
+{{< /mermaid >}}
+
+## Sequence
+
+{{< mermaid >}}
+sequenceDiagram
+  Alice->>John: Hello John, how are you?
+  loop Healthcheck
+      John->>John: Fight against hypochondria
+  end
+  Note right of John: Rational thoughts!
+  John-->>Alice: Great!
+  John->>Bob: How about you?
+  Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+## Gantt
+
+{{< mermaid >}}
+gantt
+  section Section
+  Completed :done,    des1, 2014-01-06,2014-01-08
+  Active        :active,  des2, 2014-01-07, 3d
+  Parallel 1   :         des3, after des1, 1d
+  Parallel 2   :         des4, after des1, 1d
+  Parallel 3   :         des5, after des3, 1d
+  Parallel 4   :         des6, after des4, 1d
+{{< /mermaid >}}
+
+## Class
+
+{{< mermaid >}}
+classDiagram
+  classA --|> classB : Inheritance
+  classC --* classD : Composition
+  classE --o classF : Aggregation
+  classG --> classH : Association
+  classI -- classJ : Link(Solid)
+  classK ..> classL : Dependency
+  classM ..|> classN : Realization
+  classO .. classP : Link(Dashed)
+{{< /mermaid >}}
+
+## State
+
+{{< mermaid >}}
+stateDiagram-v2
+  [*] --> Still
+  Still --> [*]
+  Still --> Moving
+  Moving --> Still
+  Moving --> Crash
+  Crash --> [*]
+{{< /mermaid >}}
+
+## Pie
+
+{{< mermaid >}}
+pie
+  title Key elements in Product X
+  "Calcium" : 42.96
+  "Potassium" : 50.05
+  "Magnesium" : 10.01
+  "Iron" :  5
+{{< /mermaid >}}
+
+## User Journey
+
+{{< mermaid >}}
+journey
+  title My working day
+  section Go to work
+    Make tea: 5: Me
+    Go upstairs: 3: Me
+    Do work: 1: Me, Cat
+  section Go home
+    Go downstairs: 5: Me
+    Sit down: 3: Me
+{{< /mermaid >}}
+
 ## Requirements
 
 Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts:

diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html
@@ -10,6 +10,8 @@
 {{ $katex := resources.Get "js/vendor/katex/dist/katex.js" -}}
 {{ $katexAutoRender := resources.Get "js/vendor/katex/dist/contrib/auto-render.js" -}}
 
+{{ $mermaid := resources.Get "js/vendor/mermaid/dist/mermaid.min.js" -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -49,6 +51,12 @@
   {{ $slice = $slice | append $katexConfig -}}
 {{ end -}}
 
+{{ if .Site.Params.options.mermaid -}}
+  {{ $mermaidConfig := resources.Get "js/mermaid.js" -}}
+  {{ $mermaidConfig := $mermaidConfig | js.Build -}}
+  {{ $slice = $slice | append $mermaidConfig -}}
+{{ end -}}
+
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}
@@ -62,6 +70,9 @@
     <script src="{{ $katex.RelPermalink }}" defer></script>
     <script src="{{ $katexAutoRender.RelPermalink }}" onload="renderMathInElement(document.body);" defer></script>
   {{ end -}}
+  {{ if .Site.Params.options.mermaid -}}
+    <script src="{{ $mermaid.RelPermalink }}" defer></script>
+  {{ end -}}
   <script src="{{ $js.RelPermalink }}" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" defer></script>
@@ -73,6 +84,7 @@
   {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
   {{ $katex := $katex | minify | fingerprint "sha512" -}}
   {{ $katexAutoRender := $katexAutoRender | minify | fingerprint "sha512" -}}
+  {{ $mermaid := $mermaid | minify | fingerprint "sha512" -}}
   {{ if .Site.Params.options.bootStrapJs -}}
     <script src="{{ $bs.RelPermalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
@@ -83,6 +95,9 @@
     <script src="{{ $katex.RelPermalink }}" integrity="{{ $katex.Data.Integrity }}" crossorigin="anonymous" defer></script>
     <script src="{{ $katexAutoRender.RelPermalink }}" integrity="{{ $katexAutoRender.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
+  {{ if .Site.Params.options.mermaid -}}
+    <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ end -}}
   <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>

diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
+  {{- .Inner -}}
+</div>