Amélioration de la documentation (#115)

* Update static export procedure * Update documentation
numerique-gouv · Mar 7, 2024 · ed08d63 · ed08d63
1 parent bf7af79
commit ed08d63
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 29 deletions.
diff --git a/Makefile b/Makefile
@@ -43,5 +43,6 @@ static_server:
 
 export_static:
 	poetry run python manage.py migrate
+	poetry run python manage.py import_sample_data
 	poetry run python manage.py distill-local docs --force --collectstatic
 	poetry run python manage.py export_json
diff --git a/example_app/dsfr_components.py b/example_app/dsfr_components.py
@@ -11,6 +11,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/accordion/",
     },
     "alert": {
         "title": "Alertes (alerts)",
@@ -38,6 +39,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/alert/",
     },
     "badge": {
         "title": "Badge",
@@ -60,10 +62,12 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/badge/",
     },
     "breadcrumb": {
         "title": "Fil d’Ariane (breadcrumb)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/fil-d-ariane",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/breadcrumb/",
     },
     "button": {
         "title": "Boutons (buttons)",
@@ -81,6 +85,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/button/",
     },
     "callout": {
         "title": "Mise en avant (callout)",
@@ -107,6 +112,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/callout/",
     },
     "card": {
         "title": "Carte (card)",
@@ -273,10 +279,12 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/card/",
     },
     "favicon": {
         "title": "Icône de favoris (favicon)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/icones-de-favoris",
+        "example_url": "https://main--ds-gouv.netlify.app/example/core/favicon/",
     },
     "highlight": {
         "title": "Mise en exergue (highlight)",
@@ -287,6 +295,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-exergue",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/highlight/",
     },
     "input": {
         "title": "Champs de saisie (input)",
@@ -308,6 +317,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/input/",
     },
     "link": {
         "title": "Lien (link)",
@@ -320,10 +330,12 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liens",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/link/",
     },
     "pagination": {
         "title": "Pagination (pagination)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pagination",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/pagination/",
     },
     "quote": {
         "title": "Citation (quote)",
@@ -344,6 +356,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/citation",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/quote/",
     },
     "select": {
         "title": "Listes déroulantes (selects)",
@@ -364,6 +377,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liste-deroulante",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/select/",
     },
     "sidemenu": {
         "title": "Menu latéral (sidemenu)",
@@ -409,6 +423,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/menu-lateral",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/sidemenu/",
     },
     "skiplinks": {
         "title": "Liens d’évitement (skiplinks)",
@@ -419,6 +434,7 @@
             ]
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liens-d-evitement",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/skiplink/",
     },
     "stepper": {
         "title": "Indicateur d’étapes (stepper)",
@@ -436,6 +452,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/indicateur-d-etapes",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/stepper/",
     },
     "summary": {
         "title": "Sommaire (summary)",
@@ -446,6 +463,7 @@
             ]
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/sommaire",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/summary/",
     },
     "table": {
         "title": "Tableau (table)",
@@ -457,6 +475,7 @@
             }
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tableau",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/table/",
     },
     "tag": {
         "title": "Tag (tag)",
@@ -488,10 +507,12 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tag",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/tag/",
     },
     "theme_modale": {
         "title": "Paramètres d’affichage (display)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/display/",
     },
     "tile": {
         "title": "Tuile (tile)",
@@ -547,6 +568,7 @@
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/tile/",
     },
 }
 
@@ -617,90 +639,112 @@
     "file_upload": {
         "title": "Ajout de fichier (file upload)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/ajout-de-fichier",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/upload/",
     },
     "notice": {
         "title": "Bandeau d’information importante (notice)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/notice/",
     },
     "search_bar": {
         "title": "Barre de recherche (search bar)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/barre-de-recherche",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/search/",
     },
     "franceconnect": {
         "title": "Bouton FranceConnect",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-franceconnect",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/connect/",
     },
     "radio": {
         "title": "Bouton radio (radio)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
     },
     "radio_rich": {
         "title": "Bouton radio riche (radio_rich)",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio-riches",
+        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio-riche",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
     },
     "checkbox": {
         "title": "Case à cocher (checkbox)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/case-a-cocher",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/checkbox/",
     },
-    "responsive_medias": {
+    "content": {
         "title": "Contenu média (responsive_medias)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/content/",
     },
     "segmented_control": {
         "title": "Contrôle segmenté (segmented_control)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/controle-segmente",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/segmented/",
     },
-    "cursor": {
+    "range": {
         "title": "Curseur (range)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/curseur-range",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/range/",
     },
     "consent": {
         "title": "Gestionnaire de consentement (consent)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/gestionnaire-de-consentement",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/consent/",
     },
     "tooltip": {
         "title": "Infobulle (tooltip)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/infobulle",
+        "example_url": "Information contextuelle et Infobulle (tooltip)",
     },
     "toggle": {
         "title": "Interrupteur (toggle)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/interrupteur",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/toggle/",
     },
     "newsletter_follow": {
         "title": "Lettre d’information et réseaux sociaux (newsletter & follow)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/lettre-d-info-et-reseaux-sociaux",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/follow/",
     },
     "modal": {
         "title": "Modale (modal)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/modale",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/modal/",
     },
     "password": {
         "title": "Mot de passe (password)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mot-de-passe",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/password/",
     },
     "navigation": {
         "title": "Navigation principale (navigation)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/navigation-principale",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/navigation/",
     },
     "share": {
         "title": "Partage (share)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/partage",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/share/",
     },
     "back_to_top": {
         "title": "Retour en haut de page (back to top)",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/retour-en-haut-de-page",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/link/back-to-top/",
     },
     "translate": {
         "title": "Sélecteur de langue",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/selecteur-de-langue",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/translate/",
     },
     "download": {
         "title": "Téléchargement de fichier",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/telechargement-de-fichier",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/download/",
     },
     "transcription": {
         "title": "Transcription",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/transcription",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/transcription/",
     },
 }
 

diff --git a/example_app/management/commands/import_sample_data.py b/example_app/management/commands/import_sample_data.py
@@ -1,14 +1,30 @@
 from django.core.management.base import BaseCommand
 
+from dsfr.models import DsfrConfig
 from example_app.models import Genre
 
 
 class Command(BaseCommand):
-    help = "Add some sample data to be able to test the forms."
+    help = "Add some initial sample data for the example app."
 
     def handle(self, *args, **options):
         # Note: the command should be able to be run several times without creating
         # duplicate objects.
+        DsfrConfig.objects.get_or_create(
+            id=1,
+            defaults={
+                "header_brand": "République française",
+                "header_brand_html": "République<br />française",
+                "footer_brand": "République française",
+                "footer_brand_html": "République<br />française",
+                "site_title": "Django-DSFR",
+                "site_tagline": "Intégration du système de design de l’État pour les sites utilisant Django",
+                "footer_description": '<a href="https://github.com/numerique-gouv/django-dsfr" \r\ntarget="_blank" rel="noreferrer noopener">Dépôt Github</a>',
+                "mourning": False,
+                "accessibility_status": "NOT",
+            },
+        )
+
         Genre.objects.get_or_create(code="SF", designation="Science-Fiction")
         Genre.objects.get_or_create(
             code="FTSQUE",

diff --git a/example_app/templates/example_app/components_index.html b/example_app/templates/example_app/components_index.html
@@ -74,7 +74,10 @@ <h2>
       <ul>
         {% for tag, data in not_yet.items %}
           <li class="fr-mb-1w">
-            <a href="{{ data.doc_url }}" target="_blank" rel="noopener">{{ data.title }} <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>
+            {{ data.title }}
+            (<a href="{{ data.doc_url }}" target="_blank" rel="noopener">Documentation <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>
+            —
+            <a href="{{ data.example }}" target="_blank" rel="noopener">Exemple <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>)
           </li>
         {% endfor %}
       </ul>

diff --git a/example_app/templates/example_app/page_component.html b/example_app/templates/example_app/page_component.html
@@ -28,11 +28,18 @@
       <h1>
         {{ title }}
       </h1>
-      {% if doc_url %}
-        <p>
-          {% dsfr_link url=doc_url label="Voir la page de documentation du composant sur le Système de Design de l’État" is_external=True extra_classes="fr-link--lg" %}
-        </p>
-      {% endif %}
+      <ul>
+        {% if doc_url %}
+          <li>
+            {% dsfr_link url=doc_url label="Voir la page de documentation du composant sur le Système de Design de l’État" is_external=True extra_classes="fr-link--lg" %}
+          </li>
+        {% endif %}
+        {% if example_url %}
+          <li>
+            {% dsfr_link url=example_url label="Voir la page d’exemple du Système de Design de l’État" is_external=True extra_classes="fr-link--lg" %}
+          </li>
+        {% endif %}
+      </ul>
       <h2>
         Documentation du tag
       </h2>

diff --git a/example_app/templates/example_app/page_icons.html b/example_app/templates/example_app/page_icons.html
@@ -4,19 +4,32 @@
   <h1>
     Icônes
   </h1>
-  <p>
-    <a class="fr-link fr-icon-external-link-line fr-link--icon-right fr-link--lg"
-       href="https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones"
-       target="_blank"
-       rel="noopener noreferrer">
-      Voir la page de documentation du composant sur le Système de Design de l’État <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span>
-    </a>
-  </p>
+  <div class="fr-mb-4w">
+    {% dsfr_summary summary %}
+  </div>
+  <ul>
+    <li>
+      <a class="fr-link fr-icon-external-link-line fr-link--icon-right fr-link--lg"
+         href="https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones"
+         target="_blank"
+         rel="noopener noreferrer">
+        Voir la page de documentation du composant sur le Système de Design de l’État <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span>
+      </a>
+    </li>
+    <li>
+      <a class="fr-link fr-icon-external-link-line fr-link--icon-right fr-link--lg"
+         href="https://main--ds-gouv.netlify.app/example/utility/icons/"
+         target="_blank"
+         rel="noopener noreferrer">
+        Voir la page sur le site d’exemples du Système de Design de l’État <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span>
+      </a>
+    </li>
+  </ul>
   <p>
     Cliquer sur une icône ci-dessous pour copier le nom de sa classe.
   </p>
   {% for folder, items in icons.items %}
-    <h2>
+    <h2 id="{{ folder|slugify }}" tabindex="-1">
       {{ folder|title }}
     </h2>
     <div class="fr-mb-4w">