---
title: Site web, avancée des travaux
aliases:
  - Checklist du chantier
__au: FrViPofm
__cr: CC-by-SA-NC 3.0
__dc: 20260830T000901
__dm: 20260908T101657
__id: EpA_/S/Site_web,_checklist
__vs: 6
---
> [!introduction]- 
> Cette note Obsidian est destinée à stocker localement (côté client) l’état des travaux de conception d’un site internet fonctionnant sur le CMS Grav v. 2.0.21.
> Elle permet une avancée des travaux côté client hors session de travail avec l’IA.
> Elle devrait permettre en outre de réinjecter le contexte de travail en début de nouvelle session. Aussi, elle est recomposée *in extenso*, en ne retouchant dans le frontmatter que le timestamp `_dm` (pour date de modification), par l’IA  en fin de session et surchargée, côté client, pendant ou après la session.
> 
> En complément de la présente note, l’outil *i[a_request](Site_web,_outil_ia_request)* côté client, permet de régénérer une arborescence de la structure du site à réinjecter vers l’IA. Commande `tree-drawer-edt`. À charge, pour l’IA de demander l’arborescence en début de session, ou en cours de session si nécessaire.
> 
> [☚](../Index) • 
> 
> keywords: #web, #EpA, #Grav, 

# 1. Les sections

> [!note]-
> Une section correspond à un dossier dans `/users/pages`. Par exemple : `/user/pages/04.evenements`.
> Autant que possible, une section composée d'éléments similaires a un nom au pluriel. *Accueil*, *Recherche* faisant exception.
> La définition de la section est complétée dans le header de la page racine par un certains nombre d'attributs :
> ```
> section:
>     label: Journal
>     label_plural: Journaux
>     icon: fa-newspaper
>     picto: newspaper.svg
> ```
> La section à laquelle appartient une page, et ses attribut, peuvent être trouvés avec le code suivant extrait de *templates/partials/simplesearch_item.html.twig* et testé
> ```
> {# ========================================================
>    Identification de la section
>    ======================================================== #}
> {% set route_parts = page.route|trim('/')|split('/') %}
> {% set section = route_parts|first %}
> 
> {% set section_page = pages.find('/' ~ section) %}
> {% set section_data = section_page.header.section ?? {} %}
> ```

## Sections actuelles

* [x] **Accueil**
* [ ] **Journal**
  * [ ] Pour un cohérence avec les autres sections métiers, passer de '02.journal' à '02.journaux'
    * [x] Renommage de la section '02.journal' en '02.journaux'  [completion:: 2026-08-30]
    * [x] Renommage de la page '02.journaux/journal-list.md' en '02.journaux/journaux.md'  [completion:: 2026-08-30]
    * [x] Renommage du template 'templates/journal-list.html.twig' en 'templates/journaux.html.twig'  [completion:: 2026-08-30]
    * [ ] Modification éventuelle du header de '02.journaux/journaux.md'
    * [ ] Checklist des autres opérations liées
    * [ ] Vérification de cohérence
* [ ] **Billets** — futur blog / vie politique locale, à construire sur le schéma des templates de blog de Quark2
* [ ] **Événements**
* [ ] **Dossiers**
* [x] **Recherche** — fonctionnement en place

## Sections envisagées

* [ ] Privé — section réservées aux personnes logguées, rédacteurs, admins

## Pour chaque section

Pour chaque page racine (`/journal`, `/evenements`, `/dossiers`, etc.) :

* [ ] vérifier que le nom de la section est définitif
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que le nom de l'URL (slug) est cohérent
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que `header.section` existe
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que `section.label` est renseigné
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] `section.label_plural` est renseigné
	* [x] **Accueil** - inopérant  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] véridier que`section.icon` est renseigné si une icône FA est prévue
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que`section.picto` est renseigné si un pictogramme SVG existe
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que la protection en écriture de la page racine pour les non-admin, (suggestions attendues de l'IA)
	* [ ] **Accueil**
	* [ ] **Journaux**
	* [ ] **Billets**
	* [ ] **Évènements**
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que le fichier SVG, de la collection *Circle Icon* de *Elegant theme*  correspondant existe bien dans le dossier de la page racine, voir https://commons.wikimedia.org/wiki/Category:Elegant_Themes_Circle_Icons pour complément éventuel. Alerte par l'IA si, dans l'arborescence, absence de fichier *.svg* à la racine de la section.
	* [x] **Accueil**, picto personnalisé créé  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que le nom du fichier indiqué dans `section.picto` correspond exactement au fichier
	* [x] **Accueil**, picto personnalisé créé  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [x] **Évènements**  [completion:: 2026-08-30]
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que le pictogramme s'affiche correctement, notamment dans les retours de recherche
	* [x] **Accueil**, picto personnalisé créé  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que `section.icon` est renseigné pour l'affichage de l'icône FA de secours
	* [ ] **Accueil** - suggestion attentue de l'IA
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**
	* [x] **Dossiers**  [completion:: 2026-08-30]
* [ ] vérifier que l’icône FA de secours s’affiche correctement si aucun SVG n’est disponible
	* [ ] **Accueil** - suggestion attentue de l'IA
	* [ ] **Journaux**
	* [ ] **Billets**
	* [ ] **Évènements**
	* [ ] **Dossiers**
* [ ] vérifier que le titre de la page racine est cohérent avec `label` / `label_plural` et plus *littéraire*
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**
	* [ ] **Dossiers**`
* [ ] vérifier que le template de la page racine est adapté à la section
	* [x] **Accueil**  [completion:: 2026-08-30]
	* [x] **Journaux**  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**
	* [ ] **Dossiers**
* [ ] vérifier que les templates des contenus enfants sont adaptés à la section
	* [x] **Accueil**, modules [completion:: 2026-08-30]
	* [x] **Journaux**, templates 'journal', puis 'article'  [completion:: 2026-08-30]
	* [ ] **Billets**
	* [ ] **Évènements**, à voir pour une gestion des événements passés et à venir, suggestion possible de l'IA
	* [ ] **Dossiers**, templates 'folder', puis ?
* [ ] vérifier que les blueprints des pages enfants sont construits pour faciliter la saisie par les opérateurs
	* [ ] **Accueil**, modules
	* [ ] **Journaux**,
		* [ ] template 'journal'
		* [ ] template 'article'
	* [ ] **Billets**
	* [ ] **Évènements** possible de l'IA
	* [ ] **Dossiers**,
		* [ ] template 'folder'
* [ ] vérifier que les tags sont correctement disponibles sur les contenus concernés
	* [ ] **Accueil**
	* [ ] **Journaux**
		* [ ] template 'journal'
		* [ ] template 'article'
	* [ ] **Billets**
	* [ ] **Évènements**
	* [ ] **Dossiers**
* [ ] vérifier que le *breadcrumb* est correctement disponible sur les contenus concernés
	* [ ] **Accueil**
	* [ ] **Journaux**
		* [ ] template 'journal'
		* [ ] template 'article'
	* [ ] **Billets**
	* [ ] **Évènements**
	* [ ] **Dossiers**
* [ ] vérifier que le partial `tags.html.twig` est utilisé lorsque nécessaire

## Cohérence particulière pour la recherche

* [x] Route `/recherche`
* [x] Template `simplesearch_results`
* [x] Recherche `query:...`
* [x] Recherche par tag `tag:...`
* [x] Recherche dans les taxonomies
* [x] Recherche dans le titre
* [x] Recherche dans le contenu
* [x] Affichage des résultats avec `simplesearch_item.html.twig`
* [x] Pictogramme/icône de section dans les résultats
* [x] Bannière éventuelle dans les résultats
* [x] Tags cliquables dans les résultats
* [x] Barre de recherche dans le menu
* [x] Validation du nombre minimal de caractères
* [ ] Vérifier que la page `/recherche` elle-même et ses éventuels contenus ne polluent pas les résultats, suggestion de 'header' par l'IA
* [ ] Vérifier/figer la configuration SimpleSearch globale
* [ ] Vérifier le rôle exact de `searchable_types` entre configuration du plugin et configuration de la page

---

# 1. Accueil

* [ ] Vérifier le template de l'accueil
* [ ] Définir l'icône FA de l'accueil
* [ ] Définir le pictogramme SVG de l'accueil
* [ ] Vérifier le `header.section` de la page racine
* [ ] Décider si l'accueil doit réellement être traité comme une « section » dans les résultats de recherche
* [ ] Prévoir éventuellement un nuage de tags / taxonomies
* [ ] Étudier une présentation des contenus récents ou mis en avant
* [ ] Réfléchir aux blocs spécifiques de la page d'accueil

---

## 2. Section Journaux

* [x] Décider du nom définitif : `journaux` ?  [completion:: 2026-08-30]
* [ ] Adapter éventuellement l'URL
* [ ] Vérifier `label`
* [ ] Vérifier `label_plural`
* [ ] Vérifier `icon`
* [ ] Vérifier `picto`
* [ ] Vérifier le template de liste
* [ ] Vérifier le template d'un journal
* [ ] Conserver la présentation actuelle des titres :
  * date / période
  * titre
  * numéro
* [ ] Vérifier le rendu responsive
* [ ] Vérifier la couverture
* [ ] Vérifier le téléchargement
* [ ] Vérifier le sommaire
* [ ] Vérifier les tags
* [ ] Prévoir le rendu spécifique des journaux dans les résultats de recherche

---

## 3. Section Billets

> [!note]-
> La section **Billets** ou autre nom à déterminer, probablement *actualités*, sera fondée sur l’architecture de blog proposée par le thème *Qark2*
> L’implémentattion d’extention de thème pour le thème *epa* sera donc nécessaire.

### Nom

- [ ] Choisir le nom définitif :
	* [ ] `billets`
	* [x] `actualites`  [completion:: 2026-08-30]
	* [ ] `tribune`
	* [ ] autre : __________

> Suggestion : `tribune` si la rubrique assume clairement son caractère politique ; `actualites` si elle doit rester plus large et neutre.

### Infrastructure

* [ ] Créer/valider la page racine
* [ ] Définir `header.section`
* [ ] Définir `label`
* [ ] Définir `label_plural`
* [ ] Choisir une icône FA
* [ ] Créer le pictogramme SVG
* [ ] Créer le template de liste
* [ ] Créer le template d’un billet
* [ ] Définir la présentation de l’auteur
* [ ] Définir la présentation de la date
* [ ] Définir la présentation des tags
* [ ] Définir éventuellement une catégorie
* [ ] Définir le comportement des images
* [ ] Intégrer la section à la recherche

---
## 4. Section Événements

* [ ] Vérifier la cohérence de structure le la section
  * [ ] Vérifier `header.section`
  * [ ] Vérifier `label`
  * [ ] Vérifier `label_plural`
  * [ ] Vérifier `icon`
  * [ ] Vérifier `picto`
* [ ] Vérifier le template de liste
* [ ] Construire le template d’un événement
* [ ] Définir clairement les métadonnées :
  * [ ] date
  * [ ] heure
  * [ ] lieu
  * [ ] organisateur
  * [ ] éventuellement contact / inscription
* [ ] Mettre en œuvre la détection du compte rendu :
  * [ ] événement passé avant toute recherche de report
  * [ ] rechercher en priorité un enfant de template `report`
  * [ ] fallback sur l’unique enfant si aucun `report` explicite
  * [ ] ne rien sélectionner en cas de plusieurs enfants sans `report`
* [ ] Construire le template `report`
* [ ] Vérifier le parcours de création d’une page enfant avec le modèle `report`
* [ ] Étudier les onglets `Annonce` / `Retour sur...`
* [ ] Étudier `shortcode-ui` et son intégration au thème `epa`
* [ ] Prévoir l’accès direct au compte rendu depuis la liste « Retour sur... »
* [ ] Supprimer la contrainte d’arborescence annuelle `2026/`
* [ ] Étudier la convention de nommage `YYYYMMDD-description`
* [ ] Étudier si Grav permet d’aider à la génération du nom de page
* [ ] Vérifier le rendu des événements dans SimpleSearch
	* [ ] Prévoir éventuellement un rendu de résultat spécifique
* [x] Blueprint `evenement.yaml` avec `event_date` obligatoire et `event_date_end` facultatif  [completion:: 2026-09-01]
* [x] Blueprint `report.yaml`  [completion:: 2026-09-01]
* [x] Template `evenement.html.twig` testé sur un événement passé avec compte rendu  [completion:: 2026-09-01]
* [ ] Tester le filtre Twig `shortcodes` avec `shortcode-ui`
* [ ] Vérifier le comportement des tags des sous-pages incluses

### Pistes ultérieures

* [ ] Étudier un mécanisme `report.include` pour sélectionner explicitement le `report`
* [ ] Étudier un mécanisme `report.exclude` pour exclure explicitement certaines pages enfants
* [ ] Étudier un partial `openstreetmap` pour les événements
* [ ] Étudier les possibilités d’URL courte / réécriture pour les événements et QR codes

---

## 5. Section Dossiers

* [ ] Vérifier `header.section`
* [ ] Vérifier `label`
* [ ] Vérifier `label_plural`
* [ ] Vérifier `icon`
* [ ] Vérifier `picto`
* [ ] Vérifier le template de liste
* [ ] Vérifier le template d’un dossier
* [ ] Vérifier les relations entre dossiers et contenus
* [ ] Vérifier les tags
* [ ] Vérifier le rendu dans SimpleSearch

---

## 7. Pictogrammes et icônes

### Inventaire

* [ ] Accueil — FA
* [ ] Accueil — SVG
* [ ] Journaux — FA
* [ ] Journaux — SVG
* [ ] Billets — FA
* [ ] Billets — SVG
* [ ] Événements — FA
* [ ] Événements — SVG
* [ ] Dossiers — FA
* [ ] Dossiers — SVG
* [ ] Recherche — FA
* [ ] Recherche — SVG si pertinent

### Convention

* [ ] Définir une convention de nommage des fichiers SVG
* [ ] Vérifier que les SVG sont stockés au bon endroit
* [ ] Vérifier que `section.picto` pointe vers le bon fichier
* [ ] Vérifier le comportement lorsqu’un SVG est absent
* [ ] Vérifier le fallback vers `section.icon`

---

## 8. Fonctionnalité Recherche — rendu

* [x] Structure générale des résultats
* [x] Picto/icône à gauche
* [x] Texte du résultat indépendant du picto
* [x] Bannière à droite
* [x] Texte pouvant s’écouler autour de la bannière
* [x] Tags dans les résultats
* [x] Liens de tags `/recherche/tag:...`
* [x] Recherche `query:...`
* [x] Barre de recherche dans le menu
* [x] Alignement vertical avec le menu
* [x] Suppression de la loupe native gênante
* [x] CSS responsive de base
* [ ] Tester davantage sur mobile
* [ ] Tester les résultats sans image
* [ ] Tester les résultats sans picto
* [ ] Tester les résultats avec icône FA
* [ ] Tester les résultats avec titre très long
* [ ] Tester les résultats avec beaucoup de tags
* [ ] Tester les résultats avec une bannière très grande
* [ ] Tester les recherches de tag sur les événements avec compte rendu inclus

### Spécialisation future

* [ ] Définir comment identifier la section d’un résultat
* [ ] Prévoir éventuellement :
  * [ ] `search-result-journal`
  * [ ] `search-result-event`
  * [ ] `search-result-dossier`
  * [ ] `search-result-billet`
* [ ] Étudier un fallback `search-result-default`
* [ ] Spécialiser le rendu uniquement lorsqu’un besoin réel apparaît

---

## 9. Tags et taxonomies

* [x] Partial `tags.html.twig`
* [x] Tags affichés sur les pages
* [x] Tags cliquables
* [x] Recherche par tag fonctionnelle
* [ ] Vérifier les tags sur toutes les sections
* [ ] Vérifier les accents dans les tags
* [ ] Vérifier les espaces dans les tags
* [ ] Vérifier les tags contenant plusieurs mots
* [ ] Décider si certains vocabulaires doivent être normalisés
* [ ] Étudier ultérieurement un nuage de tags pour l’accueil
* [ ] Étudier la fréquence des tags
* [ ] Étudier éventuellement les taxonomies autres que `tag`

---

## 10. CSS / identité visuelle

### Palette

* [x] Violet charte
* [x] Vert charte
* [x] Variantes light / lighter / lightest
* [x] Variantes dark / darker / darkest
* [x] Orange complémentaire
* [ ] Vérifier les contrastes
* [ ] Vérifier la cohérence des couleurs dans les états `hover`, `focus`, `active`
* [ ] Décider si l’orange devient réellement un accent fonctionnel

### Typographie

* [x] Source Sans 3 déclarée
* [x] Chargement de la police vérifié dans Firefox
* [x] Réponse HTTP 200 du fichier WOFF2
* [ ] Vérifier le chargement dans Chromium
* [ ] Vérifier le rendu des différentes graisses
* [ ] Nettoyer éventuellement les anciennes variables / références inutilisées

### Thème sombre

* [ ] Vérifier les variantes de la palette en dark mode
* [ ] Corriger les éventuelles incohérences de variables
* [ ] Vérifier les contrastes
* [ ] Vérifier les tags
* [ ] Vérifier les boutons
* [ ] Vérifier les pictogrammes
* [ ] Vérifier la recherche

---

## 11. Architecture Twig

* [x] `simplesearch_item.html.twig`
* [x] `tags.html.twig`
* [x] `taxonomylist.html.twig` identifié
* [ ] Nettoyer les anciens commentaires DEBUG ( commande `grep` ou `sed` à écrire )
* [ ] Vérifier les partials devenus communs
* [ ] Éviter de dupliquer la logique dans les templates
* [x] Réserver `macros/` aux macros Twig réellement utiles  [completion:: 2026-08-30]
* [ ] Garder dans les templates principaux la logique légère liée à leur affichage
* [ ] Étudier plus tard si certaines fonctions de présentation méritent un macro

### Héritage du thème

* [ ] Décider si `epa` doit déclarer explicitement son héritage de Quark2, et injecter le code
* [ ] Vérifier ce qui est actuellement surchargé par `epa` (commande `diff` ?)
* [ ] Éviter de copier des templates Quark2 lorsqu’un héritage propre suffit
* [ ] Documenter les surcharges du thème

---

## 12. Nettoyage technique

* [ ] Supprimer les DEBUG Twig ( commande `grep` ou `sed` à écrire )
* [ ] Supprimer les anciens CSS devenus inutiles
* [ ] Rechercher les classes CSS orphelines (outil python ?)
* [ ] Rechercher les variables CSS non définies
* [ ] Rechercher les variables CSS définies mais inutilisées (script bash ?)
* [ ] Vérifier les doublons dans `custom.css`
* [ ] Vérifier les `!important` et conserver uniquement ceux réellement nécessaires
* [ ] Vider le cache Grav après les modifications structurantes
* [ ] Tester en navigation privée après les changements CSS/JS importants
* [ ] Voir si, pour les nettoyages, des scripts peuvent être écrits.

---

# TODO — plus tard

* [x] Nuage de tags sur l’accueil  [completion:: 2026-09-01]
* [x] Éventuellement visualisation de la popularité des tags  [completion:: 2026-09-01]
* [ ] Construction complète du blog / des billets
* [ ] Icône FA du blog
* [ ] Pictogramme SVG du blog — collection Circle Icon, voir https://commons.wikimedia.org/wiki/Category:Elegant_Themes_Circle_Icons
* [x] Rendu spécialisé des résultats de recherche par section:, genre `templates/partial/simplesearch_journal.html.twig`  [completion:: 2026-09-01]
* [ ] Recherche avancée éventuelle
* [ ] Recherche par auteur éventuelle
* [ ] Filtres de recherche éventuels
* [ ] Amélioration de la présentation mobile
* [ ] Finalisation du thème sombre
* [ ] Revue générale de l’accessibilité
* [ ] Revue générale du HTML produit
* [ ] Optimisation des performances
* [ ] Documentation interne du thème EPA
* [ ] Création d'un `partials/openstreetmap.html.twig`

# À ne pas faire maintenant

* [ ] Ne pas complexifier SimpleSearch tant que `query:` et `tag:` fonctionnent
* [ ] Ne pas spécialiser tous les résultats de recherche avant d’avoir un besoin concret
* [ ] Ne pas construire le nuage de tags avant d’avoir suffisamment de contenu
* [ ] Ne pas multiplier les macros Twig pour quelques lignes de logique
* [ ] Ne pas retoucher le CSS de la recherche tant que le rendu actuel reste satisfaisant


> [!references]-
>
> * [tutoriel Grav](https://learn.getgrav.) (en) • 
> * [Pictos Circle Icon](https://commons.wikimedia.org/wiki/Category:Elegant_Themes_Circle_Icons) •