• Développer l'interface de la page de blog (/blog) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :
  • L'interface doit être conforme au DSFR
  • La recherche doit être fonctionnelle :
    • Recherche dans le titre
  • Le tri doit être fonctionnel
  • Les filtres doivent êtres fonctionnels :
    • Les valeurs du filtre Catégories doivent être récupérées du champ tags des entrées
    • Les valeurs du filtre Type de contenu doivent être récupérées du champ type des entrées
    • Ne pas indiquer de valeurs pour le filtre Les plus populaires
  • La pagination doit être fonctionnelle
  • Le lien du flux RSS doit être fonctionnel
  • Les tuiles Contribuez ! doivent être des liens d'email (pré-rempli avec destinataire/sujet/contenu)
  • Les contenus seront fictifs :
    • Récupérer une liste de quelques fausses entrées depuis un faux point d'API
    • Modèle d'une entrée (TBD) :

{
  "type": "article|video|event",
  "title": "",
  "content": "",
  "tags: [""]
}

• • La redirection des cartes doit être fonctionnelle
  • Les pages de contenu des entrées seront des pages simples contenant en-tête, menu principal, pieds de page et bannière de titre et informations et contenu de l'entrée (maquette TBD)
  • La page doit être responsive (TBD)
• Ajouter le lien vers la page /blog dans le menu de navigation et les liens vers le dernier événement et la dernière entrée de blog sur la page d'accueil

Maquette principale :

Mettre en place l'environnement de développement minimal pour code.gouv.fr sur la base de code de SILL web :

• App Front React
• Back : API + DB
• CI/CD (dont env de préprod ?)

Guides

• Choisir un système de gestion de contenu Later

FAQ

• #31

Forum

• #30

Corrections bloquantes

• Il y a une valeur (ligne) vide en haut des combo box des filtres + plusieurs valeurs en haut de la combo box du filtre Organisation (depuis que j'ai rajouté le tri côté back)
• La valeur Autorité de régulation (filtre Administration) renvoie 0 dépôt (devrait être 14 d'après https://code.gouv.fr/public/#/groups?ministry=Autorit%C3%A9+de+R%C3%A9gulation+des+Communications+%C3%89lectroniques+et+des+Postes+(AAI)) : vérifier si c'est un problème côté UI (sinon back) car de plus elle n'est pas grisée
  • De même, la valeur Analyse-Image_APC (filtre Organisation) est grisée, alors qu'elle devrait renvoyer 6 dépôts d'après https://code.gouv.fr/public/#/groups?q=analyse-image : vérifier si c'est un problème côté UI (sinon back)

Corrections majeures

• Les labels et les bordures des filtres ne sont pas alignés entre eux
• Revoir l'interaction de la combo box : le curseur devient parfois flèche (default), devient texte sur les bords, alors qu'il devrait être une main (pointer) sauf dans la zone de texte
• La taille de la liste des valeurs des combo box devrait s'adapter au contenu (sauf en version mobile) pour pouvoir lire les valeurs en entier (ex. filtre Administrations)

Améliorations

• Le filtre Organisation doit afficher comme valeurs leurs name (même si c'est l'id qui est utilisé pour la relation avec le dépôt)
• La carte doit rediriger vers le dépôt
• Tri par défaut : Dernier mis à jour
• Filtres ouverts par défaut
• Masquer les dépôts expérimentaux par défaut
• Les valeurs sélectionnées devraient être ramenées en haut des combo box des filtres

Nice to have

• Rajouter des checkbox dans les combo box des filtres
• Rajouter les informations manquantes dans les cartes
• Dans la zone de détail de la carte haute (fr-card__detail) : le ou les administrations associées et entre parenthèse le nom de l'oganisation
  ex. Ministère de la Culture (Programme Vitam)
• Dans les tags, ajouter la licence
• Les valeurs des filtres sélectionnées devraient apparaître comme des badges en haut des filtres (cf. UI Vinted)
• Revoir le filtre Organisation (utilité, utilisabilité)
• Configurer la "fuzzinness" du champ de recherche
• Les filtres Administrations et Langages devraient aussi être des champs de recherche ?

• Décrire les points d'API et les modèles de données actuels (si pas déjà fait)
• Pour repos.json :
  • Expliciter les noms des champs dans les réponses
  • Pour les champs existants :
    • name : à garder dans la réponse
    • organization_name : à garder ou à déduire de l'url ?
    • platform : à supprimer de la réponse
    • repository_url : à garder
    • description : à garder
    • is_fork : à garder si applicable sur d'autres plateformes que github
    • is_archived : à garder tel quel ou à fusionner avec un champ is_empty dans un nouveau champ is_experimental
    • last_update : à garder
    • stars_count : à garder (quand applicable)
    • forks_count : à supprimer car seulement sur github ?
    • license : à garder
    • language : à garder
    • is_esr : comment est-il calculé ?
    • is_lib : à supprimer (cf. type)
    • is_contrib : à supprimer
    • is_publiccode : à compléter avec d'autres fichiers (par exemple README, CONTRIBUTING) ?
    • reuses : à supprimer
  • Ajouter des champs :
    • id ?
    • administrations (champ multiple)
    • version ou latest_release ou latest_tag
    • vitality dont la valeur est calculée à partir de TBD (cf. https://github.com/italia/publiccode-crawler/blob/main/vitality-ranges.yml)
    • status dont la valeur (Concept, Alpha, Beta, RC, Stable) est calculée à partir du numéro de version (cf. SemVer) : à calculer côté back ou front ?
    • type dont la valeur correspond à TBD (champ multiple) : ce champ peut-il être déduit automatiquement ou rempli par l'utilisateur dans la future BDD ? Oui pour les lib, quid des autres types (logiciels, API, algos, etc.) ?
    • sill_id : ce champ doit-il être rempli automatiquement côté back ou front ?
    • homepage
    • topics
    • software_heritage_url
  • Compresser la réponse (si pas déjà fait) : de manière générale, il faudra surveiller la taille de la réponse après ces modifications et peut-être agir en conséquence (pagination ?)
• Créer les points d'API pour récupérer les valeurs des filtres : côté back ou front ?
  • Administrations
  • Catégories (topics)
  • Types
  • Langages
  • Licences
  • Organisations : revoir le lien avec les administrations (1 orga, n admins)
  • Dépendances
• Revoir le point d'API stats

Développer le squelette de l'app et l'interface de la page d'accueil (et des sous-pages définies ci-dessous) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :

• Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
• La page doit s'adapter au format tablette/mobile

Header

• Le bouton de connexion doit être inactif ou caché
• Dans le menu, le lien Services est inactif dans l'ideal (sinon, il redirige vers une page vide)
• Dans le menu, le lien Logiciels (SILL) redirige vers sill.code.gouv.fr
• Dans le menu, le lien Documentation ouvre un sous-menu détaillé dans la maquette ci-dessous.
  • Dans le sous-menu, le premier lien redirige vers une nouvelle page /doc contenant les mêmes tuiles/cartes que https://code.gouv.fr/doc/
  • Dans le sous-menu, le lien FAQ redirige vers une nouvelle page /faq contenant un accordéon
  • Dans le sous-menu, le lien Forum est inactif
• Dans le menu, le lien Blog est inactif
• Dans le menu, le lien Explorer ! redirige vers /public (https://code.gouv.fr/public/)
• Dans le menu, le lien A propos vers une nouvelle page /mission vide

Bannière

• Pas d'arrière-plan
• Le bouton En savoir plus redirige vers la page /mission
• Les 2 tuiles contiennent du texte fictif et des liens inactifs

1ère section

• Similaire à la section "Quelques sélections de logiciels" de la page d'accueil du SILL (même arrière-plan, couleur et forme)
• Les 3 cartes contiennet du texte fictif et des liens inactifs

2ème section

• Similaire à la section "Le SILL en plusieurs chiffres" de la page d'accueil du SILL (même arrière-plan, couleur et forme)
• Les chiffres sont fictifs

3ème section

• Similaire aux sections "Pourquoi et quand utiliser le SILL ?" et "Aidez-nous à enrichir le catalogue" de la page d'accueil du SILL
• Toutes les tuiles contiennent du texte fictif et des liens inactifs
  • Sauf les tuiles Contribuez ! qui sont des liens pour envoyer un email (pré-rempli avec destinataire/sujet/contenu)

Footer

• Les liens pour les newsletters ne contiennent pas de champ de saisie, seulement les boutons de redirection vers l'app d'abonnement
  • https://code.gouv.fr/newsletters/subscribe/[email protected]
  • https://code.gouv.fr/newsletters/subscribe/[email protected]

Maquette principale

• En savoir plus : rediriger vers A propos
• Retirer les encadrés des RS et contact
• Est-il possible de ne pas scroll to top sur le clic bouton back du navigateur ? TBD

Avec comme base le zoning de #21, améliorer la page ExploreCatalog :

• Virtualisation de la liste des repos filtrés
• Responsive
• Le filtre de vitalité doit avoir sa borne maximale fixe (à 100). Seule la borne minimale est modifiable.
• Chaque filtre doit avoir un séparateur (graphiquement) pour le séparer des autres filtres, sauf le dernier de la ligne.
• Les multiSelect doivent avoir une taille maximale dans le viewport.
• Les tags des multiselect autoComplete doivent avoir une marge verticale.
• Les multiselect autoComplete doivent utiliser les styles des autres multiSelect (pas de border de MUI au hover)
• L'interface doit être utilisable sans mock de repositories (tester sur une ordinateur pas très puissant et sur mobile)
• Ajout de story des composants :
  • RepoCard
  • Virtualized listing
  • Search
  • MainSearch
  • AutoCompleteInput
  • MultiSelect
• Traduction du filtre Functions
• Splash screen

Corriger les retours de #24 :

• Le changement de tri fait planter l'app
• La flèche sur le bouton des filtres est inversée
• Supprimer le selector non utilisé DevStatus
• Constante pour MAX_VITALITY
• Dans AutoCompleteInputMultiple.tsx, intégrer le DSFR dans le calcul de la taille des éléments
• Utiliser les classes DSFR pour la disposition en grille du catalogue
• Est-il possible de'ajouter, en plus du clic, la recherche à l'appui sur la touche Entrée ?
• Sur la page d'accueil Explore, est-il possible de gérer le retour arrirère du navigateur après un clic sur le bouton de recherche qui redirige vers la page Catalogue ?

Endpoints :

• repositories GET
• stats GET
• administrations GET
• categories GET
• languages GET
• licences GET
• organisations GET
• dependencies GET

Bloqué par #11

Actuellement, seul le nom du dépôt est utilisé pour la recherche textuelle.

• Développer l'interface de la page de FAQ en prenant en compte les spécifications suivantes :
  • L'interface doit être conforme au DSFR
  • Elle doit contenir en-tête, menu principal, pieds de page et bannière de titre
  • Utiliser des composants Accordéon pour la FAQ (un composant par catégorie de questions)
• Ajouter le lien vers la page /faq dans le menu de navigation
• Peupler la FAQ (soit le fichier de données correspondant) avec le contenu du fichier faq du dépôt des guides
  • Utiliser un fichier de données (ex. .yaml) séparé
  • Les questions doivent être triées/catégorisées

Développer une interface commune pour les pages de sélection (ex. Par administration), en prenant en compte les spécifications suivantes :

• UI : L'interface est celle du catalogue (réutiliser le composant d'affichagecatalogue) sans la barre de recherche ni les filtres
• Back/Données :
  • Développer un nouveau filtre par url
  • Utiliser ce filtre pour récupérer depuis la liste des dépôts (dans le state) une sous-liste filtrée par une liste d'url. La liste des urls dépendra de la sélection. La liste d'url devra être facilement modifiable (TBD)

Développer l'interface d'accueil de la page "Explorer !" (/public) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :

• Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
• La page doit s'adapter au format tablette/mobile

Données

• Utiliser l'adapteur CodeGouvApiMock TODO #17 pour récupérer :
  • Les chiffres
  • Le contenu du catalogue
  • Les valeurs des filtres suivants :
    • Administrations
    • Catégories (topics)
    • Langages
    • Licences
    • Organisations
    • Dépendances

Interface

Bannière

• Similaire à la bannière du SILL
  • Même organisation des éléments
  • Pas de combo box, seule une barre de recherche
  • Le bouton de recherche redirige vers la vue catalogue
  • Le bouton Se connecter est remplacé par le bouton Mode avancé qui redirige vers la vue catalogue

1ère section

• Similaire à la section "Quelques sélections de logiciels" de la page d'accueil du SILL (même arrière-plan, couleur et forme) (et à la section similaire sur la page d'accueil de code.gouv.fr)
• Les tuiles contiennent des liens inactifs

2ème section

• Similaire à la section "Aidez-nous à enrichir le catalogue" de la page d'accueil du SILL (et à la section similaire sur la page d'accueil de code.gouv.fr)
• Les tuiles Contribuez ! qui sont des liens pour envoyer un email (pré-rempli avec destinataire/sujet/contenu)

3ème section

• Similaire à la section "Le SILL en plusieurs chiffres" de la page d'accueil du SILL (même arrière-plan, couleur et forme) (et à la section similaire sur la page d'accueil de code.gouv.fr)

Maquettes principales

Accueil

• Choisir un système de forum (Discourse ou Flarum)
• Initialiser le backend dans un nouveau dépôt
• Si besoin, développer une interface au DSFR
• Le déployer sur code.gouv.fr/forum
• Mettre à jour les liens dans code.gouv.fr

Développer l'interface de la vue catalogue de la page "Explorer !" (/public/repos) en suivant les maquettes ci-dessous et en prenant en compte les spécifications suivantes :

• Suivre le DSFR et les maquettes du SILL pour les dimensions et espacements
• La page doit s'adapter au format tablette/mobile

Données

• Utiliser l'adapteur CodeGouvApiMock TODO #17 pour récupérer :

  • Les chiffres
  • Le contenu du catalogue
  • Les valeurs des filtres suivants :
    • Administrations
    • Catégories (topics)
    • Langages
    • Licences
    • Organisations
    • Dépendances

• La recherche, les filtres, le tri, la pagination sont fonctionnels

  • En v1, recherche textuelle simple dans le nom
  • Le numéro de page devrait appraître dans l'url

• En v1, réutiliser la vue catalogue du SILL (ne pas se fier à la maquette)

  • Même composants pour la recherche et les filtres
  • Filtres en haut
  • Ajouter les boutons pour le flux RSS et le téléchargement des données TBD liens
  • Les cartes doivent contenir les données suivantes (tel que sur la maquette) :
    • Indice de vitalité
    • Logo
    • Catégorie(s)
    • Administration(s)
    • Nom
    • Langage
    • Licence
    • Version et date de dernière mise à jour

• En v1, les cartes redirigent vers le dépôt

• Les filtres Dépendance et Organisation doivent gérer l'autocomplétion

  • Si certains filtres (e.g. Catégorie) ont trop de valeurs ils pourront être remplacés par un champ de saisie avec autocomplétion

Maquettes principales

Permettre à l'utilisateur de s'authentifier sur code.gouv.fr en prenant en compte les spécifications suivantes :

• Authentification via email/MDP ou AgentConnect
• SSO code.gouv.fr/sill/forum

• Créer un fork de sill-web
• Rapatrier l'historique de codegouv-web
• Vérifier que l'application se lance
  • Que le SILL fonctionne
  • Que la page catalogue de code.gouv.fr fonctionne
• Nettoyer le dépôt des duplications de code
• Mettre à jour la navigation :
  • Page d'accueil : #12