Skip to content

Commit 023fe7e

Browse files
mirisbowringArthur Ferdinand LindnerArthur Ferdinand Lindner
authored
Customize mermaid module (#362)
* enabled mermaid by default * implemented logic to use internal oder cdn mermaid * added english documentation * added french translation for the mermaid options * Removed useless test print * Hugo does not use upper case letters in params * fixed false sample link * improved mermaid pages * fixed always load mermaid if no frontmatter specified * fixed mermaid samples * removed obsolete css files * changed default version of mermaid cdn * renamed mermaidURL to customMermaidURL and removed css link * improved mermaid configuration description Co-authored-by: Arthur Ferdinand Lindner <Arthur-Ferdinand.Lindner@Telekom.de> Co-authored-by: Arthur Ferdinand Lindner <arthur.lindner@outlook.de>
1 parent 00f1ca6 commit 023fe7e

File tree

9 files changed

+61
-1048
lines changed

9 files changed

+61
-1048
lines changed

‎exampleSite/config.toml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ defaultContentLanguageInSubdir= true
1515
showVisitedLinks = true
1616
disableBreadcrumb = false
1717
disableNextPrev = false
18+
disableMermaid = false
19+
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
1820
titleSeparator = "::"
1921

2022
[outputs]

‎exampleSite/content/basics/configuration/_index.en.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ Note that some of these parameters are explained in details in other sections of
3535
disableLanguageSwitchingButton = false
3636
# Hide breadcrumbs in the header and only show the current page title
3737
disableBreadcrumb = true
38+
# If set to true, prevents Hugo from including the mermaid module if not needed (will reduce load times and traffic)
39+
disableMermaid = false
40+
# Specifies the remote location of the mermaid js
41+
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
3842
# Hide Next and Previous page buttons normally displayed full height beside content
3943
disableNextPrev = true
4044
# Order sections in menu by "weight" or "title". Default to "weight"
@@ -60,3 +64,14 @@ Learn theme uses the last improvement available in hugo version 20+ to generate
6064

6165
> Hugo generate lunrjs index.json at the root of public folder.
6266
> When you build the site with `hugo server`, hugo generates it internally and of course it doesn’t show up in the filesystem
67+
68+
## Mermaid
69+
70+
The mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one.
71+
72+
> Example:
73+
>
74+
> Mermaid is globally disabled. By default it won't be loaded by any page.
75+
> On page "Architecture" you need a class diagram. You can set the mermaid parameters locally to only load mermaid on this page (not on the others).
76+
77+
You also can disable mermaid for specific pages while globally enabled.

‎exampleSite/content/basics/configuration/_index.fr.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
3131
disableInlineCopyToClipBoard = false
3232
# Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
3333
disableShortcutsTitle = false
34+
# Si défini à true, empêche Hugo d'inclure le module "mermaid" s'il n'est pas nécessaire (réduira les temps de chargement et le trafic)
35+
disableMermaid = false
36+
# Spécifie l'emplacement distant du mermaid js
37+
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
3438
# Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue.
3539
disableLanguageSwitchingButton = false
3640
# Ordonne les sections dans menu par poids ("weight") ou titre ("title"). Défaut à "weight"
@@ -54,3 +58,14 @@ Le thème *Learn* utilise les dernières améliorations d'Hugo pour générer un
5458

5559
> Hugo génère lunrjs index.json à la racine du dossier `public`.
5660
> Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque.
61+
62+
## Mermaid
63+
64+
Les paramètres de configuration du mermaid peuvent également être définis sur une page spécifique. Dans ce cas, le paramètre global sera écrasé par le paramètre local.
65+
66+
> Exemple:
67+
>
68+
> Mermaid est globalement handicapé. Par défaut, elle ne sera chargée par aucune page.
69+
> À la page "Architecture", vous avez besoin d'un diagramme de classe. Vous pouvez régler les paramètres de mermaid localement pour ne charger que la sirène sur cette page (pas sur les autres).
70+
71+
Vous pouvez également désactiver mermaid pour des pages spécifiques tout en l'activant globalement.

‎exampleSite/content/shortcodes/mermaid.en.md‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -27,29 +27,9 @@ graph LR;
2727
C -->|Two| E[Result two]
2828
{{</mermaid>}}
2929

30-
or you can use this alternative syntax:
31-
32-
```mermaid
33-
graph LR;
34-
A[Hard edge] -->|Link text| B(Round edge)
35-
B --> C{Decision}
36-
C -->|One| D[Result one]
37-
C -->|Two| E[Result two]
38-
```
39-
40-
renders as
41-
42-
```mermaid
43-
graph LR;
44-
A[Hard edge] -->|Link text| B(Round edge)
45-
B --> C{Decision}
46-
C -->|One| D[Result one]
47-
C -->|Two| E[Result two]
48-
```
49-
5030
## Sequence example
5131

52-
{{</*mermaid*/>}}
32+
{{</* mermaid */>}}
5333
sequenceDiagram
5434
participant Alice
5535
participant Bob
@@ -163,7 +143,7 @@ classDiagram
163143

164144
### Git example
165145

166-
```mermaid
146+
{{</* mermaid */>}}
167147
gitGraph:
168148
options
169149
{
@@ -180,11 +160,11 @@ classDiagram
180160
commit
181161
commit
182162
merge newbranch
183-
```
163+
{{</* /mermaid*/>}}
184164

185165
renders as
186166

187-
```mermaid
167+
{{<mermaid>}}
188168
gitGraph:
189169
options
190170
{
@@ -201,7 +181,7 @@ end
201181
commit
202182
commit
203183
merge newbranch
204-
```
184+
{{</mermaid>}}
205185

206186
### State Diagrams
207187

‎exampleSite/content/shortcodes/mermaid.fr.md‎

Lines changed: 8 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -26,26 +26,6 @@ graph LR;
2626
C -->|Deux| E[Résultat deux]
2727
{{< /mermaid >}}
2828

29-
or you can use this alternative syntax:
30-
31-
```mermaid
32-
graph LR;
33-
A[Bords droits] -->|Lien texte| B(Bords arondis)
34-
B --> C{Décision}
35-
C -->|Un| D[Résultat un]
36-
C -->|Deux| E[Résultat deux]
37-
```
38-
39-
renders as
40-
41-
```mermaid
42-
graph LR;
43-
A[Bords droits] -->|Lien texte| B(Bords arondis)
44-
B --> C{Décision}
45-
C -->|Un| D[Résultat un]
46-
C -->|Deux| E[Résultat deux]
47-
```
48-
4929
## Sequence example
5030

5131
{{</*mermaid*/>}}
@@ -78,38 +58,6 @@ sequenceDiagram
7858
Bob-->John: Au top!
7959
{{< /mermaid >}}
8060

81-
or you can use this alternative syntax:
82-
83-
```mermaid
84-
sequenceDiagram
85-
participant Alice
86-
participant Bob
87-
Alice->>John: Salut John, comment vas-tu?
88-
loop Vérification
89-
John->John: Se bat contre l'hyponcodrie.
90-
end
91-
Note right of John: Les pensées rationnelles<br/>prédominent...
92-
John-->Alice: Super!
93-
John->Bob: Et toi?
94-
Bob-->John: Au top!
95-
```
96-
97-
renders as
98-
99-
```mermaid
100-
sequenceDiagram
101-
participant Alice
102-
participant Bob
103-
Alice->>John: Salut John, comment vas-tu?
104-
loop Vérification
105-
John->John: Se bat contre l'hyponcodrie.
106-
end
107-
Note right of John: Les pensées rationnelles<br/>prédominent...
108-
John-->Alice: Super!
109-
John->Bob: Et toi?
110-
Bob-->John: Au top!
111-
```
112-
11361
## GANTT Example
11462

11563
{{</*mermaid*/>}}
@@ -130,7 +78,6 @@ sequenceDiagram
13078
Ajout à Mermaid :1d
13179
{{</* /mermaid */>}}
13280

133-
13481
renders as
13582

13683
{{<mermaid>}}
@@ -151,50 +98,9 @@ gantt
15198
Ajout à Mermaid :1d
15299
{{</mermaid>}}
153100

154-
155-
or you can use this alternative syntax:
156-
157-
```mermaid
158-
gantt
159-
dateFormat YYYY-MM-DD
160-
title Ajout de la fonctionnalité de GANTT à Mermaid
161-
section Une section
162-
Tâche complétée :done, des1, 2014-01-06,2014-01-08
163-
Tâche en cours :active, des2, 2014-01-09, 3d
164-
Future tâche : des3, after des2, 5d
165-
Future tâche 2 : des4, after des3, 5d
166-
section Tâches critiques
167-
Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
168-
Implémenter le parser et jison :crit, done, after des1, 2d
169-
Créer des tests pour le parser :crit, active, 3d
170-
Future tâche dans le chemin critique :crit, 5d
171-
Créer des tests pour le renderer :2d
172-
Ajout à Mermaid :1d
173-
```
174-
175-
renders as
176-
177-
```mermaid
178-
gantt
179-
dateFormat YYYY-MM-DD
180-
title Ajout de la fonctionnalité de GANTT à Mermaid
181-
section Une section
182-
Tâche complétée :done, des1, 2014-01-06,2014-01-08
183-
Tâche en cours :active, des2, 2014-01-09, 3d
184-
Future tâche : des3, after des2, 5d
185-
Future tâche 2 : des4, after des3, 5d
186-
section Tâches critiques
187-
Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
188-
Implémenter le parser et jison :crit, done, after des1, 2d
189-
Créer des tests pour le parser :crit, active, 3d
190-
Future tâche dans le chemin critique :crit, 5d
191-
Créer des tests pour le renderer :2d
192-
Ajout à Mermaid :1d
193-
```
194-
195101
### Class example
196102

197-
```mermaid
103+
{{/* mermaid */}}
198104
classDiagram
199105
Class01 <|-- AveryLongClass : Cool
200106
Class03 *-- Class04
@@ -209,11 +115,11 @@ gantt
209115
Class01 : int chimp
210116
Class01 : int gorilla
211117
Class08 <--> C2: Cool label
212-
```
118+
{{/* /mermaid */}}
213119

214120
renders as
215121

216-
```mermaid
122+
{{< mermaid >}}
217123
classDiagram
218124
Class01 <|-- AveryLongClass : Cool
219125
Class03 *-- Class04
@@ -228,11 +134,11 @@ classDiagram
228134
Class01 : int chimp
229135
Class01 : int gorilla
230136
Class08 <--> C2: Cool label
231-
```
137+
{{< /mermaid >}}
232138

233139
### Git example
234140

235-
```mermaid
141+
{{</* mermaid */>}}
236142
gitGraph:
237143
options
238144
{
@@ -249,11 +155,11 @@ classDiagram
249155
commit
250156
commit
251157
merge newbranch
252-
```
158+
{{</* /mermaid */>}}
253159

254160
renders as
255161

256-
```mermaid
162+
{{< mermaid >}}
257163
gitGraph:
258164
options
259165
{
@@ -270,7 +176,7 @@ end
270176
commit
271177
commit
272178
merge newbranch
273-
```
179+
{{< /mermaid >}}
274180

275181
### State Diagrams
276182

‎layouts/partials/footer.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{{ if .Params.chapter }}
22
</div> <!-- end chapter-->
33
{{ end }}
4-
</div>
4+
</div>
55
{{ partial "custom-comments.html" . }}
66
</div>
77

88
<div id="navigation">
99
<!-- Next prev page -->
1010
{{ $currentNode := . }}
11-
11+
1212
{{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
13-
13+
1414
{{ define "menu-nextprev" }}
1515
{{$currentNode := .currentnode }}
1616
{{ if ne .menu.Params.hidden true}}
@@ -52,7 +52,7 @@
5252
</div>
5353

5454
</section>
55-
55+
5656
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
5757
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
5858
</div>
@@ -66,12 +66,18 @@
6666
<script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
6767
<script src="{{"js/learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
6868
<script src="{{"js/hugo-learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
69-
70-
<link href="{{"mermaid/mermaid.css" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" />
71-
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
72-
<script>
73-
mermaid.initialize({ startOnLoad: true });
74-
</script>
69+
{{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
70+
{{ if isset .Params "customMermaidURL" }}
71+
<script src="{{ .Params.customMermaidURL }}"></script>
72+
{{ else if isset .Site.Params "customMermaidURL" }}
73+
<script src="{{ .Site.Params.customMermaidURL }}"></script>
74+
{{ else }}
75+
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
76+
{{ end }}
77+
<script>
78+
mermaid.initialize({ startOnLoad: true });
79+
</script>
80+
{{ end }}
7581
{{ partial "custom-footer.html" . }}
7682
</body>
7783
</html>

0 commit comments

Comments
 (0)