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
{{% expand %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
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.
Yes, you did it!
{{% /expand %}}
{{% expand "Show markup" %}}
{{% expand "Show markup" "true" %}}
````
{{%/* expand */%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
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.
Yes, you did it!
{{%/* /expand */%}}
````
{{% /expand %}}
@ -45,23 +35,13 @@ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### Initially expanded
{{% expand "Expand me..." "true" %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
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.
No need to press you!
{{% /expand %}}
{{% expand "Show markup" %}}
{{% expand "Show markup" "true" %}}
````
{{%/* expand "Expand me..." "true" */%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
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.
No need to press you!
{{%/* /expand */%}}
````
{{% /expand %}}
@ -75,7 +55,7 @@ You can add:
- multiple paragraphs
- bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text
- _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com)
- other shortcodes besides `expand`
- etc.
@ -85,7 +65,7 @@ You can add:
```
> the possiblities are endless
{{% /expand%}}
{{% /expand %}}
{{% expand "Show markup" %}}
````
@ -96,7 +76,7 @@ You can add:
- multiple paragraphs
- bullet point lists
- *emphasized*, **bold** and even ***bold emphasized*** text
- _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com)
- other shortcodes besides `expand`
- etc.

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

@ -1,3 +1,4 @@
---
title : "Mermaid"
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.
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
### 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;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</mermaid>}}
{{< /mermaid >}}
or you can use this alternative syntax:
```mermaid
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
{{% expand "Show markup" "true" %}}
````
{{</* mermaid align="left" */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
B --> C{<strong>Decision</strong>}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
{{</* /mermaid */>}}
````
{{% /expand %}}
## Sequence example
### Sequence
{{</* 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>}}
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
@ -81,31 +68,29 @@ sequenceDiagram
John-->Alice: Great!
John->Bob: How about you?
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
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 */>}}
### GANTT
renders as
{{<mermaid>}}
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@ -121,30 +106,33 @@ gantt
Future task in critical line :crit, 5d
Create tests for renderer :2d
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 */>}}
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 */>}}
### Class
renders as
{{<mermaid>}}
{{< mermaid >}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
@ -159,24 +147,32 @@ classDiagram
Class01 : int chimp
Class01 : int gorilla
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 */>}}
stateDiagram-v2
open: Open Door
closed: Closed Door
locked: Locked Door
open --> closed: Close
closed --> locked: Lock
locked --> closed: Unlock
closed --> open: Open
{{</* /mermaid */>}}
### State
renders as
{{<mermaid>}}
{{< mermaid >}}
stateDiagram-v2
open: Open Door
closed: Closed Door
@ -185,7 +181,22 @@ stateDiagram-v2
closed --> locked: Lock
locked --> closed: Unlock
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

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

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