feat: plugin mermaid local (#22)

IGNF · Jan 23, 2024 · 31fda34 · 31fda34
1 parent 9e8a92f
commit 31fda34
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -26,6 +26,13 @@
 
   <meta name="generator" content="{{ eleventy.generator }}">
 
+  {% if mermaid %}
+    <script src="/js/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: true});
+    </script>
+  {% endif %}
+
   <title>{{ title or metadata.title }}</title>
 </head>
 <body id="top">
@@ -69,6 +76,6 @@
 <script type="text/javascript" nomodule src="/js/dsfr.nomodule.min.js"></script>
 <!-- Script Matomo pour le suivi des visites -->
 <!-- <script type="text/javascript" src="/js/matomo.js"></script> -->
-{% mermaid_js %}
+
 </body>
 </html>
diff --git a/content/fr/blog/posts/schema.md b/content/fr/blog/posts/schema.md
@@ -2,12 +2,15 @@
 title: Schéma
 description: Comment intégrer un schéma simple dans une page du site ?
 date: git Last Modified
+mermaid: true
 tags:
   - composant
 ---
 
 ## Exemple d'utilisation dans un fichier `md`
 
+NB : Le cartouche du fichier doit contenir : `mermaid: true` pour que le js de mermaid qui effectue la transformation du schéma en SVG soit inclus avec la page.
+
 ````md
 ```mermaid
 flowchart LR
@@ -20,7 +23,6 @@ C -->|Two| E[Result 2]
 
 ## Rendu
 
-
 ```mermaid
 flowchart LR
 A[Hard] -->|Text| B(Round)

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -12,8 +12,6 @@ const {EleventyI18nPlugin} = require("@11ty/eleventy");
 
 const customMarkdownContainers = require("./markdown-custom-containers");
 
-const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");
-
 module.exports = function (eleventyConfig) {
     // Copy the contents of the `public` folder to the output folder
     // For example, `./public/css/` ends up in `_site/css/`
@@ -26,7 +24,8 @@ module.exports = function (eleventyConfig) {
         "./node_modules/@gouvfr/dsfr/dist/utility/utility.min.css": "/css/utility/utility.min.css",
         "./node_modules/@gouvfr/dsfr/dist/dsfr.module.min.js": "/js/dsfr.module.min.js",
         "./node_modules/@gouvfr/dsfr/dist/dsfr.nomodule.min.js": "/js/dsfr.nomodule.min.js",
-        "./node_modules/@gouvfr/dsfr/dist/artwork": "/artwork"
+        "./node_modules/@gouvfr/dsfr/dist/artwork": "/artwork",
+        "./node_modules/mermaid/dist/mermaid.min.js": "/js/mermaid.min.js",
     });
 
     // Run Eleventy when these files change:
@@ -51,6 +50,10 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginSyntaxHighlight, {
         preAttributes: {tabindex: 0}
     });
+
+    // Mermaid plugin overrides above syntax highlighter
+    eleventyConfig.addPlugin(require("./eleventy.config.mermaid.js"));
+
     eleventyConfig.addPlugin(pluginNavigation);
     eleventyConfig.addPlugin(pluginBundle);
     eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
@@ -62,9 +65,6 @@ module.exports = function (eleventyConfig) {
         });
     });
 
-     // Mermaid plugin : https://github.com/KevinGimbel/eleventy-plugin-mermaid
-     eleventyConfig.addPlugin(pluginMermaid);
-
     // Filters
     eleventyConfig.addFilter("jsDateObject", function jsDateObject(dateStr, format, zone) {
         return DateTime.fromFormat(dateStr, format || "yyyy-LL-dd", {zone: zone || "utc"}).toJSDate();

diff --git a/eleventy.config.mermaid.js b/eleventy.config.mermaid.js
@@ -0,0 +1,14 @@
+module.exports = eleventyConfig => {
+    const highlighter = eleventyConfig.markdownHighlighter;
+    eleventyConfig.addMarkdownHighlighter((str, language) => {
+        if (language === "mermaid") {
+            return `<pre class="mermaid">${str}</pre>`;
+        }
+        if (highlighter) {
+            return highlighter(str, language);
+        }
+        return `<pre class="${language}">${str}</pre>`;
+    });
+
+    return {};
+}
diff --git a/package.json b/package.json
@@ -33,14 +33,12 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@gouvfr/dsfr": "^1.9.3",
     "chalk": "^4.1.2",
+    "ics": "^3.2.0",
     "luxon": "^3.2.1",
     "markdown-it-anchor": "^8.6.6",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-container": "^4.0.0",
-    "pagefind": "^1.0.2",
-    "ics": "^3.2.0"
-  },
-  "dependencies": {
-    "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0"
+    "mermaid": "^10.7.0",
+    "pagefind": "^1.0.2"
   }
 }