Merge branch 'main' into gh-pages

codegouvfr · Feb 7, 2024 · e240dcf · e240dcf
2 parents 995daed + 081ccda
commit e240dcf
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,8 @@
 # eleventy-dsfr
 
 Un dépôt pour démarrer un site statique au [DSFR](https://www.systeme-de-design.gouv.fr/) avec le
-générateur [Eleventy](https://www.11ty.dev/).
+générateur [Eleventy](https://www.11ty.dev/), déployé pour démonstration sur [GitHub Pages](https://codegouvfr.github.io/eleventy-dsfr/fr/).
+Pour d'autres exemples de réutilisation, cf. [Démonstration et réutilisations](#démonstration-et-réutilisations).
 
 ![Screenshot of the website front page.](eleventy-dsfr.png)
 
@@ -112,8 +113,11 @@ La suite de la documentation (composants, fonctionnalités) est disponible dans
 
 ## Démonstration et réutilisations
 
-- Pour une démonstration, voir la [GitHub Pages](https://codegouvfr.github.io/eleventy-dsfr/fr/) correspondante.
-- `eleventy-dsfr` est utilisé pour le site [code.gouv.fr](https://code.gouv.fr).
+Pour une démonstration, voir la [GitHub Pages](https://codegouvfr.github.io/eleventy-dsfr/fr/) correspondante.
+
+- [Site de la mission logiciels libres de la DINUM](https://code.gouv.fr) (code source : https://github.com/codegouvfr/codegouvfr-website).
+- [Site du cadre de cohérence technique du MI](https://dnum-mi.github.io/cct-mi/) (code source : https://github.com/dnum-mi/cct-mi)
+- [Site de documentation pour cartes.gouv.fr](https://ignf.github.io/cartes.gouv.fr-documentation/) (code source : https://github.com/IGNF/cartes.gouv.fr-documentation)
 
 ## Licence
 

diff --git a/_data/i18n/index.js b/_data/i18n/index.js
@@ -20,5 +20,5 @@ const buildTranslations = () => {
 
 module.exports = {
     availableLang: langDirectories,
-    ...buildTranslations()
+    translations: buildTranslations()
 };
diff --git a/_includes/components/alert.njk b/_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>
diff --git a/_includes/components/card.njk b/_includes/components/card.njk
@@ -1,5 +1,5 @@
 {% if not card %}{% set card = params %}{% endif %}
-<div class="fr-card{% if not card.externalUrl %} fr-enlarge-link{% endif %}{% if card.orientation == 'horizontal' %} fr-card--horizontal-tier{% endif %}">
+<div class="fr-card{% if not card.externalUrl %} fr-enlarge-link{% endif %} {{ card.addClass }}">
   <div class="fr-card__body">
     <div class="fr-card__content">
       {% set cardUrl = card.url | locale_url or card.externalUrl %}
@@ -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 %}
@@ -37,20 +42,24 @@
       {% endif %}
     </div>
   </div>
-  <div class="fr-card__header">
-    {% if card.badges %}
-      <ul class="fr-badges-group">
-        {% for badge in card.badges %}
-          <li><p class="fr-badge fr-badge--green-emeraude">{{ badge }}</p></li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {% if card.image.path %}
-      <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
-      {% elif card.image.src %}
-      <div class="fr-card__img">
-        <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.src }}" alt="{{ card.image.alt }}">
-      </div>
-    {% endif %}
-  </div>
+  {% if card.badges or card.image %}
+    <div class="fr-card__header">
+      {% if card.badges %}
+        <ul class="fr-badges-group">
+          {% for badge in card.badges %}
+            <li><p class="fr-badge fr-badge--green-emeraude">{{ badge }}</p></li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+      {% if card.image %}
+        {% if card.image.path %}
+          <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
+          {% elif card.image.src %}
+          <div class="fr-card__img">
+            <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.src }}" alt="{{ card.image.alt }}">
+          </div>
+        {% endif %}
+      {% endif %}
+    </div>
+  {% endif %}
 </div>
diff --git a/_includes/previousnextlinks.njk b/_includes/previousnextlinks.njk
@@ -1,3 +1,4 @@
+{% from "components/component.njk" import component with context %}
 {% set previousPost = currentPosts | filterCollectionLang | getPreviousCollectionItem %}
 {% set nextPost = currentPosts | filterCollectionLang | getNextCollectionItem %}
 {% if nextPost or previousPost %}
@@ -6,34 +7,22 @@
     <div class="fr-grid-row fr-grid-row--gutters fr-mb-6w">
       {% if previousPost %}
         <div class="fr-col-12 fr-col-md-6">
-          <div class="fr-card fr-enlarge-link fr-card--grey fr-card--no-border">
-            <div class="fr-card__body">
-              <p class="fr-card__detail fr-icon-time-fill">
-                <time datetime="{{ previousPost.date | htmlDateString }}">
-                  {{ previousPost.date | readableDate }}
-                </time>
-              </p>
-              <h4 class="fr-card__title">
-                <a href="{{ previousPost.url }}" class="fr-card__link">{{ previousPost.data.title }}</a>
-              </h4>
-            </div>
-          </div>
+          {{ component("card", {
+            url: previousPost.url,
+            title: previousPost.data.title,
+            date: previousPost.date,
+            addClass: "fr-card--horizontal-tier fr-card--grey fr-card--no-border fr-card--sm"
+          }) }}
         </div>
       {% endif %}
       {% if nextPost %}
         <div class="fr-col-12 fr-col-md-6">
-          <div class="fr-card fr-enlarge-link fr-card--grey fr-card--no-border">
-            <div class="fr-card__body">
-              <p class="fr-card__detail fr-icon-time-fill">
-                <time datetime="{{ nextPost.date | htmlDateString }}">
-                  {{ nextPost.date | readableDate }}
-                </time>
-              </p>
-              <h4 class="fr-card__title">
-                <a href="{{ nextPost.url }}" class="fr-card__link">{{ nextPost.data.title }}</a>
-              </h4>
-            </div>
-          </div>
+          {{ component("card", {
+            url: nextPost.url,
+            title: nextPost.data.title,
+            date: nextPost.date,
+            addClass: "fr-card--horizontal-tier fr-card--grey fr-card--no-border fr-card--sm"
+          }) }}
         </div>
       {% endif %}
     </div>

diff --git a/content/fr/blog/posts/alerte.md 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: "<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}
diff --git a/content/fr/blog/posts/carte.md b/content/fr/blog/posts/carte.md
@@ -24,7 +24,7 @@ Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `
         src: "/img/placeholder.16x9.png",
         alt: ""
     },
-    orientation: "horizontal"
+    addClass: "fr-card--horizontal-tier"
 }) }}
 {% endraw %}
 ```
@@ -39,13 +39,14 @@ Le format complet de l'objet en paramètre est le suivant :
   "title": "string",
   "description": "string",
   "tags": "string[]",
-  "date": "Date",
+  "date | detail": "Date | string",
+  "detailEnd": "string",
   "badges": "string[]",
   "image": {
     "src | path": "string",
     "alt": "string"
   },
-  "orientation": "horizontal | vertical"
+  "addClass": "string"
 }
 ```
 
@@ -55,6 +56,8 @@ Si `card.externalUrl` est utilisé, `card.url` doit être `false`. `card.urlDesc
 
 `image.src` est le chemin de l'image dans le site. `image.path` peut être utilisé à la place de `image.src` en spécifiant le chemin relatif du fichier depuis l'emplacement de la page dans le dépôt (ex. `path : "../../../../public/img/placeholder.16x9.png"`). Cela permet de bénéficier du [plugin Image d'Eleventy](https://www.11ty.dev/docs/plugins/image/).
 
+`date` et `detail` ne peuvent pas être renseignés simultanément car les deux utilisent la même zone de détail (haute).
+
 ## Rendu
 
 {% from "components/component.njk" import component with context %}
@@ -70,7 +73,7 @@ Si `card.externalUrl` est utilisé, `card.url` doit être `false`. `card.urlDesc
         src : "/img/placeholder.16x9.png",
         alt: ""
     },
-    orientation: "horizontal"
+    addClass: "fr-card--horizontal-tier"
 }) }}
 </div>
 

diff --git a/content/fr/blog/posts/md-cheatsheet.md b/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
 

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -14,7 +14,7 @@ const pluginCalendar = require("@codegouvfr/eleventy-plugin-calendar");
 
 const customMarkdownContainers = require("./markdown-custom-containers");
 
-const translations = require("./_data/i18n");
+const {translations} = require("./_data/i18n");
 
 module.exports = function (eleventyConfig) {
     // Copy the contents of the `public` folder to the output folder
@@ -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:

diff --git 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 = `<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';
+                }
+            }
+        }
     }
 }