From ef47b4c72a135eb7babbb699cdac53ec300b0489 Mon Sep 17 00:00:00 2001 From: Sylvain Lafay Date: Fri, 26 Jan 2024 15:20:01 +0100 Subject: [PATCH 1/7] composant alerte --- _includes/components/alert.njk | 7 ++++ content/fr/blog/posts/alert.md | 59 ++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 _includes/components/alert.njk create mode 100644 content/fr/blog/posts/alert.md 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/alert.md b/content/fr/blog/posts/alert.md new file mode 100644 index 00000000..23ef96e9 --- /dev/null +++ b/content/fr/blog/posts/alert.md @@ -0,0 +1,59 @@ +--- +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`. + +## Exemple d'utilisation + +```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`. Si le type est omis, le type `info` sera appliqué. + +## Rendu + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "info", + title: "Titre de l'information", + description: "

Le 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

" +}) }} + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "success", + description: "

Contenu de l'alerte seul

" +}) }} + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "error", + title: "Titre d'une erreur simple" +}) }} From 9574b5f5e166f0a3317392f7afd236e7dccf72ba Mon Sep 17 00:00:00 2001 From: Helene MJ <20780121+hjonin@users.noreply.github.com> Date: Mon, 5 Feb 2024 13:07:35 +0100 Subject: [PATCH 2/7] Update README.md Signed-off-by: Helene MJ <20780121+hjonin@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0a1d7fce..15c1fffb 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ 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). +- `eleventy-dsfr` est utilisé pour le site [code.gouv.fr](https://code.gouv.fr) (code source : https://github.com/codegouvfr/codegouvfr-website). ## Licence From 8c1f51b086b95d75382db8f154525c98752aa549 Mon Sep 17 00:00:00 2001 From: Helene MJ <20780121+hjonin@users.noreply.github.com> Date: Tue, 6 Feb 2024 10:11:46 +0100 Subject: [PATCH 3/7] Update README to add reuse Signed-off-by: Helene MJ <20780121+hjonin@users.noreply.github.com> --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 15c1fffb..b842be18 100644 --- 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) (code source : https://github.com/codegouvfr/codegouvfr-website). +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 From c144746bfa35dc7f463e1436185325499f46d4a0 Mon Sep 17 00:00:00 2001 From: Sylvain Lafay Date: Tue, 6 Feb 2024 17:15:26 +0100 Subject: [PATCH 4/7] container markdown pour composant alerte --- content/fr/blog/posts/alert.md | 25 +++++++++++++------------ eleventy.config.js | 4 ++++ markdown-custom-containers.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 12 deletions(-) diff --git a/content/fr/blog/posts/alert.md b/content/fr/blog/posts/alert.md index 23ef96e9..d6215930 100644 --- a/content/fr/blog/posts/alert.md +++ b/content/fr/blog/posts/alert.md @@ -22,22 +22,25 @@ Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md` {% endraw %} ``` +```md +:::info Test d'alerte +Contenu **Mardown** +::: +``` + **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`. Si le type est omis, le type `info` sera appliqué. +Les types possibles sont `info`, `warning`, `error`, `success`. En `njk` si le type est omis, le type `info` sera appliqué. ## Rendu -{% from "components/component.njk" import component with context %} -{{ component("alert", { - type: "info", - title: "Titre de l'information", - description: "

Le contenu de l'alerte

" -}) }} +:::info Titre de l'information +Contenu de l'alerte +::: {% from "components/component.njk" import component with context %} {{ component("alert", { @@ -46,11 +49,9 @@ Les types possibles sont `info`, `warning`, `error`, `success`. Si le type est o description: "

Le contenu de l'alerte

" }) }} -{% from "components/component.njk" import component with context %} -{{ component("alert", { - type: "success", - description: "

Contenu de l'alerte seul

" -}) }} +:::success +Contenu de l'alerte seule +::: {% from "components/component.njk" import component with context %} {{ component("alert", { diff --git a/eleventy.config.js b/eleventy.config.js index ea48342b..31b2b1c9 100644 --- a/eleventy.config.js +++ b/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: 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 From 993821cb8a2f8a89be2ea4946ff3883e2ece0752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Jonin?= Date: Wed, 7 Feb 2024 15:41:57 +0100 Subject: [PATCH 5/7] Update alert component doc --- content/fr/blog/posts/alert.md | 22 +++++++++++++++------- content/fr/blog/posts/md-cheatsheet.md | 12 +++++++++++- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/content/fr/blog/posts/alert.md b/content/fr/blog/posts/alert.md index d6215930..fcfc9968 100644 --- a/content/fr/blog/posts/alert.md +++ b/content/fr/blog/posts/alert.md @@ -9,7 +9,17 @@ tags: Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`. -## Exemple d'utilisation +## 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 %} @@ -22,12 +32,6 @@ Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md` {% endraw %} ``` -```md -:::info Test d'alerte -Contenu **Mardown** -::: -``` - **Notes :** Le composant alerte n'inclut pas de bouton de fermeture. @@ -58,3 +62,7 @@ Contenu de l'alerte seule 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/content/fr/blog/posts/md-cheatsheet.md b/content/fr/blog/posts/md-cheatsheet.md index fc57ec1b..78f4d61d 100644 --- 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/alert/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right} ## La citation From aa19151ac9d183852d87b27a8ed7dc67ce831e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Jonin?= Date: Wed, 7 Feb 2024 15:43:04 +0100 Subject: [PATCH 6/7] Rename alert component to fr name --- content/fr/blog/posts/{alert.md => alerte.md} | 0 content/fr/blog/posts/md-cheatsheet.md | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename content/fr/blog/posts/{alert.md => alerte.md} (100%) diff --git a/content/fr/blog/posts/alert.md b/content/fr/blog/posts/alerte.md similarity index 100% rename from content/fr/blog/posts/alert.md rename to content/fr/blog/posts/alerte.md diff --git a/content/fr/blog/posts/md-cheatsheet.md b/content/fr/blog/posts/md-cheatsheet.md index 78f4d61d..28c2427c 100644 --- a/content/fr/blog/posts/md-cheatsheet.md +++ b/content/fr/blog/posts/md-cheatsheet.md @@ -20,7 +20,7 @@ Contenu **Mardown** ::: ``` -[Voir aussi](/fr/blog/alert/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right} +[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 From 081ccda587c6eba53557007379b3d37a1f4ae78b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Jonin?= Date: Wed, 7 Feb 2024 16:04:15 +0100 Subject: [PATCH 7/7] Update card component Add end detail zone --- _includes/components/card.njk | 5 +++++ content/fr/blog/posts/carte.md | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/_includes/components/card.njk b/_includes/components/card.njk index 1bbf5265..0d9b4b7f 100644 --- a/_includes/components/card.njk +++ b/_includes/components/card.njk @@ -27,6 +27,11 @@

{{ card.detail }}

{% endif %} + {% if card.detailEnd %} +
+

{{ card.detailEnd }}

+
+ {% endif %}
{% if card.externalUrl %} diff --git a/content/fr/blog/posts/carte.md b/content/fr/blog/posts/carte.md index 17d0109d..2a5f9789 100644 --- a/content/fr/blog/posts/carte.md +++ b/content/fr/blog/posts/carte.md @@ -39,7 +39,8 @@ 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", @@ -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 %}