nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-03-16 22:29:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: unifiy mermaid, expand and notice docs #31

Browse source
This commit is contained in:
Sören Weber 2021-07-26 10:10:10 +02:00
parent 4b4a6bc5e2
commit c62a9d1958
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 136 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
exampleSite/content/shortcodes/expand.en.md
View file

@ -21,23 +21,13 @@ The second optional parameter controls if the block is initially shown as expand
### All defaults ### All defaults
{{% expand %}} {{% expand %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Yes, you did it!
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /expand %}} {{% /expand %}}
{{% expand "Show markup" %}} {{% expand "Show markup" "true" %}}
```` ````
{{%/* expand */%}} {{%/* expand */%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Yes, you did it!
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{%/* /expand */%}} {{%/* /expand */%}}
```` ````
{{% /expand %}} {{% /expand %}}
@ -45,23 +35,13 @@ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### Initially expanded ### Initially expanded
{{% expand "Expand me..." "true" %}} {{% expand "Expand me..." "true" %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod No need to press you!
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /expand %}} {{% /expand %}}
{{% expand "Show markup" %}} {{% expand "Show markup" "true" %}}
```` ````
{{%/* expand "Expand me..." "true" */%}} {{%/* expand "Expand me..." "true" */%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod No need to press you!
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{%/* /expand */%}} {{%/* /expand */%}}
```` ````
{{% /expand %}} {{% /expand %}}
@ -75,7 +55,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `expand` - other shortcodes besides `expand`
- etc. - etc.
@ -96,7 +76,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `expand` - other shortcodes besides `expand`
- etc. - etc.

191
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -1,3 +1,4 @@
--- ---
title : "Mermaid" title : "Mermaid"
description : "Generation of diagram and flowchart from text in a similar manner as markdown" description : "Generation of diagram and flowchart from text in a similar manner as markdown"
@ -5,23 +6,33 @@ description : "Generation of diagram and flowchart from text in a similar manner
[Mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. [Mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
Just insert your mermaid code in the `mermaid` shortcode and that's it. ## Usage
You can pan and zoom the generated graphs. Just insert your mermaid code in the `mermaid` shortcode like this:
````
{{</* mermaid [ align=(left|right|center|justify) ] */>}}
classDiagram
Person *-- Dog
{{</* /mermaid */>}}
````
You can set an optional `align` attribute which defaults to `center`.
If you don't need alignment you can use the alternative syntax using code fences:
````plaintext
```mermaid
classDiagram
Person *-- Dog
```
````
The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures.
## Examples ## Examples
### Flowchart example ### Flowchart
{{</*mermaid align="left"*/>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
renders as
{{< mermaid align="left" >}} {{< mermaid align="left" >}}
graph LR; graph LR;
@ -31,43 +42,19 @@ graph LR;
C -->|Two| E[Result two] C -->|Two| E[Result two]
{{< /mermaid >}} {{< /mermaid >}}
or you can use this alternative syntax: {{% expand "Show markup" "true" %}}
````
```mermaid {{</* mermaid align="left" */>}}
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{<strong>Decision</strong>}
C -->|One| D[Result one] C -->|One| D[Result one]
C -->|Two| E[Result two] C -->|Two| E[Result two]
```
renders as
```mermaid
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
## Sequence example
{{</* 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 */>}}
````
{{% /expand %}}
renders as ### Sequence
{{< mermaid >}} {{< mermaid >}}
sequenceDiagram sequenceDiagram
@ -83,27 +70,25 @@ sequenceDiagram
Bob-->John: Jolly good! Bob-->John: Jolly good!
{{< /mermaid >}} {{< /mermaid >}}
### GANTT Example {{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}} {{</* mermaid */>}}
gantt sequenceDiagram
dateFormat YYYY-MM-DD participant Alice
title Adding GANTT diagram functionality to mermaid participant Bob
section A section Alice->>John: Hello John, how are you?
Completed task :done, des1, 2014-01-06,2014-01-08 loop Healthcheck
Active task :active, des2, 2014-01-09, 3d John->John: Fight against hypochondria
Future task : des3, after des2, 5d end
Future task2 : des4, after des3, 5d Note right of John: Rational thoughts <br/>prevail...
section Critical tasks John-->Alice: Great!
Completed task in the critical line :crit, done, 2014-01-06,24h John->Bob: How about you?
Implement parser and jison :crit, done, after des1, 2d Bob-->John: Jolly good!
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}} {{</* /mermaid */>}}
````
{{% /expand %}}
renders as ### GANTT
{{< mermaid >}} {{< mermaid >}}
gantt gantt
@ -123,26 +108,29 @@ gantt
Add to mermaid :1d Add to mermaid :1d
{{< /mermaid >}} {{< /mermaid >}}
### Class example {{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}} {{</* mermaid */>}}
classDiagram gantt
Class01 <|-- AveryLongClass : Cool dateFormat YYYY-MM-DD
Class03 *-- Class04 title Adding GANTT diagram functionality to mermaid
Class05 o-- Class06 section A section
Class07 .. Class08 Completed task :done, des1, 2014-01-06,2014-01-08
Class09 --> C2 : Where am i? Active task :active, des2, 2014-01-09, 3d
Class09 --* C3 Future task : des3, after des2, 5d
Class09 --|> Class07 Future task2 : des4, after des3, 5d
Class07 : equals() section Critical tasks
Class07 : Object[] elementData Completed task in the critical line :crit, done, 2014-01-06,24h
Class01 : size() Implement parser and jison :crit, done, after des1, 2d
Class01 : int chimp Create tests for parser :crit, active, 3d
Class01 : int gorilla Future task in critical line :crit, 5d
Class08 <--> C2: Cool label Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}} {{</* /mermaid */>}}
````
{{% /expand %}}
renders as ### Class
{{< mermaid >}} {{< mermaid >}}
classDiagram classDiagram
@ -161,20 +149,28 @@ classDiagram
Class08 <--> C2: Cool label Class08 <--> C2: Cool label
{{< /mermaid >}} {{< /mermaid >}}
### State Diagrams {{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}} {{</* mermaid */>}}
stateDiagram-v2 classDiagram
open: Open Door Class01 <|-- AveryLongClass : Cool
closed: Closed Door Class03 *-- Class04
locked: Locked Door Class05 o-- Class06
open --> closed: Close Class07 .. Class08
closed --> locked: Lock Class09 --> C2 : Where am i?
locked --> closed: Unlock Class09 --* C3
closed --> open: Open Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}} {{</* /mermaid */>}}
````
{{% /expand %}}
renders as ### State
{{< mermaid >}} {{< mermaid >}}
stateDiagram-v2 stateDiagram-v2
@ -187,6 +183,21 @@ stateDiagram-v2
closed --> open: Open closed --> open: Open
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}}
stateDiagram-v2
open: Open Door
closed: Closed Door
locked: Locked Door
open --> closed: Close
closed --> locked: Lock
locked --> closed: Unlock
closed --> open: Open
{{</* /mermaid */>}}
````
{{% /expand %}}
## Configuration ## Configuration
Mermaid is configured with default settings. You can customize mermaids default settings for all of your files thru a JSON object in your `config.toml` or override these settings sidewise thru your pages frontmatter. Mermaid is configured with default settings. You can customize mermaids default settings for all of your files thru a JSON object in your `config.toml` or override these settings sidewise thru your pages frontmatter.

16
exampleSite/content/shortcodes/notice.en.md
View file

@ -23,7 +23,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -44,7 +44,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -67,7 +67,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -88,7 +88,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -111,7 +111,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -132,7 +132,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -155,7 +155,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
@ -176,7 +176,7 @@ You can add:
- multiple paragraphs - multiple paragraphs
- bullet point lists - bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text - _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com) - [links](https://example.com)
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.