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 Markdown diagrams and render hooks for code blocks
You can now create custom hook templates for code blocks, either one for all (`render-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`). We also used this new hook to add support for diagrams in Hugo: * Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams. * Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information. Updates gohugoio#7765 Closes gohugoio#9538 Fixes gohugoio#9553 Fixes gohugoio#8520 Fixes gohugoio#6702 Fixes gohugoio#9558
- Loading branch information
Showing
73 changed files
with
1,895 additions
and
2,006 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.