numerique-gouv / sites-faciles

Gestionnaire de contenu permettant de créer et gérer un site internet basé sur le Système de design de l'État, accessible et responsive
https://sites-faciles.beta.numerique.gouv.fr/
GNU Affero General Public License v3.0
30 stars 14 forks source link

Abstraire / rendre pluggable django-dsfr #121

Open chris2fr opened 2 months ago

chris2fr commented 2 months ago

Je souhaiterais maintenir par moi-même une version de ce travail pour les acteurs privés et mixed. Vous rendez déjà cela envisageable par votre séparation du module django-dsfr. Il reste simplement à finir ce travail de séparation explicite et pluggable, ou presque pluggable.

Cela nécessite une base de version du website fonctionnel de la même manière que c'est maintenant, mais sans le look-and-feel de l'Etat spécifiquement. Ce travail a deux bénéfices.

  1. Cela permet aux acteurs privés de s'approprier le dispositif sites-faciles et de l'améliorer.

  2. Cela permet aux acteurs publics de consolider leur maîtrise du dispositif sites-faciles simplement, chose qui rend encore plus praticable les intégrations effectives.

Je souhaiterais insister sur le fait que la version générique pluggé du dispositif doit impérativement et en temps réel être isofonctionnelle avec le dispositif pour l'Etat. Cela permet de montrer la maîtrise du dispositif : chose qui rassure tout adaptateur.

De surcroît, je pense qu'il nous est utile de maintenir le caractère attirant du site générique. Si un acteur privé veut se l'approprier, souvent un design attrayant par défaut aide la chose.

chris2fr commented 1 month ago

Il y a des questions profondes métaphysiques. En supposant que l'Etat veuille bénéficier d'un dynamique OpenSource / LogicielLibre, voici une approche.

La question est de savoir qu'est-ce que est spécifique à l'identité de l'Etat et qu'est-ce qui est une contribution en technologie à celles et ceux qui peuvent en profiter. Trois niveaux d'analyse s'impose par la nature même de l'architecture:

  1. DSFR
  2. Django-DSFR
  3. Sites-Faciles

Il est mon avis que ces trois niveaux ne sont pas simplement graphique ou identitaires, mais profondément apporteurs d'outils et de démarches automatisés et de composants webs génériques pouvant servir à toutes et à tous. Voici un diagramme que j'ai fait en décrivant la nécessité de faire les trois niveau en extrayant uniquement les parties génériques. Je crée trois niveaux pour rendre tout cela générique:

  1. SiFacile
  2. Django_SiFacile
  3. Sites-Faciles avec Django_SiFacile

Cela fait un peu d'investissement déjà.

stateDiagram-v2
    state generique {
        sifacile
        note left of sifacile
            Remplacement
            d'images
            de polices
            de couleurs
            Changement d'espace
            de nommage
        end note  
        django_sifacile
        generic_sites_faciles 
    }

    state GouvernementFR {
        dsfr
    } 
    state numerique-gouv {
        django_dsfr
        dinum_sites_faciles 
    } 

    dsfr --> sifacile : Conserver aspect générique uniquement
    dsfr --> django_dsfr : Transposer en technologie Django
    sifacile --> django_sifacile : Composants génériques pour Django
    django_dsfr --> django_sifacile
    django_sifacile --> generic_sites_faciles : Composants génériques pour Wagtail
    django_dsfr --> dinum_sites_faciles : Composants DSFR pour Wagtail
    dinum_sites_faciles --> generic_sites_faciles

et encore un diagramme


classDiagram
    namespace generique {
        class sifacile 
        class django_sifacile
        class wagtail_sifacile 
    }    
    namespace GouvernementFR {
        class dsfr
    } 
    namespace numerique_gouv {
        class django_dsfr
        class sites_faciles 
    } 
    dsfr --> sifacile : "Conserver l'aspect générique uniquement\nChanger d'espace de nommage\nRemplacer les polices, les couleurs, les images"
    dsfr --> django_dsfr : Transposer en technologie Django
    sifacile --> django_sifacile : Composants génériques pour Django
    django_dsfr --> django_sifacile : Outils d'adaptation pour Django
    django_sifacile --> wagtail_sifacile : Composants génériques pour Wagtail
    django_dsfr --> sites_faciles : Composants DSFR pour Wagtail
    sites_faciles --> wagtail_sifacile : Outils d'adaptations vers Wagtail

    click dsfr href "https://github.com/GouvernementFR/dsfr/" "GitHub du Design System de l'Etat par le Gouvernement"
    click sites_faciles href "https://github.com/numerique-gouv/sites-faciles/" "GitHub de Sites Faciles par la Dinum"
    click django_dsfr href "https://github.com/numerique-gouv/django-dsfr/" "django-dsfr par la DINUM" 
chris2fr commented 1 month ago

Voici un autre diagramme autour de l'idée de faire un outil publiquement utilisable Wagtail-SiFacile.

flowchart TD

subgraph GouvernementFR
    DSFR
end
subgraph numerique-gouv
    django-dsfr
    sites-faciles
end
subgraph Fastoche 
    web-fastoche
    django-fastoche
    wagtail-fastoche
end

django-dsfr -.-> Django 
 sites-faciles-.-> Wagtail 
 django-fastoche -.-> Django
wagtail-fastoche -.-> Wagtail 
DSFR -.-> NodeJS 
web-fastoche  -.-> NodeJS 

DSFR --> django-dsfr
django-dsfr --> sites-faciles
DSFR --> uniquement-generique{{Reprise uniquement\ndes éléments\ngénériques}}
uniquement-generique --> web-fastoche
web-fastoche --> django-fastoche

django-dsfr --> intro-submodules{{Introduction\nde submodules\npar desgin de site}}
intro-submodules --> django-fastoche
django-fastoche --> wagtail-fastoche
sites-faciles --> wagtail-fastoche

Django --> Wagtail
chris2fr commented 1 month ago

J'ai commencé le travail sur des branches différentes que main (dans 2 des trois cas) ici :

https://github.com/chris2fr/web-fastoche

https://github.com/chris2fr/django-fastoche
et
https://pypi.org/project/django-fastoche/

https://github.com/chris2fr/wagtail-fastoche

Je n'ai pas changé la documentation encore.

chris2fr commented 1 month ago

J'ai commencé toute une démarche sur https://www.fastoche.org

chris2fr commented 1 month ago

C'est peut-être « Fastoche » mais ce n'est pas si facile. J'ai commencé, en plus du site fastoche.org, deux sites de test grandeur nature : francemali.org et facile.lesgrandsvoisins.com.

Les conditions d’utilisation de DSFR pour des acteurs privés sont claires :

2° Conditions d’utilisation des Composants par les Autres Utilisateurs

Tous les Autres Utilisateurs sont autorisés à utiliser le code source selon les conditions de la licence MIT.

Il est expressément rappelé aux Autres Utilisateurs que toute utilisation des Composants en dehors des limites visées aux présentes ou dans le but de les détourner et de s’approprier d’une manière ou d’une autre la Marque de l’État est punissable de sanctions civiles et/ou pénales.

Est les conditions de l'utilisation de dango-dsfr and sites-faciles (content_manager) sont encore moins problématiques un fois que la question fondamentale du DSFR est traité de manière responsable. Le défi est de proposer un deal équitable et sympa pour l'Etat. Cela serait aidé, je pense, par la contribution fondamentale de proposer des thèmes graphiques très différents de la charte du DSFR. Il y a encore un peu de travail à faire dans ce sens, mais c'est bien parti.

Maîtriser l'ensemble de la chaîne de dsfr à django-dsfr à sites-faciles a été une joie parce-que les développements sont propres et faits de manière responsable.

chris2fr commented 1 month ago

J'ai mis à jour les branches main de wagtail-fastoche, de django-fastoche et de web-fastoche.

Il me semble prioritaire de changer les couleurs des pictogrammes dans "artwork" dans web-fastoche, si possible de s'accorder avec les couleurs du site en cours (un build un peu particulier). Une fois que cela sera fait, je ne pense plus qu'il soit possible de confondre la charte en page actuelle avec la charte de l'Etat.

La prochaine étape est la création de thèmes personalisables, 5 est mon cible. web-fastoche me semble en produire un par dépôt: donc des branches distincts ? A voir. django-fastoche est actuellement populé avec deux themes: fastoche_designsystem et fastoche_lesgrandsvoisins. Cela met le thème comme application Django.

J'ai aussi remplacé l'app content_manager par wagtail_fastoche, chose qui n'était pas trivial au niveau des migrations. Je pense utile de migrer éventuellement aussi blog vers wagtail_fastoche.blog. D'un point de vue sémantique, cela me semble plus élégant.

chris2fr commented 1 month ago

Voici le diagrame simplifié

%%{
  init: {
    'theme': 'base',     
    'themeVariables': {
      'primaryColor': '#bbb',
      'primaryTextColor': '#222',
      'primaryBorderColor': '#555',
      'tertiaryTextColor': '#fff',
      'lineColor': '#777',
      'secondaryColor': '#eee',
      'tertiaryColor': '#555',
      'background': '#ffffff00'
    }
  }
}%%

flowchart TD

subgraph GouvernementFR
  dsfr["<big><b>DSFR</big></b>
        <hr/><u>Système de design de l'Etat</u>
         <small>Outillage et gabarits de création de composants 
                prêts à l'emploi, accessibles et ergonomiques
                dans la charte graphique de l'Etat</small>"]
%%  en technologie Libre NodeJS 
%%   publié dans github principalement sous licence Libre MIT
%%   avec des mises en garde 
%%   contre l'usurpation de la marque de l'Etat
%%  </small>"]
end
subgraph numerique-gouv

  sites-faciles["<big><b>Sites Faciles</big></b>
             <hr/><small>Intégration Libre
                         de Django DSFR 
                         dans le gestionnaire 
                         de contenus Wagtail</small>"]
%%  Libre Wagtail publié dans github.com 
%%  sous licence Libre GNU Affero 3</small>"]

  django-dsfr["<big><b>Django DSFR</big></b>
  <hr/><small>Module public Libre
              du serveur d'applications
              Django qui intègre DSFR</small>"]
%%  publié sur pypi.org sous licence Libre.</small>"]
end

subgraph cfran.org 
    wagtail-cfran["<big><b>Wagtail Cfran</big></b>
                   <hr/><small>Application Libre du système 
                               de gestion de contenu Wagtail
                               qui intègre Django Cfran</small>"]
    %%  dans le serveur Libre 
    %%  de gestionnaire de contenu Wagtail 
    %%  publié par github.com en Libre."]

    django-cfran["<big><b>Django Cfran</big></b>
    <hr/><small>Module Libre du serveur 
                d'applications Django 
                qui intègre Génération Cfran</small>"]
    %%      dans le serveur Libre 
    %%  d'applications Django
    %%  publié par Pypi.org
    %%  et par github.com en Libre</small>"]

    design-system-cfran["<big><b>DS Cfran</big></b>
    <hr/><small>Génération de composants 
                HTML, CSS et Javascript
                par le système de design
                en NodeJS, SASS et EJB</small>"]
    %%  en technologie Libre NodeJS 
    %%  publié par github.com en Libre</small>"]
 end

%%  subgraph LogicielsLibres
%%      Django
%%      Wagtail
%%      NodeJS
%%  end

%%  django-dsfr <-.- Django 
%%  sites-faciles <-.- Wagtail 
%%  django-cfran <-.- Django
%%  wagtail-cfran <-.- Wagtail 
%%  design-system-cfran  <-.- NodeJS 
%%  dsfr <-.- NodeJS 

wagtail-cfran
-->
django-cfran
-->
design-system-cfran

master-design{{"<i>Génération de composants 
                   HTML, CSS  et Javascript 
                   Libres avec un système 
                   de design en NodeJS</i>"}}:::dashedOutline
%% (dans NodeJS)</i>"}}:::dashedOutline
-.-
dsfr

master-design
-.-
design-system-cfran

master-django{{"<i>Sites et composants 
                   dynamiques Libres
                   avec le serveur 
                   d'applications 
                   Django</i>"}}:::dashedOutline
%%  (dans Django)</i>"}}:::dashedOutline
-.-
django-dsfr 

master-django
-.-
django-cfran

master-wagtail{{"<i>Châine d'édition web Libre avec le système de gestion de contenus Wagtail</i>"}}:::dashedOutline
%%  (en Wagtail)</i>"}}:::dashedOutline
-.-
sites-faciles

master-wagtail
-.-
wagtail-cfran

sites-faciles
-->
django-dsfr
-->
dsfr

master-wagtail
-->
master-django
-->
master-design

classDef dashedOutline stroke-dasharray:4 5

%%  Django --> Wagtail

click wagtail-cfran href "https://github.com/chris2fr/wagtail-cfran"
click django-cfran href "https://github.com/chris2fr/django-cfran"
click design-system-cfran href "https://github.com/chris2fr/design-system-cfran"
click sites-faciles href "https://github.com/numerique-gouv/sites-faciles"
click django-dsfr href "https://github.com/numerique-gouv/django-dsfr"
click dsfr href "https://github.com/GouvernementFR/dsfr/"
chris2fr commented 1 month ago

J'ai relu les conditions d'utilisation DSFR et remarques les mots clefs identité numérique de l'Etat et marque de l'Etat. Il me semble claire que le système lui-même, et les composants eux-mêmes sont voués à la dynamique des logiciels libres -- c'est à dire les regard croisés en cercles vertueux -- mais que les sites eux-même ne le sont pas. De ce fait, mon travail dans DS-Cfran est d'avantage de conserver les mises en pages des composants, mais de concevoir la variété obligatoire de la mise en page de ce qui n'est pas composants.

Vous constaterez que je nomme désormais ce projet d'abstraction des thèmes sites-faciles, bifurqué en (prochainement) wagtail-cfran, « Cfran », soit le verlan de « français ». J'espère que ce terme est suffisamment générique et international pour créer des dynamique vertueux avec la mission généreuse et dynamique des logiciels libres de l'Etat.

Voici mon diagramme d'architecture modifié.

%%{
  init: {
    'theme': 'base',     
    'themeVariables': {
      'primaryColor': '#bbb',
      'primaryTextColor': '#222',
      'primaryBorderColor': '#555',
      'tertiaryTextColor': '#fff',
      'lineColor': '#777',
      'secondaryColor': '#eee',
      'tertiaryColor': '#555',
      'background': '#ffffff00'
    }
  }
}%%

flowchart TD

subgraph GouvernementFR
  dsfr["<big><b>DSFR</big></b>
        <hr/><u>Système de design de l'Etat</u>
         <small>Outillage et gabarits de création de composants 
                prêts à l'emploi, accessibles et ergonomiques
                dans la charte graphique de l'Etat</small>"]
%%  en technologie Libre NodeJS 
%%   publié dans github principalement sous licence Libre MIT
%%   avec des mises en garde 
%%   contre l'usurpation de la marque de l'Etat
%%  </small>"]
end
subgraph numerique-gouv

  sites-faciles["<big><b>Sites Faciles</big></b>
             <hr/><small>Intégration Libre
                         de Django DSFR 
                         dans le gestionnaire 
                         de contenus Wagtail</small>"]
%%  Libre Wagtail publié dans github.com 
%%  sous licence Libre GNU Affero 3</small>"]

  django-dsfr["<big><b>Django DSFR</big></b>
  <hr/><small>Module public Libre
              du serveur d'applications
              Django qui intègre DSFR</small>"]
%%  publié sur pypi.org sous licence Libre.</small>"]
end

subgraph cfran.org 
    wagtail-cfran["<big><b>Wagtail Cfran</big></b>
                   <hr/><small>Application Libre du système 
                               de gestion de contenu Wagtail
                               qui intègre Django Cfran</small>"]
    %%  dans le serveur Libre 
    %%  de gestionnaire de contenu Wagtail 
    %%  publié par github.com en Libre."]

    django-cfran["<big><b>Django Cfran</big></b>
    <hr/><small>Module Libre du serveur 
                d'applications Django 
                qui intègre Génération Cfran</small>"]
    %%      dans le serveur Libre 
    %%  d'applications Django
    %%  publié par Pypi.org
    %%  et par github.com en Libre</small>"]

    design-system-cfran["<big><b>DS Cfran</big></b>
    <hr/><small>Génération de composants 
                HTML, CSS et Javascript
                par le système de design
                en NodeJS, SASS et EJB</small>"]
    %%  en technologie Libre NodeJS 
    %%  publié par github.com en Libre</small>"]
 end

%%  subgraph LogicielsLibres
%%      Django
%%      Wagtail
%%      NodeJS
%%  end

%%  django-dsfr <-.- Django 
%%  sites-faciles <-.- Wagtail 
%%  django-cfran <-.- Django
%%  wagtail-cfran <-.- Wagtail 
%%  design-system-cfran  <-.- NodeJS 
%%  dsfr <-.- NodeJS 

wagtail-cfran
-->
django-cfran
-->
design-system-cfran

master-design{{"<i>Système de design Libre 
                   HTML, CSS et Javascript</i>"}}:::dashedOutline
%% (dans NodeJS)</i>"}}:::dashedOutline
-.-
dsfr

master-design
-.-
design-system-cfran

master-django{{"<i>Sites et composants 
                   dynamiques Libres</i>"}}:::dashedOutline
%%  (dans Django)</i>"}}:::dashedOutline
-.-
django-dsfr 

master-django
-.-
django-cfran

master-wagtail{{"<i>Châine d'édition web Libre</i>"}}:::dashedOutline
%%  (en Wagtail)</i>"}}:::dashedOutline
-.-
sites-faciles

master-wagtail
-.-
wagtail-cfran

sites-faciles
-->
django-dsfr
-->
dsfr

master-wagtail
-->
master-django
-->
master-design

classDef dashedOutline stroke-dasharray:4 5

%%  Django --> Wagtail

click wagtail-cfran href "https://github.com/chris2fr/wagtail-cfran"
click django-cfran href "https://github.com/chris2fr/django-cfran"
click design-system-cfran href "https://github.com/chris2fr/design-system-cfran"
click sites-faciles href "https://github.com/numerique-gouv/sites-faciles"
click django-dsfr href "https://github.com/numerique-gouv/django-dsfr"
click dsfr href "https://github.com/GouvernementFR/dsfr/"
Ash-Crow commented 1 month ago

Bonjour et merci pour cette proposition, mais le but de ce projet est d'intégrer le système de design de l'État dans Wagtail : je ne suis pas sûr de ce que maintenir une version sans le DSFR apporte par rapport à un Wagtail "de base", dans la mesure où même les blocs pour les articles sont liés aux composants présents dans le DSFR.

D'autre part, il me semble que le SIG est en train de refaire le DSFR dans une version 2 qui permettra justement de faire des versions non liées à l'État central (par exemple pour les collectivités territoriales), ce qui devrait permettre de réaliser cela plus facilement.