composant download et usage dans un tutoriel (refs #36)

IGNF · Apr 24, 2024 · 57e35ef · 57e35ef
1 parent f33959d
commit 57e35ef
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 1 deletion.
diff --git a/_includes/components/download.njk b/_includes/components/download.njk
@@ -0,0 +1,50 @@
+{% if not download %}{% set download = params %}{% endif %}
+{% if download.type == "card" %}
+<div class="fr-card fr-enlarge-link fr-card--download">
+    <div class="fr-card__body">
+        <div class="fr-card__content">
+            <h3 class="fr-card__title">
+                <a download href="{{ download.href }}">
+                    {{ download.title }}
+                </a>
+            </h3>
+            {% if download.description %}
+            <p class="fr-card__desc">{{ download.description }}</p>
+            {% endif %}
+            <div class="fr-card__end">
+                <p class="fr-card__detail">{{ download.detail }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% elif download.type == "tile" %}
+<div class="fr-tile fr-tile--download fr-enlarge-link" id="tile-6735">
+    <div class="fr-tile__body">
+        <div class="fr-tile__content">
+            <h4 class="fr-tile__title">
+                <a href="{{ download.href }}" download>{{ download.title }}</a>
+            </h4>
+            <p class="fr-tile__desc">{{ download.description }}</p>
+            <p class="fr-tile__detail">{{ download.detail }}</p>
+        </div>
+    </div>
+    {% if download.pictogram %}
+    <div class="fr-tile__header">
+        <div class="fr-tile__pictogram">
+            {% set pictogramUrl = "/artwork/pictograms/" + download.pictogram %}
+            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+                <use class="fr-artwork-decorative" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-decorative"></use>
+                <use class="fr-artwork-minor" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-minor"></use>
+                <use class="fr-artwork-major" href="{{ pictogramUrl | htmlBaseUrl }}#artwork-major"></use>
+            </svg>
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% else %}
+<p>
+    <a class="fr-link fr-link--download" download href="{{ download.href }}">
+        {{ download.title }} <span class="fr-link__detail">{{ download.detail }}</span>
+    </a>
+</p>
+{% endif %}
diff --git a/content/fr/blog/posts/download.md b/content/fr/blog/posts/download.md
@@ -0,0 +1,98 @@
+---
+title: Téléchargement de fichier
+description: Comment intégrer un lien de téléchargement de fichier dans une page du site ?
+date: git Last Modified
+tags:
+  - DSFR
+  - composant
+---
+Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
+
+## Exemples d'utilisation
+
+### Lien
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("download", {
+    title: "Nom du fichier",
+    href: "/data/dossier/fichier.ext",
+    detail: "Format ou extension - 850Ko"
+}) }}
+{% endraw %}
+```
+
+### Carte
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("download", {
+    type: "card",
+    title: "Nom du fichier",
+    description: "Description du fichier"
+    href: "/data/dossier/fichier.ext",
+    detail: "Format ou extension - 850Ko"
+}) }}
+{% endraw %}
+```
+
+### Tuile
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("download", {
+    type: "tile",
+    title: "Nom du fichier",
+    href: "/data/dossier/fichier.ext",
+    detail: "Format ou extension - 850Ko",
+    pictogram: "buildings/city-hall.svg"
+}) }}
+{% endraw %}
+```
+
+## Rendu
+
+### Lien
+
+{% from "components/component.njk" import component with context %}
+{{ component("download", {
+    title: "monde.gpkg",
+    href: "/data/tutoriels/alimentation-diffusion-simple/monde.gpkg",
+    detail: "Geopackage - 11,4Mo"
+}) }}
+
+### Carte
+
+{% from "components/component.njk" import component with context %}
+<div>
+{{ component("download", {
+    type: "card",
+    title: "monde.gpkg",
+    description: "Pays et régions écologiques mondiales",
+    href: "/data/tutoriels/alimentation-diffusion-simple/monde.gpkg",
+    detail: "Geopackage - 11,4Mo"
+}) }}
+</div>
+
+<br>
+
+### Tuile
+
+{% from "components/component.njk" import component with context %}
+<div>
+{{ component("download", {
+    type: "tile",
+    title: "monde.gpkg",
+    description: "Pays et régions écologiques mondiales",
+    href: "/data/tutoriels/alimentation-diffusion-simple/monde.gpkg",
+    detail: "Geopackage - 11,4Mo",
+    pictogram: "map/map.svg"
+}) }}
+</div>
+
+<br>
+
+[Voir aussi la page du composant sur le site du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/telechargement-de-fichier){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
diff --git a/content/fr/tutoriels/alimentation-diffusion-simple/index.md b/content/fr/tutoriels/alimentation-diffusion-simple/index.md
@@ -54,7 +54,20 @@ stateDiagram
 
 ## Données du tutoriel
 
-Les données de l'exemple sont deux tables, les pays et régions écologiques mondiales, au format Geopackage, téléchargeable [ici](/data/tutoriels/alimentation-diffusion-simple/monde.gpkg).
+Les données de l'exemple sont deux tables, les pays et régions écologiques mondiales, au format Geopackage, téléchargeables ici :
+
+{% from "components/component.njk" import component with context %}
+<div>
+{{ component("download", {
+    type: "tile",
+    title: "monde.gpkg",
+    description: "Pays et régions écologiques mondiales",
+    href: "/data/tutoriels/alimentation-diffusion-simple/monde.gpkg",
+    detail: "Geopackage - 11,4Mo",
+    pictogram: "map/map.svg"
+}) }}
+</div>
+<br>
 
 ![monde.gpkg](/img/tutoriels/alimentation-diffusion-simple/donnees_presentation_vecteur.png)