composant accordeon

content/fr/blog/posts/accordeon.md

@@ -8,7 +8,25 @@ tags:
 ---
 Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
 
-## Exemple d'utilisation
+## Utilisation
+
+### Exemple d'utilisation dans un fichier Markdown `.md`
+
+```md
+????accordionsgroup
+
+??? Intitulé accordéon
+
+Contenu **markdown** _riche_
+
+???
+
+????
+```
+
+**Note :** Le conteneur `accordionsgroup` est facultatif quand il n'y a qu'un seul accordéon.
+
+### Exemple d'utilisation dans un fichier Nunjucks `.njk`
 
 ```njk
 {% raw %}
@@ -24,6 +42,8 @@ Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `
 
 ## Rendu
 
+Un accordéon créé en Nunjucks :
+
 {% from "components/component.njk" import component with context %}
 {{ component("accordionsgroup", {
     items: [{
@@ -34,4 +54,42 @@ Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `
 
 <br>
 
+Groupe d'accordéons créé en Markdown :
+
+????accordionsgroup
+
+??? Premier accordéon
+
+Contenu MD
+
+* one
+* two
+
+???
+
+??? Deuxième accordéon
+
+Contenu **markdown** _riche_
+
+```sh
+git commit
+git push
+```
+
+???
+
+????
+
+<br>
+
+Un autre accordéon seul :
+
+??? Accordéon seul, hors groupe
+
+Lorem [...] elit ut.
+
+???
+
+<br>
+
 [Voir aussi la page du composant sur le site du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}

content/fr/blog/posts/md-cheatsheet.md

@@ -12,6 +12,21 @@ La syntaxe utilisée dans les fichiers Markdown `.md` du site suit la spécifica
 
 **De nouveaux éléments** ont été ajoutés à cette syntaxe et sont disponibles dans eleventy-dsfr.
 
+## L'accordéon
+
+```md
+????accordionsgroup
+
+??? Intitulé accordéon
+
+Contenu **markdown** _riche_
+
+???
+
+????
+```
+[Voir aussi](/fr/blog/accordeon/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
+
 ## L'alerte
 
 ```md

eleventy.config.js

@@ -174,6 +174,10 @@ module.exports = function (eleventyConfig) {
         mdLib.use(markdownItContainer, 'alert', customMarkdownContainers.alert(mdLib));
     });
 
+    eleventyConfig.amendLibrary("md", mdLib => {
+        mdLib.use(markdownItContainer, 'accordion', customMarkdownContainers.accordion(mdLib));
+    });
+
     // Automatically strip all leading or trailing whitespace
     // to prevent Markdown lib from rendering with wrapping into paragraphs
     // instead of using Nunjucks special syntax. Learn more:

markdown-custom-containers.js

@@ -88,5 +88,44 @@ module.exports = {
                 }
             }
         }
+    },
+    accordion: md => {
+        const re = /^(accordionsgroup|.*)?$/;
+        return {
+            validate: (params) => {
+                return params.trim().match(re);
+            },
+
+            render: (tokens, idx) => {
+                const params = tokens[idx].info.trim().match(re);
+
+                if (tokens[idx].nesting === 1) {
+                    // opening tag
+                    if (params?.[1] === "accordionsgroup") {
+                        return `<div class="fr-accordions-group">`;
+                    } else {
+                        return `
+<section class="fr-accordion">
+    <h3 class="fr-accordion__title">
+        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-${idx}">
+            ${md.utils.escapeHtml(params?.[1]) || ""}
+        </button>
+    </h3>
+    <div class="fr-collapse" id="accordion-${idx}">
+`;
+                    }
+                } else {
+                    // closing tag
+                    if (params?.[1] === "accordionsgroup") {
+                        return `</div>`;
+                    } else {
+                        return '</div></section>\n';
+                    }
+                }
+            },
+
+            marker: "?"
+        }
     }
+
 }