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