From 6e00bc86da2a2340b9c06893505675d817ce5bcc Mon Sep 17 00:00:00 2001 From: Henk Verlinde 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 -}} {{ 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 -}}