Skip to content

Commit

Permalink
Add render hooks for codeblocks + Goat and Mermaid diagrams
Browse files Browse the repository at this point in the history 
Updates gohugoio#7765
Closes gohugoio#9538
Fixes gohugoio#9553
  • Loading branch information
@bep
bep committed Feb 23, 2022
1 parent aebde49 commit 4da5711
Show file tree
Hide file tree
Showing 71 changed files with 1,819 additions and 1,997 deletions.
8 changes: 8 additions & 0 deletions common/hugio/writers.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ import (
"io/ioutil"
)

// As implemented by strings.Builder.
type FlexiWriter interface {
io.Writer
io.ByteWriter
WriteString(s string) (int, error)
WriteRune(r rune) (int, error)
}

type multiWriteCloser struct {
io.Writer
closers []io.WriteCloser
Expand Down
199 changes: 199 additions & 0 deletions docs/content/en/content-management/diagrams.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
---
title: Diagrams
date: 2022-02-20
categories: [content management]
keywords: [diagrams,drawing]
menu:
docs:
parent: "content-management"
weight: 22
weight: 22
toc: true
---


## 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 } """" .│
└────────────────────────────────────────────────┘
```



18 changes: 18 additions & 0 deletions docs/layouts/_default/_markup/render-codeblock-goat.html
View file
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>
7 changes: 4 additions & 3 deletions go.mod
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ require (
github.com/aws/aws-sdk-go v1.41.14
github.com/bep/debounce v1.2.0
github.com/bep/gitmap v1.1.2
github.com/bep/goat v0.0.0-20220222160823-cc97a132eb5e
github.com/bep/godartsass v0.12.0
github.com/bep/golibsass v1.0.0
github.com/bep/gowebp v0.1.0
Expand All @@ -19,7 +20,7 @@ require (
github.com/dustin/go-humanize v1.0.0
github.com/evanw/esbuild v0.14.22
github.com/fortytw2/leaktest v1.3.0
github.com/frankban/quicktest v1.14.0
github.com/frankban/quicktest v1.14.2
github.com/fsnotify/fsnotify v1.5.1
github.com/getkin/kin-openapi v0.85.0
github.com/ghodss/yaml v1.0.0
Expand All @@ -29,7 +30,7 @@ require (
github.com/gohugoio/locales v0.14.0
github.com/gohugoio/localescompressed v0.15.0
github.com/gohugoio/testmodBuilder/mods v0.0.0-20190520184928-c56af20f2e95
github.com/google/go-cmp v0.5.6
github.com/google/go-cmp v0.5.7
github.com/gorilla/websocket v1.4.2
github.com/jdkato/prose v1.2.1
github.com/kylelemons/godebug v1.1.0
Expand Down Expand Up @@ -57,7 +58,7 @@ require (
github.com/spf13/viper v1.10.1
github.com/tdewolff/minify/v2 v2.9.29
github.com/yuin/goldmark v1.4.7
github.com/yuin/goldmark-highlighting v0.0.0-20200307114337-60d527fdb691
github.com/yuin/goldmark-highlighting v0.0.0-20220208100518-594be1970594 // indirect
gocloud.dev v0.20.0
golang.org/x/image v0.0.0-20211028202545-6944b10bf410
golang.org/x/net v0.0.0-20211015210444-4f30a5c0130f
Expand Down
Loading

0 comments on commit 4da5711

Please sign in to comment.