From 31fda34f3c5b4ff76e10d16495324646d86d592b Mon Sep 17 00:00:00 2001 From: Sylvain Lafay Date: Tue, 23 Jan 2024 09:52:10 +0100 Subject: [PATCH] feat: plugin mermaid local (#22) --- _includes/layouts/base.njk | 9 ++++++++- content/fr/blog/posts/schema.md | 4 +++- eleventy.config.js | 12 ++++++------ eleventy.config.mermaid.js | 14 ++++++++++++++ package.json | 8 +++----- 5 files changed, 34 insertions(+), 13 deletions(-) create mode 100644 eleventy.config.mermaid.js diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index b7550d5..2e8cba6 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -26,6 +26,13 @@ + {% if mermaid %} + + + {% endif %} + {{ title or metadata.title }} @@ -69,6 +76,6 @@ -{% mermaid_js %} + diff --git a/content/fr/blog/posts/schema.md b/content/fr/blog/posts/schema.md index 7d7b510..9752d71 100644 --- 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 index 7135db0..b3fdece 100644 --- 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 new file mode 100644 index 0000000..744dd46 --- /dev/null +++ b/eleventy.config.mermaid.js @@ -0,0 +1,14 @@ +module.exports = eleventyConfig => { + const highlighter = eleventyConfig.markdownHighlighter; + eleventyConfig.addMarkdownHighlighter((str, language) => { + if (language === "mermaid") { + return `
${str}
`; + } + if (highlighter) { + return highlighter(str, language); + } + return `
${str}
`; + }); + + return {}; +} \ No newline at end of file diff --git a/package.json b/package.json index 96cf264..c604dae 100644 --- 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" } }