Customize mermaid module

exampleSite/config.toml

@@ -15,6 +15,8 @@ defaultContentLanguageInSubdir= true
   showVisitedLinks = true
   disableBreadcrumb = false
   disableNextPrev = false
+  disableMermaid = false
+  customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
   titleSeparator = "::"
 
 [outputs]

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

@@ -35,6 +35,10 @@ Note that some of these parameters are explained in details in other sections of
   disableLanguageSwitchingButton = false
   # Hide breadcrumbs in the header and only show the current page title
   disableBreadcrumb = true
+  # If set to true, prevents Hugo from including the mermaid module if not needed (will reduce load times and traffic)
+  disableMermaid = false
+  # Specifies the remote location of the mermaid js
+  customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
   # Hide Next and Previous page buttons normally displayed full height beside content
   disableNextPrev = true
   # Order sections in menu by "weight" or "title". Default to "weight"

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

@@ -31,6 +31,10 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
   disableInlineCopyToClipBoard = false
   # Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher.
   disableShortcutsTitle = false
+  # 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)
+  disableMermaid = false
+  # Spécifie l'emplacement distant du mermaid js
+  customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
   # Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue.
   disableLanguageSwitchingButton = false
   # Ordonne les sections dans menu par poids ("weight") ou titre ("title"). Défaut à "weight"

exampleSite/content/shortcodes/mermaid.en.md

@@ -27,29 +27,9 @@ graph LR;
     C -->|Two| E[Result two]
 {{</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
-graph LR;
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
 ## Sequence example
 
-    {{</*mermaid*/>}}
+    {{</* mermaid */>}}
     sequenceDiagram
         participant Alice
         participant Bob
@@ -163,7 +143,7 @@ classDiagram
 
 ### Git example
 
-    ```mermaid
+    {{</* mermaid */>}}
     gitGraph:
     options
     {
@@ -180,11 +160,11 @@ classDiagram
       commit
       commit
       merge newbranch
-    ```
+    {{</* /mermaid*/>}}
 
 renders as
 
-```mermaid
+{{<mermaid>}}
 gitGraph:
 options
 {
@@ -201,7 +181,7 @@ end
   commit
   commit
   merge newbranch
-```
+{{</mermaid>}}
 
 ### State Diagrams
 

exampleSite/content/shortcodes/mermaid.fr.md

@@ -26,26 +26,6 @@ graph LR;
     C -->|Deux| E[Résultat deux]
 {{< /mermaid >}}
 
-or you can use this alternative syntax:
-
-    ```mermaid
-    graph LR;
-        A[Bords droits] -->|Lien texte| B(Bords arondis)
-        B --> C{Décision}
-        C -->|Un| D[Résultat un]
-        C -->|Deux| E[Résultat deux]
-    ```
-
-renders as
-
-```mermaid
-graph LR;
-    A[Bords droits] -->|Lien texte| B(Bords arondis)
-    B --> C{Décision}
-    C -->|Un| D[Résultat un]
-    C -->|Deux| E[Résultat deux]
-```
-
 ## Sequence example
 
     {{</*mermaid*/>}}
@@ -78,38 +58,6 @@ sequenceDiagram
     Bob-->John: Au top!
 {{< /mermaid >}}
 
-or you can use this alternative syntax:
-
-    ```mermaid
-    sequenceDiagram
-        participant Alice
-        participant Bob
-        Alice->>John: Salut John, comment vas-tu?
-        loop Vérification
-            John->John: Se bat contre l'hyponcodrie.
-        end
-        Note right of John: Les pensées rationnelles<br/>prédominent...
-        John-->Alice: Super!
-        John->Bob: Et toi?
-        Bob-->John: Au top!
-    ```
-
-renders as
-
-```mermaid
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Salut John, comment vas-tu?
-    loop Vérification
-        John->John: Se bat contre l'hyponcodrie.
-    end
-    Note right of John: Les pensées rationnelles<br/>prédominent...
-    John-->Alice: Super!
-    John->Bob: Et toi?
-    Bob-->John: Au top!
-```
-
 ## GANTT Example
 
     {{</*mermaid*/>}}
@@ -130,7 +78,6 @@ sequenceDiagram
             Ajout à Mermaid                          :1d
     {{</* /mermaid */>}}
 
-
 renders as
 
 {{<mermaid>}}
@@ -151,50 +98,9 @@ gantt
         Ajout à Mermaid                      :1d
 {{</mermaid>}}
 
-
-or you can use this alternative syntax:
-
-    ```mermaid
-    gantt
-            dateFormat  YYYY-MM-DD
-            title Ajout de la fonctionnalité de GANTT à Mermaid
-            section Une section
-            Tâche complétée            :done,    des1, 2014-01-06,2014-01-08
-            Tâche en cours             :active,  des2, 2014-01-09, 3d
-            Future tâche               :         des3, after des2, 5d
-            Future tâche 2             :         des4, after des3, 5d
-            section Tâches critiques
-            Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
-            Implémenter le parser et jison          :crit, done, after des1, 2d
-            Créer des tests pour le parser             :crit, active, 3d
-            Future tâche dans le chemin critique        :crit, 5d
-            Créer des tests pour le renderer           :2d
-            Ajout à Mermaid                      :1d
-    ```
-
-renders as
-
-```mermaid
-gantt
-        dateFormat  YYYY-MM-DD
-        title Ajout de la fonctionnalité de GANTT à Mermaid
-        section Une section
-        Tâche complétée            :done,    des1, 2014-01-06,2014-01-08
-        Tâche en cours             :active,  des2, 2014-01-09, 3d
-        Future tâche               :         des3, after des2, 5d
-        Future tâche 2             :         des4, after des3, 5d
-        section Tâches critiques
-        Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h
-        Implémenter le parser et jison          :crit, done, after des1, 2d
-        Créer des tests pour le parser             :crit, active, 3d
-        Future tâche dans le chemin critique        :crit, 5d
-        Créer des tests pour le renderer           :2d
-        Ajout à Mermaid                      :1d
-```
-
 ### Class example
 
-    ```mermaid
+    {{/* mermaid */}}
     classDiagram
       Class01 <|-- AveryLongClass : Cool
       Class03 *-- Class04
@@ -209,11 +115,11 @@ gantt
       Class01 : int chimp
       Class01 : int gorilla
       Class08 <--> C2: Cool label
-    ```
+    {{/* /mermaid */}}
 
 renders as
 
-```mermaid
+{{< mermaid >}}
 classDiagram
   Class01 <|-- AveryLongClass : Cool
   Class03 *-- Class04
@@ -228,11 +134,11 @@ classDiagram
   Class01 : int chimp
   Class01 : int gorilla
   Class08 <--> C2: Cool label
-```
+{{< /mermaid >}}
 
 ### Git example
 
-    ```mermaid
+    {{</* mermaid */>}}
     gitGraph:
     options
     {
@@ -249,11 +155,11 @@ classDiagram
       commit
       commit
       merge newbranch
-    ```
+    {{</* /mermaid */>}}
 
 renders as
 
-```mermaid
+{{< mermaid >}}
 gitGraph:
 options
 {
@@ -270,7 +176,7 @@ end
   commit
   commit
   merge newbranch
-```
+{{< /mermaid >}}
 
 ### State Diagrams
 

layouts/partials/footer.html

@@ -1,16 +1,16 @@
         {{ if .Params.chapter }}
             </div> <!-- end chapter-->
         {{ end }}
-        </div> 
+        </div>
         {{ partial "custom-comments.html" . }}
       </div>
 
     <div id="navigation">
         <!-- Next prev page -->
         {{ $currentNode := . }}
-        
+
         {{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
-        
+
         {{ define "menu-nextprev" }}
             {{$currentNode := .currentnode }}
             {{ if ne .menu.Params.hidden true}}
@@ -52,7 +52,7 @@
     </div>
 
     </section>
-    
+
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
@@ -66,12 +66,18 @@
     <script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script src="{{"js/hugo-learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-
-    <link href="{{"mermaid/mermaid.css" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" />
-    <script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
-    <script>
-        mermaid.initialize({ startOnLoad: true });
-    </script>
+    {{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
+        {{ if isset .Params "customMermaidURL" }}
+            <script src="{{ .Params.customMermaidURL }}"></script>
+        {{ else if isset .Site.Params "customMermaidURL" }}
+            <script src="{{ .Site.Params.customMermaidURL }}"></script>
+        {{ else }}
+            <script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+        {{ end }}
+        <script>
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+    {{ end }}
     {{ partial "custom-footer.html" . }}
   </body>
 </html>