Merge pull request #14 from slafayIGN/alert-component

Composant alerte

Author: hjonin

_includes/components/alert.njk

@@ -0,0 +1,7 @@
+{% if not alert %}{% set alert = params %}{% endif %}
+<div class="fr-alert {% if alert.type %}fr-alert--{{ alert.type }}{% else %}fr-alert--info{% endif %} {% if not alert.title %}fr-alert--sm{% endif %}">
+    {% if alert.title %}
+        <h3 class="fr-alert__title">{{ alert.title | safe }}</h3>
+    {% endif %}
+    {% if alert.description %}{{ alert.description | safe }}{% endif %}
+</div>

content/fr/blog/posts/alerte.md

@@ -0,0 +1,68 @@
+---
+title: Alerte
+description: Comment intégrer une alerte dans une page du site ?
+date: git Last Modified
+tags:
+  - DSFR
+  - composant
+---
+
+Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
+
+## Utilisation
+
+### Exemple d'utilisation dans un fichier Markdown `.md`
+
+```md
+:::info Test d'alerte
+Contenu **Mardown**
+:::
+```
+
+### Exemple d'utilisation dans un fichier Nunjucks `.njk`
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "info",
+    title: "Test d'alerte",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
+{% endraw %}
+```
+
+**Notes :**
+
+Le composant alerte n'inclut pas de bouton de fermeture.
+
+Le bloc ne porte pas l'attribut `role="alert"` car il n’apparait pas dynamiquement en cours de navigation.
+
+Les types possibles sont `info`, `warning`, `error`, `success`. En `njk` si le type est omis, le type `info` sera appliqué.
+
+## Rendu
+
+:::info Titre de l'information
+Contenu de l'alerte
+:::
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "warning",
+    title: "Titre de l'avertissement",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
+
+:::success
+Contenu de l'alerte seule
+:::
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "error",
+    title: "Titre d'une erreur simple"
+}) }}
+
+<br>
+
+[Voir aussi la page du composant sur le site du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}

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

@@ -10,7 +10,17 @@ La syntaxe utilisée dans les fichiers Markdown `.md` du site suit la spécifica
 
 [Voir un rappel des principaux éléments](https://commonmark.org/help/){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
 
-**Deux nouveaux éléments** ont été ajoutés à cette syntaxe et sont disponibles dans eleventy-dsfr.
+**De nouveaux éléments** ont été ajoutés à cette syntaxe et sont disponibles dans eleventy-dsfr.
+
+## L'alerte
+
+```md
+:::info Test d'alerte
+Contenu **Mardown**
+:::
+```
+
+[Voir aussi](/fr/blog/alerte/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
 
 ## La citation
 

eleventy.config.js

@@ -165,6 +165,10 @@ module.exports = function (eleventyConfig) {
         mdLib.use(markdownItContainer, 'quote', customMarkdownContainers.quote(mdLib));
     });
 
+    eleventyConfig.amendLibrary("md", mdLib => {
+        mdLib.use(markdownItContainer, 'alert', customMarkdownContainers.alert(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

@@ -57,5 +57,36 @@ module.exports = {
                 }
             }
         }
+    },
+    alert: md => {
+        const re = /^(info|warning|error|success)(\s+.*)?$/;
+        return {
+            validate: (params) => {
+                return params.trim().match(re);
+            },
+
+            render: (tokens, idx) => {
+                const params = tokens[idx].info.trim().match(re);
+                const type = params?.[1];
+                const title = md.utils.escapeHtml(params?.[2]) || '';
+
+                if (tokens[idx].nesting === 1) {
+                    title_elem = '';
+                    small_class = 'fr-alert--sm';
+                    if (title !== '') {
+                        title_elem = `<h3 class="fr-alert__title">${title}</h3>`;
+                        small_class = "";
+                    }
+                    // opening tag
+                    return `
+<div class="fr-alert fr-alert--${type} ${small_class}">
+    ${title_elem}
+`;
+                } else {
+                    // closing tag
+                    return '</div>\n';
+                }
+            }
+        }
     }
 }