Merge branch 'main' into production

_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>

_includes/components/card.njk

@@ -27,6 +27,11 @@
           <p class="fr-card__detail">{{ card.detail }}</p>
         {% endif %}
       </div>
+      {% if card.detailEnd %}
+      <div class="fr-card__end">
+        <p class="fr-card__detail">{{ card.detailEnd }}</p>
+      </div>
+      {% endif %}
     </div>
     <div class="fr-card__footer">
       {% if card.externalUrl %}

content/fr/awesome/index.njk

@@ -15,6 +15,9 @@ eleventyNavigation:
 <div class="fr-my-6w">
   <div class="fr-grid-row fr-grid-row--gutters">
     {% asyncAll project in awesome %}
+    {% set projectBadgeLink %}
+      <a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="{{ project.awesomeShield }}" alt="Badge Awesome CodeGouvFr du projet {{ project.name }}"></a>
+    {% endset %}
     <div class="fr-col-12 fr-col-md-3">
       {{ component("card", {
         url: false,
@@ -23,9 +26,10 @@ eleventyNavigation:
         description: project.description.fr.shortDescription,
         image: {
           src: project.logo,
-          alt: "Logo du projet"
+          alt: "Logo du projet " + project.name
         },
-        detail: ('<a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet"></a>') | safe
+        detail: projectBadgeLink | safe,
+        detailEnd: project.fundedBy | pluck("name") | join(", ")
       }) }}
     </div>
     {% endall %}

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}

eleventy.config.js

@@ -147,6 +147,10 @@ module.exports = function (eleventyConfig) {
         return collection.find(post => post.fileSlug === slug);
     });
 
+    eleventyConfig.addFilter("pluck", (arr, key) => {
+        return arr.map(item => item[key]);
+    });
+
     // Customize Markdown library settings:
     eleventyConfig.amendLibrary("md", mdLib => {
         mdLib.use(markdownItAnchor, {
@@ -179,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:

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';
+                }
+            }
+        }
     }
 }