From 36c4ce7ffc5d54e6a977892d9a3fefa7f7550f79 Mon Sep 17 00:00:00 2001 From: Nicolas MASSE Date: Sun, 4 Oct 2026 11:58:57 +0200 Subject: [PATCH] =?UTF-8?q?Passage=20=C3=A0=20Eleventy=20et=20=C3=A9dition?= =?UTF-8?q?=20des=20tarifs=20et=20contacts=20via=20Pages=20CMS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Déplacement du site de public/ vers src/ ; la page devient un gabarit Nunjucks (src/index.njk) généré par Eleventy dans _site/. - Saison, licence et cotisations extraites dans src/_data/saison.yml ; bureau, adresse postale et email dans src/_data/contacts.yml. - Ajout de .pages.yml : formulaires Pages CMS en français, avec validation des saisies (saison, prix, téléphone, code postal, email). - netlify.toml : build « npm run build » (Node 22), publication de _site. - README : notice d'utilisation de Pages CMS, nouvelle structure du dépôt et suppression des données dupliquées devenues obsolètes. Co-Authored-By: Claude Opus 5.5 --- .gitignore | 2 + .pages.yml | 126 ++ README.md | 98 +- eleventy.config.js | 35 + netlify.toml | 6 +- package-lock.json | 1709 +++++++++++++++++++++++++++ package.json | 14 + src/_data/contacts.yml | 19 + src/_data/saison.yml | 26 + public/index.html => src/index.njk | 114 +- {public => src}/infos-utiles4.png | Bin {public => src}/logo-cc-conches.png | Bin {public => src}/logo-ffsv.jpeg | Bin {public => src}/logo.png | Bin {public => src}/photo-gym1.png | Bin {public => src}/photo-gym2.jpeg | Bin {public => src}/visuel-club.png | Bin 17 files changed, 2027 insertions(+), 122 deletions(-) create mode 100644 .gitignore create mode 100644 .pages.yml create mode 100644 eleventy.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/_data/contacts.yml create mode 100644 src/_data/saison.yml rename public/index.html => src/index.njk (83%) rename {public => src}/infos-utiles4.png (100%) rename {public => src}/logo-cc-conches.png (100%) rename {public => src}/logo-ffsv.jpeg (100%) rename {public => src}/logo.png (100%) rename {public => src}/photo-gym1.png (100%) rename {public => src}/photo-gym2.jpeg (100%) rename {public => src}/visuel-club.png (100%) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3a799fb --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +_site/ diff --git a/.pages.yml b/.pages.yml new file mode 100644 index 0000000..3320ed9 --- /dev/null +++ b/.pages.yml @@ -0,0 +1,126 @@ +# Configuration de Pages CMS (https://app.pagescms.org) +# Définit les formulaires permettant de modifier le site sans toucher au code. + +content: + - name: saison + label: Saison et tarifs + type: file + path: src/_data/saison.yml + format: yaml + fields: + - name: annee + label: Saison en cours + type: string + required: true + description: "Format : 2026-2027" + pattern: + regex: "^\\d{4}-\\d{4}$" + message: "Indiquez la saison au format 2026-2027" + - name: licence + label: Licence FFEPGV (obligatoire) + type: object + fields: + - name: prix + label: Prix de la licence (€) + type: string + required: true + description: "Exemple : 29,80" + pattern: + regex: "^\\d+([,.]\\d{1,2})?$" + message: "Indiquez un montant comme 29,80 ou 100 (sans le symbole €)" + - name: avantages + label: Ce qui est inclus + type: string + list: true + - name: cotisations + label: Cotisations + type: object + description: "Une carte par formule, affichée dans l'ordre de la liste. L'icône (1, 2, 3…) suit cet ordre." + list: + collapsible: + collapsed: true + summary: "{fields.titre} : {fields.prix} €" + fields: + - name: titre + label: Intitulé + type: string + required: true + description: "Exemple : 1 cours / semaine" + - name: prix + label: Cotisation annuelle (€) + type: string + required: true + description: "Exemple : 100,00 (la licence est ajoutée automatiquement sous le prix)" + pattern: + regex: "^\\d+([,.]\\d{1,2})?$" + message: "Indiquez un montant comme 100,00 ou 100 (sans le symbole €)" + - name: populaire + label: Mettre en avant (badge « Le plus populaire ») + type: boolean + description: "À cocher sur une seule formule" + - name: avantages + label: Points forts + type: string + list: true + + - name: contacts + label: Contacts + type: file + path: src/_data/contacts.yml + format: yaml + fields: + - name: bureau + label: Membres du bureau + type: object + list: + collapsible: + collapsed: true + summary: "{fields.role} : {fields.prenom} {fields.nom}" + fields: + - name: role + label: Fonction + type: string + required: true + description: "Exemple : Présidente, Trésorier, Secrétaire…" + - name: prenom + label: Prénom + type: string + required: true + - name: nom + label: Nom + type: string + required: true + description: "Affiché automatiquement en majuscules" + - name: telephone + label: Téléphone + type: string + description: "Format : 06 12 34 56 78 (laisser vide pour ne pas afficher de numéro)" + pattern: + regex: "^(0\\d( \\d{2}){4})?$" + message: "Indiquez le numéro au format 06 12 34 56 78" + - name: adresse + label: Adresse postale + type: object + fields: + - name: rue + label: Numéro et rue + type: string + required: true + - name: code_postal + label: Code postal + type: string + required: true + pattern: + regex: "^\\d{5}$" + message: "Le code postal comporte 5 chiffres" + - name: ville + label: Ville + type: string + required: true + - name: email + label: Adresse email + type: string + required: true + pattern: + regex: "^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$" + message: "Adresse email invalide" diff --git a/README.md b/README.md index 00a568c..2d6d1ce 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ Site statique Bootstrap 5 de l'association **Gymnastique Volontaire de Conches-e | Dépôt GitHub | https://github.com/nmasse-itix/gvdc-site | | Espace FFEPGV | https://ffepgv.fr/ | | Page Intramuros | https://www.conches-en-ouche.fr/associations/175709 | +| Édition des tarifs et contacts (Pages CMS) | https://app.pagescms.org | --- @@ -20,8 +21,11 @@ Site statique Bootstrap 5 de l'association **Gymnastique Volontaire de Conches-e ``` gvdc-site/ -├── public/ ← Dossier publié par Netlify -│ ├── index.html ← Page unique du site (Bootstrap 5) +├── src/ ← Sources du site +│ ├── index.njk ← Page unique du site (Bootstrap 5, gabarit Nunjucks) +│ ├── _data/ ← Données modifiables via Pages CMS +│ │ ├── saison.yml ← Saison en cours, licence et cotisations +│ │ └── contacts.yml ← Bureau, adresse postale, email │ ├── visuel-club.png ← Logo/silhouette du club (navbar) │ ├── logo.png ← Badge Label Qualité Sport-Santé FFEPGV │ ├── logo-ffsv.jpeg ← Logo Fédération Française Sport Vitalité @@ -30,29 +34,35 @@ gvdc-site/ │ ├── photo-gym1.png ← Photo galerie (séance détente) │ └── photo-gym2.jpeg ← Photo galerie (séance renforcement) │ -├── netlify.toml ← Configuration Netlify +├── .pages.yml ← Configuration des formulaires Pages CMS +├── eleventy.config.js ← Configuration Eleventy (générateur du site) +├── package.json ← Dépendances Node.js (Eleventy) +├── netlify.toml ← Configuration Netlify (build + en-têtes) └── README.md ← Ce fichier ``` -> **Règle importante** : seul le dossier `public/` est déployé. Tout fichier ajouté à la racine du dépôt reste privé et n'est pas accessible sur le site. +> **Règle importante** : Netlify génère le site dans `_site/` à partir de `src/`. Seuls la page et les images de `src/` sont publiées ; les fichiers à la racine du dépôt et les données brutes de `src/_data/` ne sont pas accessibles sur le site. --- ## Déploiement -Le site est hébergé sur **Netlify** avec déploiement continu : chaque `git push` sur la branche `main` déclenche automatiquement une mise en ligne. +Le site est hébergé sur **Netlify** avec déploiement continu : chaque `git push` (ou chaque enregistrement dans Pages CMS) sur la branche `main` déclenche automatiquement la génération du site par Eleventy (`npm run build`) puis sa mise en ligne. ### Première installation (à faire une seule fois) ```bash git clone git@github.com:nmasse-itix/gvdc-site.git cd gvdc-site +npm install ``` +Prérequis : Node.js 18 ou plus récent (Netlify utilise Node.js 22). + ### Publier une modification ```bash -git add public/index.html # ou les fichiers modifiés +git add src/index.njk # ou les fichiers modifiés git commit -m "Description du changement" git push ``` @@ -63,41 +73,61 @@ Netlify déploie en 1 à 2 minutes. Le statut du déploiement est visible sur ht ```bash cd gvdc-site -python3 -m http.server 8080 --bind 0.0.0.0 --directory public +npm start ``` -Puis ouvrir http://localhost:8080 dans un navigateur. +Puis ouvrir http://localhost:8080 dans un navigateur. La page se recharge automatiquement à chaque modification. + +--- + +## Mettre à jour les tarifs, la saison et les contacts (sans compétence technique) + +La saison en cours, les tarifs, les membres du bureau, l'adresse postale et l'email se modifient depuis **[Pages CMS](https://app.pagescms.org)**, une interface web gratuite qui enregistre les modifications dans le dépôt GitHub à votre place. + +### Accès (à faire une seule fois) + +1. La personne chargée des mises à jour crée un compte gratuit sur https://github.com. +2. Un administrateur du dépôt l'invite comme collaboratrice : sur GitHub, *Settings → Collaborators → Add people*. Elle accepte l'invitation reçue par email. +3. Elle se connecte sur https://app.pagescms.org avec *Sign in with GitHub* et choisit le dépôt `gvdc-site` (à la première connexion, Pages CMS demande d'autoriser l'accès au dépôt). + +### Faire une modification + +1. Ouvrir https://app.pagescms.org et choisir le dépôt `gvdc-site`. +2. Dans le menu de gauche, choisir **Saison et tarifs** ou **Contacts**. +3. Modifier les champs : + - **Saison en cours** : au format `2026-2027`. + - **Prix** : sans le symbole €, par exemple `29,80` ou `100`. + - **Cotisations** et **Membres du bureau** : le bouton *Add* ajoute une entrée, la corbeille la supprime, et les poignées permettent de changer l'ordre d'affichage. + - **Téléphone** : au format `06 12 34 56 78`. +4. Cliquer sur **Save**. +5. Le site en ligne est à jour **1 à 2 minutes plus tard**. Recharger la page pour vérifier. + +> En cas d'erreur, rien n'est perdu : chaque enregistrement est conservé dans l'historique GitHub et peut être annulé par un administrateur. --- -## Modifier le contenu du site +## Modifier le reste du contenu (développeurs) -Tout le contenu est dans **`public/index.html`**. Le fichier est organisé en sections clairement délimitées par des commentaires : +La mise en page et les autres textes sont dans **`src/index.njk`** (HTML + balises [Nunjucks](https://mozilla.github.io/nunjucks/) `{{ … }}` / `{% … %}` qui insèrent les données de `src/_data/`). Le fichier est organisé en sections clairement délimitées par des commentaires : ``` ← Accueil ← Horaires - + ← données : src/_data/saison.yml - + ← données : src/_data/contacts.yml ``` +Pour rendre un nouvel élément modifiable dans Pages CMS : l'ajouter dans un fichier de `src/_data/`, l'utiliser dans `src/index.njk`, puis déclarer le champ correspondant dans `.pages.yml` ([documentation](https://pagescms.org/docs/configuration/)). + ### Mettre à jour les horaires Chercher la section `id="activites"` et modifier les blocs `.schedule-card` (jour, heure, salle, ville). -### Mettre à jour les tarifs - -Chercher la section `id="tarifs"` et modifier les valeurs dans les `.price-amount` et la liste des avantages. - -### Mettre à jour les contacts - -Chercher la section `id="contact"` et modifier les noms, titres et numéros de téléphone dans les `.contact-card`. - ### Ajouter une actualité Chercher la section `id="actualites"` et remplacer le bloc `.p-5.rounded-4.bg-light` (message "Aucune actualité") par une ou plusieurs cartes Bootstrap : @@ -114,7 +144,7 @@ Chercher la section `id="actualites"` et remplacer le bloc `.p-5.rounded-4.bg-li ### Ajouter une photo à la galerie -1. Copier l'image dans `public/` (formats acceptés : JPG, PNG, WebP). +1. Copier l'image dans `src/` (formats acceptés : JPG, PNG, WebP). 2. Dans la section `id="galerie"`, dupliquer un bloc `.col-md-6` et adapter le `src` et le `alt`. ```html @@ -137,16 +167,8 @@ Chercher la section `id="actualites"` et remplacer le bloc `.p-5.rounded-4.bg-li | Numéro d'association | 27015 | | Fédération | FFEPGV (1re fédération non-compétitive, reconnue d'utilité publique) | | Label | Qualité Club Sport-Santé 2025-2029 | -| Email | gymnastiquevolontaireconches@gmail.com | -| Adresse | 39 bis rue François Décorchemont, 27190 Conches-en-Ouche | -### Bureau - -| Rôle | Nom | Téléphone | -|---|---|---| -| Président | Didier MASSÉ | 06 87 75 11 15 | -| Secrétaire | Patricia ODEN | 06 84 44 03 07 | -| Trésorière | Monique LORIEUL | 06 20 17 47 54 | +Saison, tarifs, bureau, adresse postale et email : voir `src/_data/saison.yml` et `src/_data/contacts.yml` (ou Pages CMS). ### Moniteur @@ -162,14 +184,6 @@ Chercher la section `id="actualites"` et remplacer le bloc `.p-5.rounded-4.bg-li Séances hors congés scolaires. -### Tarifs 2025-2026 - -| Poste | Montant | -|---|---| -| Licence FFEPGV (obligatoire) | 29,80 € | -| Cotisation 1 cours / semaine | 100,00 € | -| Cotisation 2 cours / semaine | 155,00 € | - --- ## Technologies utilisées @@ -178,10 +192,12 @@ Séances hors congés scolaires. |---|---|---| | [Bootstrap](https://getbootstrap.com) | 5.3.3 | Framework CSS/JS (chargé via CDN) | | [Bootstrap Icons](https://icons.getbootstrap.com) | 1.11.3 | Icônes (chargées via CDN) | -| Netlify | — | Hébergement et déploiement continu | +| [Eleventy](https://www.11ty.dev) | 3.x | Générateur de site statique (assemble la page et les données) | +| [Pages CMS](https://pagescms.org) | — | Interface d'édition des données (gratuite, sans hébergement) | +| Netlify | — | Hébergement, génération et déploiement continu | | GitHub | — | Dépôt de code source | -Le site ne nécessite **aucun serveur**, **aucune base de données** et **aucune dépendance Node.js**. Toute modification se fait directement dans `public/index.html`. +Le site ne nécessite **aucun serveur** ni **aucune base de données** : Eleventy produit une page HTML statique au moment du déploiement, et Pages CMS se contente de modifier les fichiers YAML du dépôt. --- @@ -194,7 +210,7 @@ Le site ne nécessite **aucun serveur**, **aucune base de données** et **aucune | Fond clair | `#f5f2fb` | | Police | Système (Bootstrap par défaut) | -Les couleurs sont définies en variables CSS au début du bloc `