diff --git a/_includes/components/alert.njk b/_includes/components/alert.njk
new file mode 100644
index 00000000..fd1b3dab
--- /dev/null
+++ b/_includes/components/alert.njk
@@ -0,0 +1,7 @@
+{% if not alert %}{% set alert = params %}{% endif %}
+
+ {% if alert.title %}
+
{{ alert.title | safe }}
+ {% endif %}
+ {% if alert.description %}{{ alert.description | safe }}{% endif %}
+
\ No newline at end of file
diff --git a/content/fr/blog/posts/alerte.md b/content/fr/blog/posts/alerte.md
new file mode 100644
index 00000000..fcfc9968
--- /dev/null
+++ b/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: "Le contenu de l'alerte
"
+}) }}
+{% 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: "Le contenu de l'alerte
"
+}) }}
+
+:::success
+Contenu de l'alerte seule
+:::
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+ type: "error",
+ title: "Titre d'une erreur simple"
+}) }}
+
+
+
+[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}
diff --git a/eleventy.config.js b/eleventy.config.js
index bcf78f61..f55ef3a6 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -183,6 +183,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:
diff --git a/markdown-custom-containers.js b/markdown-custom-containers.js
index 87cf7642..7d3fcc18 100644
--- a/markdown-custom-containers.js
+++ b/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 = `${title}
`;
+ small_class = "";
+ }
+ // opening tag
+ return `
+
+ ${title_elem}
+`;
+ } else {
+ // closing tag
+ return '
\n';
+ }
+ }
+ }
}
}
\ No newline at end of file