forked from gohugoio/hugo
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add render hooks for codeblocks + Goat and Mermaid diagrams
Updates gohugoio#7765 Closes gohugoio#9538 Fixes gohugoio#9553 Fixes gohugoio#8520 Fixes gohugoio#6702
- Loading branch information
Showing
72 changed files
with
1,827 additions
and
1,996 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
docs/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_default/baseof.html
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,217 @@ | ||
| --- | ||
| title: Diagrams | ||
| date: 2022-02-20 | ||
| categories: [content management] | ||
| keywords: [diagrams,drawing] | ||
| menu: | ||
| docs: | ||
| parent: "content-management" | ||
| weight: 22 | ||
| weight: 22 | ||
| toc: true | ||
| --- | ||
|
|
||
|
|
||
| ## Mermaid Diagrams | ||
|
|
||
| ```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! | ||
| ``` | ||
|
|
||
|
|
||
|
|
||
| ## Goat Ascii Diagram Examples | ||
|
|
||
| ### Graphics | ||
|
|
||
| ```goat | ||
| . | ||
| 0 3 P * Eye / ^ / | ||
| *-------* +y \ +) \ / Reflection | ||
| 1 /| 2 /| ^ \ \ \ v | ||
| *-------* | | v0 \ v3 --------*-------- | ||
| | |4 | |7 | *----\-----* | ||
| | *-----|-* +-----> +x / v X \ .-.<-------- o | ||
| |/ |/ / / o \ | / | Refraction / \ | ||
| *-------* v / \ +-' / \ | ||
| 5 6 +z v1 *------------------* v2 | o-----o | ||
| v | ||
| ``` | ||
|
|
||
| ### Complex | ||
|
|
||
| ```goat | ||
| +-------------------+ ^ .---. | ||
| | A Box |__.--.__ __.--> | .-. | | | ||
| | | '--' v | * |<--- | | | ||
| +-------------------+ '-' | | | ||
| Round *---(-. | | ||
| .-----------------. .-------. .----------. .-------. | | | | ||
| | Mixed Rounded | | | / Diagonals \ | | | | | | | ||
| | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------. | ||
| '--+------------+-' .--. | '-------+--------' | | | | / Search / | ||
| | | | | '---. | '-------' | '-+------' | ||
| |<---------->| | | | v Interior | ^ | ||
| ' <---' '----' .-----------. ---. .--- v | | ||
| .------------------. Diag line | .-------. +---. \ / . | | ||
| | if (a > b) +---. .--->| | | | | Curved line \ / / \ | | ||
| | obj->fcn() | \ / | '-------' |<--' + / \ | | ||
| '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-' | ||
| .---+-----. | ^ |\ | | /| .--+ | | \ / | ||
| | | | Join \|/ | | Curved | \| |/ | | \ | \ / | ||
| | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---. | ||
| <--+---+-----' | /|\ | | 3 | | ||
| v not:line 'quotes' .-' '---' | ||
| .-. .---+--------. / A || B *bold* | ^ | ||
| | | | Not a dot | <---+---<-- A dash--is not a line v | | ||
| '-' '---------+--' / Nor/is this. --- | ||
| ``` | ||
|
|
||
| ### Process | ||
|
|
||
| ```goat | ||
| . | ||
| .---------. / \ | ||
| | START | / \ .-+-------+-. ___________ | ||
| '----+----' .-------. A / \ B | |COMPLEX| | / \ .-. | ||
| | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X | | ||
| v '-------' \ / | |PROCESS| | \___________/ '-' | ||
| .---------. \ / '-+---+---+-' | ||
| / INPUT / \ / | ||
| '-----+---' ' | ||
| | ^ | ||
| v | | ||
| .-----------. .-----+-----. .-. | ||
| | PROCESS +---------------->| PROCESS |<------+ X | | ||
| '-----------' '-----------' '-' | ||
| ``` | ||
|
|
||
| ### File tree | ||
|
|
||
| Created from https://arthursonzogni.com/Diagon/#Tree | ||
|
|
||
| ```goat { width=300 color="orange" } | ||
| ───Linux─┬─Android | ||
| ├─Debian─┬─Ubuntu─┬─Lubuntu | ||
| │ │ ├─Kubuntu | ||
| │ │ ├─Xubuntu | ||
| │ │ └─Xubuntu | ||
| │ └─Mint | ||
| ├─Centos | ||
| └─Fedora | ||
| ``` | ||
|
|
||
|
|
||
| ### Sequence Diagram | ||
|
|
||
| https://arthursonzogni.com/Diagon/#Sequence | ||
|
|
||
| ```goat { class="w-40" } | ||
| ┌─────┐ ┌───┐ | ||
| │Alice│ │Bob│ | ||
| └──┬──┘ └─┬─┘ | ||
| │ │ | ||
| │ Hello Bob! │ | ||
| │───────────>│ | ||
| │ │ | ||
| │Hello Alice!│ | ||
| │<───────────│ | ||
| ┌──┴──┐ ┌─┴─┐ | ||
| │Alice│ │Bob│ | ||
| └─────┘ └───┘ | ||
| ``` | ||
|
|
||
|
|
||
| ### Flowchart | ||
|
|
||
| https://arthursonzogni.com/Diagon/#Flowchart | ||
|
|
||
| ```goat | ||
| _________________ | ||
| ╱ ╲ ┌─────┐ | ||
| ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│ | ||
| ╲ FLOW CHARTS? ╱yes └──┬──┘ | ||
| ╲_________________╱ │ | ||
| │no │ | ||
| _________▽_________ ______________________ │ | ||
| ╱ ╲ ╱ ╲ ┌────┐ │ | ||
| ╱ OKAY, YOU SEE THE ╲________________╱ ... AND YOU CAN SEE ╲___│GOOD│ │ | ||
| ╲ LINE LABELED 'YES'? ╱yes ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘ │ | ||
| ╲___________________╱ ╲______________________╱ │ │ | ||
| │no │no │ │ | ||
| ________▽_________ _________▽__________ │ │ | ||
| ╱ ╲ ┌───────────┐ ╱ ╲ │ │ | ||
| ╱ BUT YOU SEE THE ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST ╲___ │ │ | ||
| ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│ │ │ | ||
| ╲__________________╱ ╲____________________╱ │ │ │ | ||
| │no │no │ │ │ | ||
| ┌───▽───┐ │ │ │ │ | ||
| │LISTEN.│ └───────┬───────┘ │ │ | ||
| └───┬───┘ ┌──────▽─────┐ │ │ | ||
| ┌─────▽────┐ │(THAT WASN'T│ │ │ | ||
| │I HATE YOU│ │A QUESTION) │ │ │ | ||
| └──────────┘ └──────┬─────┘ │ │ | ||
| ┌────▽───┐ │ │ | ||
| │SCREW IT│ │ │ | ||
| └────┬───┘ │ │ | ||
| └─────┬─────┘ │ | ||
| │ │ | ||
| └─────┬─────┘ | ||
| ┌───────▽──────┐ | ||
| │LET'S GO DRING│ | ||
| └───────┬──────┘ | ||
| ┌─────────▽─────────┐ | ||
| │HEY, I SHOULD TRY │ | ||
| │INSTALLING FREEBSD!│ | ||
| └───────────────────┘ | ||
| ``` | ||
|
|
||
|
|
||
| ### Table | ||
|
|
||
| https://arthursonzogni.com/Diagon/#Table | ||
|
|
||
| ```goat { class="w-80 dark-blue" } | ||
| ┌────────────────────────────────────────────────┐ | ||
| │ │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │SYNTAX = { PRODUCTION } . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │PRODUCTION = IDENTIFIER "=" EXPRESSION "." . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │EXPRESSION = TERM { "|" TERM } . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │TERM = FACTOR { FACTOR } . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │FACTOR = IDENTIFIER │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │ | LITERAL │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │ | "[" EXPRESSION "]" │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │ | "(" EXPRESSION ")" │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │ | "{" EXPRESSION "}" . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │IDENTIFIER = letter { letter } . │ | ||
| ├────────────────────────────────────────────────┤ | ||
| │LITERAL = """" character { character } """" .│ | ||
| └────────────────────────────────────────────────┘ | ||
| ``` | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| {{ $width := .Attributes.width }} | ||
| {{ $height := .Attributes.height }} | ||
| {{ $class := .Attributes.class | default "" }} | ||
| <div class="goat svg-container {{ $class }}"> | ||
| {{ with diagrams.Goat .Code }} | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| font-family="Menlo,Lucida Console,monospace" | ||
| {{ if or $width $height }} | ||
| {{ with $width }}width="{{ . }}"{{ end }} | ||
| {{ with $height }}height="{{ . }}"{{ end }} | ||
| {{ else }} | ||
| viewBox="0 0 {{ .Width }} {{ .Height }}" | ||
| {{ end }}> | ||
| {{ .Body }} | ||
| </svg> | ||
| {{ end }} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| <div class="mermaid"> | ||
| {{- .Code | safeHTML }} | ||
| </div> | ||
| {{ .Page.Store.Set "hasMermaid" true }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.