nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 19:00:24 +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

38
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.
@ -85,7 +65,7 @@ You can add:
``` ```
> the possiblities are endless > the possiblities are endless
{{% /expand%}} {{% /expand %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````
@ -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.

227
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,71 +6,57 @@ 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"*/>}} {{< 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">}}
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>} 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]
{{</mermaid>}} {{< /mermaid >}}
or you can use this alternative syntax: {{% expand "Show markup" "true" %}}
````
```mermaid {{</* mermaid align="left" */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
renders as
```mermaid
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]
``` {{</* /mermaid */>}}
````
{{% /expand %}}
## Sequence example ### Sequence
{{</* mermaid */>}} {{< 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 */>}}
renders as
{{<mermaid>}}
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
@ -81,31 +68,29 @@ sequenceDiagram
John-->Alice: Great! John-->Alice: Great!
John->Bob: How about you? John->Bob: How about you?
Bob-->John: Jolly good! Bob-->John: Jolly good!
{{</mermaid>}} {{< /mermaid >}}
### GANTT Example {{% expand "Show markup" "true" %}}
````
{{</* 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 */>}}
````
{{% /expand %}}
{{</* mermaid */>}} ### GANTT
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
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
{{</* /mermaid */>}}
renders as {{< mermaid >}}
{{<mermaid>}}
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@ -113,7 +98,7 @@ gantt
Completed task :done, des1, 2014-01-06,2014-01-08 Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d Future task2 : des4, after des3, 5d
section Critical tasks section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d Implement parser and jison :crit, done, after des1, 2d
@ -121,30 +106,33 @@ gantt
Future task in critical line :crit, 5d Future task in critical line :crit, 5d
Create tests for renderer :2d Create tests for renderer :2d
Add to mermaid :1d Add to mermaid :1d
{{</mermaid>}} {{< /mermaid >}}
### Class example {{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
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
{{</* /mermaid */>}}
````
{{% /expand %}}
{{</* mermaid */>}} ### Class
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}}
renders as {{< mermaid >}}
{{<mermaid>}}
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04
@ -159,24 +147,32 @@ classDiagram
Class01 : int chimp Class01 : int chimp
Class01 : int gorilla Class01 : int gorilla
Class08 <--> C2: Cool label Class08 <--> C2: Cool label
{{</mermaid>}} {{< /mermaid >}}
### State Diagrams {{% expand "Show markup" "true" %}}
````
{{</* mermaid */>}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}}
````
{{% /expand %}}
{{</* mermaid */>}} ### State
stateDiagram-v2
open: Open Door
closed: Closed Door
locked: Locked Door
open --> closed: Close
closed --> locked: Lock
locked --> closed: Unlock
closed --> open: Open
{{</* /mermaid */>}}
renders as {{< mermaid >}}
{{<mermaid>}}
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door
closed: Closed Door closed: Closed Door
@ -185,7 +181,22 @@ stateDiagram-v2
closed --> locked: Lock closed --> locked: Lock
locked --> closed: Unlock locked --> closed: Unlock
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

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.