From 6e00bc86da2a2340b9c06893505675d817ce5bcc Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Fri, 2 Jul 2021 09:07:05 +0200
Subject: [PATCH] ux: update for dark mode

---
 assets/scss/common/_dark.scss        |  5 ++
 content/docs/prologue/quick-start.md | 83 +++++++++++++++++++---------
 layouts/shortcodes/mermaid.html      |  2 +-
 3 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 7cafd9e..479dfc1 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -246,6 +246,11 @@ body.dark code:not(.hljs):not(.language-mermaid) {
   color: $body-color-dark;
 }
 
+body.dark .mermaid,
+body.dark pre code.language-mermaid {
+  background: $white;
+}
+
 body.dark blockquote {
   border-left: 3px solid $border-dark;
 }
diff --git a/content/docs/prologue/quick-start.md b/content/docs/prologue/quick-start.md
index bfe331b..70de019 100644
--- a/content/docs/prologue/quick-start.md
+++ b/content/docs/prologue/quick-start.md
@@ -19,7 +19,7 @@ function myFunction(p1, p2) {
 }
 ```
 
-## Flow
+## Flowchart
 
 ### Shortcode
 
@@ -61,7 +61,7 @@ graph TD
   C -->|Two| E[Result 2]
 ```
 
-## Sequence
+## Sequence diagram
 
 {{< mermaid >}}
 sequenceDiagram
@@ -75,22 +75,7 @@ sequenceDiagram
   Bob-->>John: Jolly good!
 {{< /mermaid >}}
 
-## Gantt
-
-{{< mermaid >}}
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-{{< /mermaid >}}
-
-## Class
+## Class diagram
 
 {{< mermaid >}}
 classDiagram
@@ -111,7 +96,7 @@ classDiagram
   }
 {{< /mermaid >}}
 
-## State
+## State diagram
 
 {{< mermaid >}}
 stateDiagram-v2
@@ -123,18 +108,16 @@ stateDiagram-v2
   Crash --> [*]
 {{< /mermaid >}}
 
-## Pie
+## Entity Relationship Diagram
 
 {{< mermaid >}}
-pie
-  title Key elements in Product X
-  "Calcium" : 42.96
-  "Potassium" : 50.05
-  "Magnesium" : 10.01
-  "Iron" :  5
+erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE-ITEM : contains
+  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 {{< /mermaid >}}
 
-## User Journey
+## User Journey Diagram
 
 {{< mermaid >}}
 journey
@@ -148,6 +131,52 @@ journey
     Sit down: 3: Me
 {{< /mermaid >}}
 
+## Gantt chart
+
+{{< mermaid >}}
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+{{< /mermaid >}}
+
+## Pie chart
+
+{{< mermaid >}}
+pie
+  title Key elements in Product X
+  "Calcium" : 42.96
+  "Potassium" : 50.05
+  "Magnesium" : 10.01
+  "Iron" :  5
+{{< /mermaid >}}
+
+## Requirement Diagram
+
+```mermaid
+requirementDiagram
+
+  requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+  }
+
+  element test_entity {
+  type: simulation
+  }
+
+  test_entity - satisfies -> test_req
+
+```
+
 ## 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/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index ebba085..ae18745 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -4,5 +4,5 @@
     {{ replaceRE "(```\\s+$)" "" $data -}}
   </div>
 {{ else -}}
-  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }}
+  {{ errorf "Failed to process mermaid shortcode(s). Set `mermaid = true` in `./config/_default/params.toml`." }}
 {{ end -}}