Améliorations mineures des templates (#142)

* Replaced HTML commments by Django-Template comments

* Add favicon in admin

* Renamed django project to config

* Update doc

* Update version number

* Update dependencies

example/asgi.py → config/asgi.py

@@ -1,5 +1,5 @@
 """
-ASGI config for example project.
+ASGI config for django-dsfr project.
 
 It exposes the ASGI callable as a module-level variable named ``application``.
 
@@ -11,6 +11,6 @@
 
 from django.core.asgi import get_asgi_application
 
-os.environ.setdefault("DJANGO_SETTINGS_MODULE", "example.settings")
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
 
 application = get_asgi_application()

example/settings.py → config/settings.py

@@ -1,5 +1,5 @@
 """
-Django settings for example project.
+Django settings for django-dsfr project.
 
 Generated by 'django-admin startproject' using Django 3.2.5.
 
@@ -61,7 +61,7 @@
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
 ]
 
-ROOT_URLCONF = "example.urls"
+ROOT_URLCONF = "config.urls"
 
 TEMPLATES = [
     {
@@ -83,7 +83,7 @@
 if DJANGO_VERSION < (5, 0):
     FORM_RENDERER = "django.forms.renderers.TemplatesSetting"
 
-WSGI_APPLICATION = "example.wsgi.application"
+WSGI_APPLICATION = "config.wsgi.application"
 
 
 # Database

example/urls.py → config/urls.py

@@ -1,10 +1,18 @@
 from django.contrib import admin
+from django.contrib.staticfiles.storage import staticfiles_storage
 from django.conf import settings
 from django.conf.urls.static import static
 from django.urls import include, path
 from django.views.generic import RedirectView
 
+
 urlpatterns = [
+    path(
+        "favicon.ico",
+        RedirectView.as_view(
+            url=staticfiles_storage.url("dsfr/dist/favicon/favicon.ico")
+        ),
+    ),
     # The "django-dsfr/" prefix is here because this site is deployed as doc on
     # https://numerique-gouv.github.io/django-dsfr/
     path("admin/", admin.site.urls),

example/wsgi.py → config/wsgi.py

@@ -1,5 +1,5 @@
 """
-WSGI config for example project.
+WSGI config for django-dsfr project.
 
 It exposes the WSGI callable as a module-level variable named ``application``.
 
@@ -11,6 +11,6 @@
 
 from django.core.wsgi import get_wsgi_application
 
-os.environ.setdefault("DJANGO_SETTINGS_MODULE", "example.settings")
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
 
 application = get_wsgi_application()

dsfr/templates/dsfr/footer.html

@@ -20,15 +20,14 @@
                    src="{{ SITE_CONFIG.operator_logo_file.url }}"
                    alt="{{ SITE_CONFIG.operator_logo_alt }}"
                    {% if SITE_CONFIG.operator_logo_width >= 1 %}style="max-width:{{ SITE_CONFIG.operator_logo_width }}rem;"{% endif %} />
-              <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
+              {# L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image #}
             </a>
           </div>
         {% else %}
           <div class="fr-footer__brand fr-enlarge-link">
             <a id="footer-operator"
                href="/"
-               title="{{ back_to_home_label }} - {{ SITE_CONFIG.site_title }} - {{ SITE_CONFIG.footer_brand|default:'république française' }}"
-               None="{{ SITE_CONFIG.footer_brand|default:'république française' }}">
+               title="{{ back_to_home_label }} - {{ SITE_CONFIG.site_title }} - {{ SITE_CONFIG.footer_brand|default:'république française' }}">
               {% block brand %}
                 <p class="fr-logo">
                   {{ SITE_CONFIG.footer_brand_html| default_if_none:'république<br />française' | safe }}

dsfr/templates/dsfr/form_base.html

@@ -1,8 +1,8 @@
-<!-- Created on Mon Jan 24 13:32:00 2022 @author: alica.burlot -->
-<!-- base template for all forms -->
-<!-- to be extended in the templates where a form is displayed -->
-<!-- Check django comments for more information -->
-<!-- extends your base.html template -->
+{# Created on Mon Jan 24 13:32:00 2022 @author: alica.burlot #}
+{# base template for all forms #}
+{# to be extended in the templates where a form is displayed #}
+{# Check django comments for more information #}
+{# extends your base.html template #}
 {% extends "dsfr/base.html" %}
 {% load static dsfr_tags widget_tweaks %}
 {% comment %}

dsfr/templates/dsfr/theme_modale.html

@@ -34,7 +34,7 @@ <h1 id="fr-theme-modal-title" class="fr-modal__title">
                       </label>
                       <div class="fr-radio-rich__img" data-fr-inject-svg>
                         <img src="{% static 'dsfr/dist/artwork/light.svg' %}" alt="" />
-                        <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
+                        {# L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance #}
                       </div>
                     </div>
                     <div class="fr-radio-group fr-radio-rich">
@@ -47,7 +47,7 @@ <h1 id="fr-theme-modal-title" class="fr-modal__title">
                       </label>
                       <div class="fr-radio-rich__img" data-fr-inject-svg>
                         <img src="{% static 'dsfr/dist/artwork/dark.svg' %}" alt="" />
-                        <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
+                        {# L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance #}
                       </div>
                     </div>
                     <div class="fr-radio-group fr-radio-rich">
@@ -61,7 +61,7 @@ <h1 id="fr-theme-modal-title" class="fr-modal__title">
                       </label>
                       <div class="fr-radio-rich__img" data-fr-inject-svg>
                         <img src="{% static 'dsfr/dist/artwork/system.svg' %}" alt="" />
-                        <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
+                        {# L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance #}
                       </div>
                     </div>
                   </div>

example_app/static/json/search_data.json

@@ -2,7 +2,7 @@
     {
         "filename": "homepage",
         "path": "/django-dsfr/index.html",
-        "text": "Django-DSFR Documentation Django-dsfr est une application django permettant d\u2019utiliser le syst\u00e8me de design de l\u2019\u00c9tat dans des projets Django. Elle a initialement \u00e9t\u00e9 d\u00e9velopp\u00e9e dans le cadre du d\u00e9fi Open Collectivit\u00e9s et est un travail en cours (les composants sont actuellement d\u00e9velopp\u00e9s au fur et \u00e0 mesure de leur utilisation), cf. la page Composants. Sommaire Installation Utilisation D\u00e9veloppement Notes Installation Voir la page Installation. Utilisation Voir la page Utilisation. Les explications sur l\u2019utilisation de chaque composant figurent sur leur entr\u00e9e d\u00e9di\u00e9e, accessible via la page Composants. D\u00e9veloppement Voir la page Contribuer. Notes Il est possible d\u2019utiliser tous les composants du DSFR directement avec leur code HTML, y compris ceux pour lesquels il n\u2019existe pas encore de balise. De m\u00eame pour certains o\u00f9 il vaut mieux cr\u00e9er un template ad-hoc \u00e0 chaque utilisation, comme les modales.",
+        "text": "Django-DSFR Documentation Django-dsfr est une application django permettant d\u2019utiliser le syst\u00e8me de design de l\u2019\u00c9tat dans des projets Django. Elle a initialement \u00e9t\u00e9 d\u00e9velopp\u00e9e dans le cadre du d\u00e9fi Open Collectivit\u00e9s et est un travail en cours (les composants sont actuellement d\u00e9velopp\u00e9s au fur et \u00e0 mesure de leur utilisation), cf. la page Composants. Sommaire Installation Utilisation D\u00e9veloppement Notes Installation Voir la page Installation. Utilisation Voir la page Utilisation. Les explications sur l\u2019utilisation de chaque composant figurent sur leur entr\u00e9e d\u00e9di\u00e9e, accessible via la page Composants. D\u00e9veloppement Voir la page Contribuer. Notes Il est possible d\u2019utiliser tous les composants du DSFR directement avec leur code HTML, y compris ceux pour lesquels il n\u2019existe pas de balise. De m\u00eame pour certains o\u00f9 il vaut mieux cr\u00e9er un template ad-hoc \u00e0 chaque utilisation, comme les modales.",
         "title": "Accueil \u2014 Django-DSFR"
     },
     {
@@ -26,13 +26,13 @@
     {
         "filename": "icons",
         "path": "/django-dsfr/resources/icons/index.html",
-        "text": "Ic\u00f4nes Sommaire Buildings Business Communication Design Development Device Document Editor Finance Health Logo Map Media Others System User Weather Voir la page de documentation du composant sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Voir la page sur le site d\u2019exemples du Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Cliquer sur une ic\u00f4ne ci-dessous pour copier le nom de sa classe. Buildings Business Communication Design Development Device Document Editor Finance Health Logo Map Media Others System User Weather",
+        "text": "Ic\u00f4nes Voir la page de documentation du composant sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Voir la page sur le site d\u2019exemples du Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Chercher une ic\u00f4ne par son nom Chercher une ic\u00f4ne Liste compl\u00e8te Sommaire Buildings Business Communication Design Development Device Document Editor Finance Health Logo Map Media Others System User Weather Cliquer sur une ic\u00f4ne ci-dessous pour copier le nom de sa classe. Buildings Business Communication Design Development Device Document Editor Finance Health Logo Map Media Others System User Weather",
         "title": "Ic\u00f4nes \u2014 Django-DSFR"
     },
     {
         "filename": "colors",
         "path": "/django-dsfr/resources/colors/index.html",
-        "text": "Couleurs Voir la page de pr\u00e9sentation de la palette de couleurs sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Voir la page de r\u00e8gles d\u2019utilisation de la palette de couleurs sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Cartes et tuiles Les cartes et tuiles peuvent prendre un fond gris \u00e0 la place de la couleur par d\u00e9faut. Carte basique Texte de la carte. Il peut prendre jusqu\u2019\u00e0 200 caract\u00e8res, ce qui devrait correspondre \u00e0 environ cinq lignes dans le mode vertical, et deux en horizontal. \u2026 Carte basique Texte de la carte. Il peut prendre jusqu\u2019\u00e0 200 caract\u00e8res, ce qui devrait correspondre \u00e0 environ cinq lignes dans le mode vertical, et deux en horizontal. \u2026 Tuile basique (verticale, MD) Tuile basique (verticale, MD) Tuile basique (verticale, MD) Tuile basique (verticale, MD) Couleurs d\u2019accentuation Certains composants prennent une couleur d\u2019accentuation comme param\u00e8tre. Seules les couleurs illustratives sont prises en compte. Choisissez une couleur ---- Thilleul verveine Bourgeon \u00c9meraude Menthe Archipel \u00c9cume Cumulus Glycine Macaron Tuile Tournesol Moutarde Terre battue Caf\u00e9 cr\u00e8me Caramel Op\u00e9ra Gris galet Citation Personnalise la couleur de l\u2019ic\u00f4ne. D\u00e9velopper vos sites et applications en utilisant des composants pr\u00eats \u00e0 l\u2019emploi, accessibles et ergonomiques Auteur Syst\u00e8me de Design de l'\u00c9tat D\u00e9tail sans lien D\u00e9tail avec lien Ouvre une nouvelle fen\u00eatre Mise en avant Personnalise la couleur du fond et de la bordure. Mise en avant avec bouton normal Cette mise en avant a un bouton normal Bouton normal Mise en exergue Personnalise la couleur de la bordure. Contenu de la mise en exergue Tableau Personnalise la couleur de la bordure et du fond. Tableau basique Colonne 1 Colonne 2 Colonne 3 a b c d e f Tag Personnalise la couleur de la bordure, du fond et de l\u2019ic\u00f4ne. Seuls les tags cliquables sont pris en compte. Tag avec lien Tag avec action",
+        "text": "Couleurs Voir la page de pr\u00e9sentation de la palette de couleurs sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Voir la page de r\u00e8gles d\u2019utilisation de la palette de couleurs sur le Syst\u00e8me de Design de l\u2019\u00c9tat Ouvre une nouvelle fen\u00eatre Cartes et tuiles Les cartes et tuiles peuvent prendre un fond gris \u00e0 la place de la couleur par d\u00e9faut. Carte basique Texte de la carte. Il peut prendre jusqu\u2019\u00e0 200 caract\u00e8res, ce qui devrait correspondre \u00e0 environ cinq lignes dans le mode vertical, et deux en horizontal. \u2026 Carte basique Texte de la carte. Il peut prendre jusqu\u2019\u00e0 200 caract\u00e8res, ce qui devrait correspondre \u00e0 environ cinq lignes dans le mode vertical, et deux en horizontal. \u2026 Tuile basique (verticale, MD) Tuile basique (verticale, MD) Tuile basique (verticale, MD) Tuile basique (verticale, MD) Couleurs d\u2019accentuation Certains composants prennent une couleur d\u2019accentuation comme param\u00e8tre. Seules les couleurs illustratives sont prises en compte. Choisissez une couleur ---- Tilleul verveine Bourgeon \u00c9meraude Menthe Archipel \u00c9cume Cumulus Glycine Macaron Tuile Tournesol Moutarde Terre battue Caf\u00e9 cr\u00e8me Caramel Op\u00e9ra Gris galet Citation Personnalise la couleur de l\u2019ic\u00f4ne. D\u00e9velopper vos sites et applications en utilisant des composants pr\u00eats \u00e0 l\u2019emploi, accessibles et ergonomiques Auteur Syst\u00e8me de Design de l'\u00c9tat D\u00e9tail sans lien D\u00e9tail avec lien Ouvre une nouvelle fen\u00eatre Mise en avant Personnalise la couleur du fond et de la bordure. Mise en avant avec bouton normal Cette mise en avant a un bouton normal Bouton normal Mise en exergue Personnalise la couleur de la bordure. Contenu de la mise en exergue Tableau Personnalise la couleur de la bordure et du fond. Tableau basique Colonne 1 Colonne 2 Colonne 3 a b c d e f Tag Personnalise la couleur de la bordure, du fond et de l\u2019ic\u00f4ne. Seuls les tags cliquables sont pris en compte. Tag avec lien Tag avec action",
         "title": "Couleurs \u2014 Django-DSFR"
     },
     {

example_app/templates/example_app/blocks/footer.html

@@ -30,15 +30,14 @@
              src="{{ SITE_CONFIG.operator_logo_file.url }}"
              alt="{{ SITE_CONFIG.operator_logo_alt }}"
              {% if SITE_CONFIG.operator_logo_width >= 1 %}style="max-width:{{ SITE_CONFIG.operator_logo_width }}rem;"{% endif %} />
-        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
+        {# L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image #}
       </a>
     </div>
   {% else %}
     <div class="fr-footer__brand fr-enlarge-link">
       <a id="footer-operator"
          href="{{ home_url }}"
-         title="{{ back_to_home_label }} - {{ SITE_CONFIG.site_title }} - {{ SITE_CONFIG.footer_brand|default:'république française' }}"
-         None="{{ SITE_CONFIG.footer_brand|default:'république française' }}">
+         title="{{ back_to_home_label }} - {{ SITE_CONFIG.site_title }} - {{ SITE_CONFIG.footer_brand|default:'république française' }}">
         {% block brand %}
           <p class="fr-logo">
             {{ SITE_CONFIG.footer_brand_html| default_if_none:'république<br />française' | safe }}

example_app/templates/example_app/example_form.html

@@ -3,17 +3,17 @@
 {% block header %}
   {% include "example_app/blocks/header.html" %}
 {% endblock header %}
-<!-- You can add some information to the form inside the blocks of form_base.html -->
+{# You can add some information to the form inside the blocks of form_base.html #}
 {% block head_form %}
   <h1>
     Exemple de formulaire avec formset
   </h1>
 {% endblock head_form %}
-<!-- If you use formset, you need to include a template which extends formset-base.html, and put it in a block of form_base.html -->
+{# If you use formset, you need to include a template which extends formset-base.html, and put it in a block of form_base.html #}
 {% block extra_formset_after %}
   {% include "example_app/example_formset.html" %}
 {% endblock extra_formset_after %}
-<!-- Don't forget you dsfr button to submit the form -->
+{# Don't forget you dsfr button to submit the form #}
 {% block foot_form %}
   {% dsfr_button btn_submit %}
 {% endblock foot_form %}

example_app/templates/example_app/example_formset.html

@@ -1,7 +1,7 @@
-<!-- Instead of extending base.html, extend formset-base.html -->
-<!-- Then, include this template in another template which extends form_base.html -->
+{# Instead of extending base.html, extend formset-base.html #}
+{# Then, include this template in another template which extends form_base.html #}
 {% extends "dsfr/formset_base.html" %}
-<!-- You can add some information to the formset inside the blocks of formset-base.html -->
+{# You can add some information to the formset inside the blocks of formset-base.html #}
 {% block formset_title %}
   {% if formset %}
     <h3 class="fr-mt-3w">

example_app/templates/example_app/page_component.html

@@ -22,7 +22,6 @@
 
 {% block content %}
   <div class="fr-grid-row fr-grid-row--gutters fr-b__two-col">
-    <!-- Menu -->
     <div class="fr-col-12 fr-col-md-4">
       {% dsfr_sidemenu side_menu extra_classes="" %}
     </div>

manage.py

@@ -6,7 +6,7 @@
 
 def main():
     """Run administrative tasks."""
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "example.settings")
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
     try:
         from django.core.management import execute_from_command_line
     except ImportError as exc: