Pages et parcours

Le site compte 14 pages HTML, toutes à la racine de frontend-office-tourisme/. Chaque page est une coquille : elle contient le <head>, le lien d'évitement, les conteneurs vides de l'en-tête et du pied de page, et le contenu propre à la page. Le JavaScript remplit le reste au chargement (voir Architecture JavaScript).

#Gabarit commun

Toutes les pages partagent la même structure :

L'attribut data-page sélectionne le module JavaScript de la page. data-nav force l'entrée de menu marquée aria-current="page" quand elle diffère de data-page : un article est rattaché à « Découvrir », la commande à « Billetterie ». data-overlay="true", présent sur l'accueil seulement, pose l'en-tête en surimpression du hero.

#Les 14 pages

Les trois dernières pages sont statiques : main.js ne trouve pas de module pour leur data-page et se contente de poser l'en-tête, le pied de page et les comportements communs.

#Paramètres d'URL

Les paramètres sont lus par params() de modules/utils.js et ne sont jamais injectés tels quels dans le HTML : les identifiants servent de clé de recherche dans les tableaux de données, et les textes affichés passent par escapeHtml.

#Navigation

L'en-tête est construit à partir de trois tableaux de data/site.js :

Le pied de page reprend FOOTER_TOP, FOOTER_LINKS, FOOTER_BOTTOM, OPENING_HOURS, SOCIALS et LABELS du même fichier. Modifier un lien du menu ou du pied de page se fait donc à un seul endroit, pour les 14 pages.

#Parcours types

#Préparer une sortie

flowchart LR
    A["Accueil, agenda Aujourd'hui"] --> B["sortir.html, filtres et recherche"]
    B --> C["fiche.html?event=..."]
    C -->|"événement payant"| D["commande.html?ajout=..."]
    C -->|"événement gratuit"| E["Fichier .ics téléchargé"]
    C -->|"Grande Loterie citoyenne"| F["Frontend web BlockLucky"]
    C --> G["Favoris"]

L'agenda de l'accueil s'ouvre sur le filtre « Aujourd'hui ». S'il ne trouve aucun événement à la date du jour, il affiche tous les événements plutôt qu'une liste vide (fonction renderAgenda de pages/home.js). La page Sortir, elle, affiche « Aucune sortie pour cette sélection » : les deux pages partagent la fonction filterAgenda mais pas ce repli.

Le bouton d'action d'une fiche événement dépend des données, dans cet ordre (fonction eventAction de pages/fiche.js) :

1. l'événement porte lottery: true : lien « Accéder à la loterie » vers SITE.lotteryAppUrl, dans un nouvel onglet ;
2. une offre de la billetterie référence l'événement (event) : lien « Réserver » vers commande.html?ajout=<offre> ;
3. sinon : bouton « Ajouter à mon agenda », qui génère un fichier .ics.

#Trouver un restaurant ou un hébergement

Les pages Manger et Dormir partagent le module pages/listing.js, configuré par l'objet CONFIG :

Communs aux deux pages :

• trois filtres rapides : Best-sellers (bestSeller), Testé et approuvé (tested), Tourisme éco-responsable (eco) ;
• recherche plein texte sans accents (normalize) sur le nom, le type, le quartier et la description ;
• 9 résultats par page (PAGE_SIZE) ;
• au-delà de 8 options, un groupe de filtres se replie derrière « Voir N plus » (VISIBLE_OPTIONS) ;
• les valeurs et compteurs des filtres sont calculés à partir des données : ajouter un restaurant d'un nouveau type crée l'option sans toucher au code.

Les options d'un même groupe se combinent par « ou », les groupes entre eux par « et ».

#Réserver un billet

Le parcours billetterie, du choix des quantités jusqu'aux billets imprimables, est décrit dans Billetterie et commande.

#Garder des favoris

Chaque carte de lieu ou d'événement porte un bouton cœur (data-fav="place:<id>" ou data-fav="event:<id>"). Un seul écouteur délégué sur le document gère tous les cœurs du site (modules/favorites.js). La page Favoris relit la liste et se met à jour à chaque événement favorites:change.

#Pages statiques

infos-pratiques.html et mentions-legales.html sont rédigées directement en HTML. Leurs sections portent des identifiants utilisés comme ancres par les menus :

Les boutons de contact des infos pratiques ouvrent des liens mailto: vers des adresses fictives (contact@, groupes@, partenaires@tourisme-etherbay.fr). Aucun formulaire du site n'envoie de données.

La page 404.html est servie par nginx pour toute ressource introuvable (error_page 404 /404.html, voir Servir et déployer). Elle référence ses feuilles de style par des chemins relatifs (assets/css/main.css) : pour une URL inexistante située dans un sous-dossier, comme /a/b, le navigateur cherche alors /a/assets/css/main.css et la page s'affiche sans mise en forme. Les URL à la racine ne sont pas concernées.

#Ajouter une page

1. Copier une page statique existante, par exemple favoris.html, pour conserver le gabarit commun.
2. Changer <title>, <meta name="description"> et data-page.
3. Si la page a de la logique, créer assets/js/pages/<nom>.js exportant une fonction par défaut, puis l'enregistrer dans l'objet PAGES de main.js.
4. Ajouter le lien dans MAIN_NAV, FOOTER_LINKS ou le tableau voulu de data/site.js.
5. Copier le fichier dans l'image Docker : le Dockerfile copie déjà *.html, rien à faire.
6. Lancer la vérification des liens de la CI : node ../.github/scripts/check-static-links.mjs . depuis le dossier du site (voir Servir et déployer).