From de41f4f20de30585c83025dd406ef3f67aa8dae4 Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Thu, 15 Apr 2021 15:35:34 +0000
Subject: [PATCH] edit page
---
exampleSite/content/docs/compose/mermaid.md | 375 ++++++++++++++++++++++++++++++++++
exampleSite/content/_index.md | 10
exampleSite/content/docs/compose/shortcodes.md | 234 ---------------------
exampleSite/content/docs/compose/search.md | 4
4 files changed, 382 insertions(+), 241 deletions(-)
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index dc1d44f..6aa9262 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -15,14 +15,14 @@
Compose is a lean theme for the `Hugo`, inspired by [forestry.io](https://forestry.io).
-We do a [Pull Request](https://github.com/onweru/compose/pulls) contributions workflow on **GitHub**. Also feel free to raise any issues or feature suggestions.
-
{{< tip "warning" >}}
-Note that the theme is built with simplicity in mind. [This way](/), if a suggestion complicates the usability of the theme, it may be declined. New users are always welcome!
+Feel free to open a [PR](https://github.com/onweru/compose/pulls), raise an issue(s) or request new feature(s).
{{< /tip >}}
-{{< tip >}}
-You can [generate graphs, charts](]("docs/compose/graphs-charts-tables/#show-a-pie-doughnut--bar-chart-at-once")) and tables from a csv, ~~or a json~~ dataset
+{{< tip >}}
+You can generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown using [mermaid](./docs/compose/mermaid/).
+
+Or, [generate graphs, charts]("./docs/compose/graphs-charts-tables/#show-a-pie-doughnut--bar-chart-at-once") and tables from a csv, ~~or a json~~ file.
{{< /tip >}}
{{< button "docs/compose/" "Read the Docs" >}}{{< button "https://github.com/onweru/compose" "Download Theme" >}}
diff --git a/exampleSite/content/docs/compose/mermaid.md b/exampleSite/content/docs/compose/mermaid.md
new file mode 100644
index 0000000..306c79a
--- /dev/null
+++ b/exampleSite/content/docs/compose/mermaid.md
@@ -0,0 +1,375 @@
+---
+title: "Mermaid"
+weight: 8
+description: "Generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown."
+---
+
+[Mermaid](https://mermaidjs.github.io/) is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
+
+With compose theme, you can use mermaid using a custom shortcode as follows:
+
+### Sequence Diagrams
+
+**Syntax**
+
+```tpl
+{{</* 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<br/>prevail...
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+{{</* /mermaid */>}}
+```
+
+**Result**
+
+{{< 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<br/>prevail...
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+{{< /mermaid >}}
+
+### Flow Charts
+
+**Syntax**
+
+```tpl
+{{</* mermaid */>}}
+flowchart TB
+ c1-->a2
+ subgraph one
+ a1-->a2
+ end
+ subgraph two
+ b1-->b2
+ end
+ subgraph three
+ c1-->c2
+ end
+ one --> two
+ three --> two
+ two --> c2
+{{</* /mermaid */>}}
+```
+**Result**
+
+{{< mermaid >}}
+flowchart TB
+ c1-->a2
+ subgraph one
+ a1-->a2
+ end
+ subgraph two
+ b1-->b2
+ end
+ subgraph three
+ c1-->c2
+ end
+ one --> two
+ three --> two
+ two --> c2
+{{< /mermaid >}}
+
+### Graphs
+
+**Syntax**
+
+```tpl
+{{</* mermaid */>}}
+graph TB
+ sq[Square shape] --> ci((Circle shape))
+
+ subgraph A
+ od>Odd shape]-- Two line<br/>edge comment --> ro
+ di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+ di==>ro2(Rounded square shape)
+ end
+
+ %% Notice that no text in shape are added here instead that is appended further down
+ e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+ %% Comments after double percent signs
+ e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+ cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+ class sq,e green
+ class di orange
+{{</* /mermaid */>}}
+```
+
+**Result**
+
+{{< mermaid >}}
+graph TB
+ sq[Square shape] --> ci((Circle shape))
+
+ subgraph A
+ od>Odd shape]-- Two line<br/>edge comment --> ro
+ di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+ di==>ro2(Rounded square shape)
+ end
+
+ %% Notice that no text in shape are added here instead that is appended further down
+ e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+ %% Comments after double percent signs
+ e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+ cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+ class sq,e green
+ class di orange
+{{< /mermaid >}}
+
+**Syntax**
+
+```tpl
+{{</* mermaid */>}}
+graph LR
+ A[Hard edge] -->|Link text| B(Round edge)
+ B --> C{Decision}
+ C -->|One| D[Result one]
+ C -->|Two| E[Result two]
+{{</* /mermaid */>}}
+```
+
+**Result**
+
+{{< mermaid >}}
+graph LR
+ A[Hard edge] -->|Link text| B(Round edge)
+ B --> C{Decision}
+ C -->|One| D[Result one]
+ C -->|Two| E[Result two]
+{{< /mermaid >}}
+
+### Class Diagram
+
+{{< mermaid >}}
+classDiagram
+ Animal <|-- Duck
+ Animal <|-- Fish
+ Animal <|-- Zebra
+ Animal : +int age
+ Animal : +String gender
+ Animal: +isMammal()
+ Animal: +mate()
+ class Duck{
+ +String beakColor
+ +swim()
+ +quack()
+ }
+ class Fish{
+ -int sizeInFeet
+ -canEat()
+ }
+ class Zebra{
+ +bool is_wild
+ +run()
+ }
+{{< /mermaid >}}
+
+
+### State Diagram
+
+{{< mermaid >}}
+stateDiagram-v2
+ [*] --> Active
+
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+ ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+ }
+{{< /mermaid >}}
+
+{{< mermaid >}}
+stateDiagram-v2
+ State1: The state with a note
+ note right of State1
+ Important information! You can write
+ notes.
+ end note
+ State1 --> State2
+ note left of State2 : This is the note to the left.
+{{< /mermaid >}}
+
+### Relationship Diagrams
+
+**Syntax**
+
+```tpl
+{{</* mermaid */>}}
+erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{</* /mermaid */>}}
+```
+
+**Result**
+
+{{< mermaid >}}
+erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+### User Journey
+
+**Syntax**
+
+```tpl
+{{</* 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: 5: Me
+{{</* /mermaid */>}}
+
+```
+
+**Result**
+
+{{< 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: 5: Me
+{{< /mermaid >}}
+
+### Gantt
+
+**Syntax**
+
+```tpl
+{{</* mermaid */>}}
+gantt
+ dateFormat YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes weekends
+ %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+ 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
+
+ section Critical tasks
+ Completed task in the critical line :crit, done, 2014-01-06,24h
+ Implement parser and jison :crit, done, after des1, 2d
+ Create tests for parser :crit, active, 3d
+ Future task in critical line :crit, 5d
+ Create tests for renderer :2d
+ Add to mermaid :1d
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
+{{</* /mermaid */>}}
+```
+
+**Result**
+
+{{< mermaid >}}
+gantt
+ dateFormat YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes weekends
+ %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+ 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
+
+ section Critical tasks
+ Completed task in the critical line :crit, done, 2014-01-06,24h
+ Implement parser and jison :crit, done, after des1, 2d
+ Create tests for parser :crit, active, 3d
+ Future task in critical line :crit, 5d
+ Create tests for renderer :2d
+ Add to mermaid :1d
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
+{{< /mermaid >}}
+
+### Pie Chart
+
+```tpl
+{{</* mermaid */>}}
+pie
+ title Key elements in Product X
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
+{{</* /mermaid */>}}
+
+```
+
+**Result**
+
+{{< mermaid >}}
+pie
+ title Key elements in Product X
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
+{{< /mermaid >}}
diff --git a/exampleSite/content/docs/compose/search.md b/exampleSite/content/docs/compose/search.md
index 0f3b45c..3bacfdf 100644
--- a/exampleSite/content/docs/compose/search.md
+++ b/exampleSite/content/docs/compose/search.md
@@ -1,9 +1,9 @@
+++
description = ""
title = "Search Function"
-weight = 8
-
+weight = 7
+++
+
Firstly, ensure you have these lines inside your config.toml file
```toml
diff --git a/exampleSite/content/docs/compose/shortcodes.md b/exampleSite/content/docs/compose/shortcodes.md
index 58b2421..60c9f09 100644
--- a/exampleSite/content/docs/compose/shortcodes.md
+++ b/exampleSite/content/docs/compose/shortcodes.md
@@ -162,237 +162,3 @@
{{< tip "warning" >}}
Something of **interest** the user should be careful about
{{< /tip >}}
-
-### Mermaid
-
-[Mermaid](https://mermaidjs.github.io/) is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
-
-With compose theme, you can use mermaid using this shortcode as follows:
-
-**Syntax**
-
-```tpl
-{{</* 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<br/>prevail...
- John-->>Alice: Great!
- John->>Bob: How about you?
- Bob-->>John: Jolly good!
-{{</* /mermaid */>}}
-```
-
-**Result**
-
-{{< 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<br/>prevail...
- John-->>Alice: Great!
- John->>Bob: How about you?
- Bob-->>John: Jolly good!
-{{< /mermaid >}}
-
-{{< mermaid >}}
-flowchart TB
- c1-->a2
- subgraph one
- a1-->a2
- end
- subgraph two
- b1-->b2
- end
- subgraph three
- c1-->c2
- end
- one --> two
- three --> two
- two --> c2
-{{< /mermaid >}}
-
-{{< mermaid >}}
-graph LR;
- A-->B;
- B-->C;
- C-->D;
- D-->E;
- click A "http://www.github.com" _blank
- click B "http://www.github.com" "Open this in a new tab" _blank
- click C href "http://www.github.com" _blank
- click D href "http://www.github.com" "Open this in a new tab" _blank
-{{< /mermaid >}}
-
-{{< mermaid >}}
-graph TB
- sq[Square shape] --> ci((Circle shape))
-
- subgraph A
- od>Odd shape]-- Two line<br/>edge comment --> ro
- di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
- di==>ro2(Rounded square shape)
- end
-
- %% Notice that no text in shape are added here instead that is appended further down
- e --> od3>Really long text with linebreak<br>in an Odd shape]
-
- %% Comments after double percent signs
- e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
- cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
- classDef green fill:#9f6,stroke:#333,stroke-width:2px;
- classDef orange fill:#f96,stroke:#333,stroke-width:4px;
- class sq,e green
- class di orange
-{{< /mermaid >}}
-
-{{< mermaid >}}
-graph TD
- B["fa:fa-twitter for peace"]
- B-->C[fa:fa-ban forbidden]
- B-->D(fa:fa-spinner);
- B-->E(A fa:fa-camera-retro perhaps?);
-{{< /mermaid >}}
-
-{{< mermaid >}}
-graph LR
- A[Hard edge] -->|Link text| B(Round edge)
- B --> C{Decision}
- C -->|One| D[Result one]
- C -->|Two| E[Result two]
-{{< /mermaid >}}
-
-{{< mermaid >}}
-classDiagram
- Animal <|-- Duck
- Animal <|-- Fish
- Animal <|-- Zebra
- Animal : +int age
- Animal : +String gender
- Animal: +isMammal()
- Animal: +mate()
- class Duck{
- +String beakColor
- +swim()
- +quack()
- }
- class Fish{
- -int sizeInFeet
- -canEat()
- }
- class Zebra{
- +bool is_wild
- +run()
- }
-{{< /mermaid >}}
-
-{{< mermaid >}}
-stateDiagram-v2
- [*] --> Still
- Still --> [*]
-
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
-{{< /mermaid >}}
-
-{{< mermaid >}}
-stateDiagram-v2
- [*] --> Active
-
- state Active {
- [*] --> NumLockOff
- NumLockOff --> NumLockOn : EvNumLockPressed
- NumLockOn --> NumLockOff : EvNumLockPressed
- --
- [*] --> CapsLockOff
- CapsLockOff --> CapsLockOn : EvCapsLockPressed
- CapsLockOn --> CapsLockOff : EvCapsLockPressed
- --
- [*] --> ScrollLockOff
- ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
- ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
- }
-{{< /mermaid >}}
-
-{{< mermaid >}}
-stateDiagram-v2
- State1: The state with a note
- note right of State1
- Important information! You can write
- notes.
- end note
- State1 --> State2
- note left of State2 : This is the note to the left.
-{{< /mermaid >}}
-
-{{< mermaid >}}
-erDiagram
- CUSTOMER ||--o{ ORDER : places
- ORDER ||--|{ LINE-ITEM : contains
- CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-{{< /mermaid >}}
-
-{{< 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: 5: Me
-{{< /mermaid >}}
-
-{{< mermaid >}}
-gantt
- dateFormat YYYY-MM-DD
- title Adding GANTT diagram functionality to mermaid
- excludes weekends
- %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
- 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
-
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
-
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
-
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page :20h
- Add another diagram to demo page :48h
-{{< /mermaid >}}
-
-{{< mermaid >}}
-pie
- title Key elements in Product X
- "Calcium" : 42.96
- "Potassium" : 50.05
- "Magnesium" : 10.01
- "Iron" : 5
-{{< /mermaid >}}
\ No newline at end of file
--
Gitblit v1.10.0