(Français)
Decap CMS has been successfully installed and configured for the Digital Accessibility Toolkit. The CMS manages individual resource items for the Additional Resources page with full bilingual support (English/French).
Admin Interface:
src/admin/index.html- CMS admin interface entry pointsrc/admin/config.yml-⚠️ Auto-generated - CMS configuration (DO NOT EDIT MANUALLY)src/admin/README.md- Admin folder documentation
Generator Script:
scripts/generate-cms-config.js- Generates config.yml from data files- Reads from:
src/_data/tagList.js,roles.js,resourceTopics.js - Auto-runs on:
npm run build,npm run dev,npm run start-cms - Manual generation:
npm run cms:configornpm run cms:config -- --local - Output:
src/admin/config.yml(ignored by git)
- Reads from:
Resources System:
src/resources/en/*.md- English resource items (frontmatter-only)src/resources/fr/*.md- French resource items (frontmatter-only)src/resources/resources.11tydata.js- Auto-toggle generation for cross-language linking
Template Pages:
src/main/en/resources-and-tools/additional-resources.njk- Dynamic template for EN pagesrc/main/fr/ressources-et-outils/ressources-additionnelles.njk- Dynamic template for FR pagesrc/main/en/resources-and-tools/additional-resources.11tydata.js- Custom TOC generation for ENsrc/main/fr/ressources-et-outils/ressources-additionnelles.11tydata.js- Custom TOC generation for FR
Data & Configuration:
src/_data/resourceTopics.js- Topic definitions with labels, order, descriptions, and helper functionseleventy/plugins/collections-plugin.js- Resource collections with topic label-to-key conversion
Documentation:
docs/implementation/decap-cms-implementation.md- Complete implementation detailsDECAP-CMS-SETUP.md- This quick setup guide
package.json- Added decap-cms-app and netlify-identity-widget dependencieseleventy/plugins/collections-plugin.js- Added 4 resource collectionseleventy/config/passthrough.js- Added admin folder passthroughsrc/_includes/partials/head.njk- Added Netlify Identity widgetsrc/main/en/resources-and-tools/additional-resources.njk- Dynamic template for displaying resourcessrc/main/fr/ressources-et-outils/ressources-additionnelles.njk- Dynamic template for displaying resources
All CMS users must:
- Have a GitHub account
- Have write access to the
gc-da11yn/gc-da11yn.github.iorepository - Be added as a collaborator or be part of a team with write permissions
- Go to repository settings: https://github.com/gc-da11yn/gc-da11yn.github.io/settings/access
- Click "Add people" or "Manage access"
- Search for the user's GitHub username
- Grant "Write" or "Maintain" role
- User will receive an invitation to accept
-
Navigate to CMS:
https://a11ycanada.netlify.app/admin/ -
Click "Login with GitHub"
-
Authorize Decap CMS: First-time users will see a GitHub OAuth authorization screen requesting access to "Public and private" repositories
⚠️ Important: Despite the broad warning message, Decap CMS only accesses thegc-da11yn/gc-da11yn.github.iorepository specified in the configuration. It cannot read or write to your other repositories. This is standard behavior for GitHub OAuth Apps used by Git-based CMS tools. -
Click "Authorize" to grant the CMS access
-
Start editing: You'll be redirected to the CMS dashboard
The simplest way to test the CMS locally:
npm run start-cmsThis single command:
- Generates
config.ymlwithlocal_backend: true - Starts
decap-serveron port 8081 - Starts Eleventy dev server
- Access CMS at:
http://localhost:{PORT}/admin/- Port is auto-detected (usually 8080, but may vary if port is in use)
- Check console output for actual URL
If you need more control:
-
Generate config for local development:
npm run cms:config -- --local
-
Start the local backend (in one terminal):
npx decap-server
-
Start Eleventy (in another terminal):
npm start
-
Access:
http://localhost:{PORT}/admin/- Port is auto-detected (usually 8080, check console output for actual URL)
To test with production-like config (no local backend):
npm run build # Generates config without local_backend
npm run start-prod # Serves the built siteThe CMS uses an editorial workflow with pull requests for content review:
- Draft → Work on content (saved locally in browser)
- In Review → Creates a pull request automatically when you click "Set status: In review"
- Ready → Marks PR as ready (approval happens in GitHub, not CMS)
Important: Final approval and merging must be done in GitHub, not through the CMS interface.
- Log in at
https://a11ycanada.netlify.app/admin/with GitHub - Click Resources collection
- Click New Resources
- Fill in the fields:
- Title: Switch between EN/FR tabs to enter both languages
- Description: Enter brief description in both languages (supports HTML like
<abbr>,<strong>) - URL: Enter link (shared field, appears once)
- Topic: Select category from dropdown (full labels: "Learning", "Development", etc.)
- Language Availability: Choose "both" (default), "en", or "fr"
- Internal Links: Toggle on if resource requires GC network access
- Resource Type: Select "Standard resource" (default), "Parent resource", or "Child resource"
- Parent Resource: If child resource, select the parent from filtered dropdown
- Save to create a draft
- Set status: In review → This creates a pull request
- Netlify creates a deploy preview for the PR automatically
- Review and approve in GitHub → Merge the PR to publish changes
- Log in to CMS with GitHub
- Click Resources collection
- Find and click the resource to edit
- Update fields as needed (use language tabs for title/description)
- Save and Set status: In review to create/update PR
- Further edits will update the same PR branch
- Merge PR in GitHub to publish changes
Understanding Draft Behavior:
- Drafts appear in all topic views: When a resource is in draft status (not yet merged), it will appear at the top of every topic filter in the CMS UI with a "Draft" label. This is normal behavior and helps you find your drafts regardless of which filter you're using.
- Filter drafts only: Use the "Drafts" filter at the top of the view filters to see only your draft resources
- After merging: Once you merge the PR, the resource becomes published and will only appear under its assigned topic
Draft Workflow:
- Create new resource → Automatically starts as draft
- Edit and save → Remains in draft status
- Set status to "In review" → Creates PR, still shows as draft in CMS
- Merge PR in GitHub → Draft becomes published, appears only in correct topic
- both (default): Resource appears on both EN and FR pages without language indicator
- en: English-only resource, appears on FR page with "(en anglais seulement)" label
- fr: French-only resource, appears on EN page with "(in French only)" label
Resources are organized into 6 topics (alphabetically sorted per language):
English: Accessible meetings and events, Development, Learning, Policy, Procurement, Services
French: Apprentissage, Approvisionnement, Développement, Politique, Réunions et événements accessibles, Services
- Topic organization: Filter by 6 topics (Learning, Development, etc.) or group resources by topic
- View controls: Use
view_filtersfor quick filtering, toggle "Group by Topic" for organized display - Parent/child resources: Create hierarchical resource collections (parent with related children)
- Bilingual entry with language tabs for title and description
- Shared metadata for URL, topic, and flags
- Auto-toggle generation for cross-language linking
- Media library for future image uploads
- Editorial workflow with pull request creation
- Deploy previews for PR review via Netlify
- GitHub attribution: All commits show your GitHub username
- GitHub repository access required: Only users with write permissions can use CMS
- Git attribution: All changes tracked to individual GitHub accounts
- Pull request workflow: Mandatory review process before merging
- Role-based access: Managed through GitHub repository permissions
For complete details, see:
- Implementation docs:
docs/implementation/decap-cms-implementation.md - Admin folder README:
src/admin/README.md - Decap CMS docs: decapcms.org/docs
- GitHub backend docs: decapcms.org/docs/github-backend
The CMS uses GitHub backend with editorial workflow:
backend:
name: github
repo: gc-da11yn/gc-da11yn.github.io
branch: mainHow it works:
- Pull requests are created automatically when you set status to "In review"
- PRs target the
mainbranch - Netlify creates deploy previews for each PR
- Merge PRs in GitHub to publish changes
- Resources (Bilingual i18n collection)
- Location:
src/resources/en/andsrc/resources/fr/ - Structure: Frontmatter-only markdown files
- Single entry point with language tabs for title and description
- Auto-generated cross-language toggle links
- Topic organization: Full labels stored in frontmatter ("Learning"), converted to keys by collections plugin
- Parent/child support:
resourceTypefield (standard/parent/child),parentResourcerelation - View controls: Filter by topic with
view_filters, group by topic withview_groups
- Location:
- Additional Resources pages query resources from Eleventy collections via
resourcesByTopicEnandresourcesByTopicFr - Topic labels stored as full text in frontmatter ("Learning", "Development"), converted to keys by collections plugin
- Topics sorted alphabetically in each language on rendered pages
- Parent/child hierarchy: Parent resources shown with nested child resources as sublist items
- All resources shown on both language pages
- Language indicators for single-language resources:
- EN page shows "(in French only)" for FR-only resources
- FR page shows "(en anglais seulement)" for EN-only resources
- Topic descriptions appear below some topic headings (e.g., "Accessible meetings and events")
- Upload location:
src/_images/ - Public URL:
/img/ - Automatically handled by Eleventy build
- Ensure
decap-serveris running - Check
local_backend: trueis uncommented in config - Verify Eleventy dev server is running
- Verify you have a GitHub account
- Check you have write access to the repository
- Try logging out and back in to refresh GitHub OAuth
- Check if you clicked "Set status: In review" to create the PR
- Verify the PR was created in GitHub
- Wait for Netlify deploy preview to build
- Pull requests must be merged in GitHub, not in the CMS
- Check that PR has been approved by required reviewers
- Verify CI checks are passing
For questions or issues:
- Check
docs/implementation/decap-cms-implementation.md - Review Decap CMS documentation
- Verify GitHub repository permissions
- Contact the development team
Status: ✅ Ready for production CMS URL: https://a11ycanada.netlify.app/admin/ Branch: feature/decapCMS
(English)
Decap CMS a été installé et configuré avec succès pour la Boîte à outils de l'accessibilité numérique. Le CMS gère les éléments de ressources individuels pour la page Ressources additionnelles avec un support bilingue complet (anglais/français).
Interface d'administration :
src/admin/index.html- Point d'entrée de l'interface d'administration CMSsrc/admin/config.yml-⚠️ Auto-généré - Configuration CMS (NE PAS MODIFIER MANUELLEMENT)src/admin/README.md- Documentation du dossier d'administration
Script générateur :
scripts/generate-cms-config.js- Génère config.yml à partir des fichiers de données- Lit depuis :
src/_data/tagList.js,roles.js,resourceTopics.js - S'exécute automatiquement sur :
npm run build,npm run dev,npm run start-cms - Génération manuelle :
npm run cms:configounpm run cms:config -- --local - Sortie :
src/admin/config.yml(ignoré par git)
- Lit depuis :
Système de ressources :
src/resources/en/*.md- Éléments de ressources en anglais (frontmatter uniquement)src/resources/fr/*.md- Éléments de ressources en français (frontmatter uniquement)src/resources/resources.11tydata.js- Génération automatique de bascule pour liaison inter-langues
Pages modèles :
src/main/en/resources-and-tools/additional-resources.njk- Modèle dynamique pour la page ENsrc/main/fr/ressources-et-outils/ressources-additionnelles.njk- Modèle dynamique pour la page FR
Données et configuration :
src/_data/resourceTopics.js- Définitions de sujets avec étiquettes, ordre, descriptions et fonctions d'aideeleventy/plugins/collections-plugin.js- Collections de ressources avec conversion étiquette-vers-clésrc/pages/en/additional-resources.11tydata.js- Génération de TDM personnalisée pour page ENsrc/pages/fr/ressources-additionnelles.11tydata.js- Génération de TDM personnalisée pour page FR
Documentation :
docs/implementation/decap-cms-implementation.md- Détails complets de mise en œuvreDECAP-CMS-SETUP.md- Ce guide de configuration rapide
package.json- Ajout des dépendances decap-cms-app et netlify-identity-widgeteleventy/plugins/collections-plugin.js- Ajout de 4 collections de ressourceseleventy/config/passthrough.js- Ajout de passthrough pour le dossier adminsrc/_includes/partials/head.njk- Ajout du widget Netlify Identitysrc/main/en/resources-and-tools/additional-resources.njk- Converti de .md à .njksrc/main/fr/ressources-et-outils/ressources-additionnelles.njk- Converti de .md à .njk
Tous les utilisateurs du CMS doivent :
- Avoir un compte GitHub
- Avoir un accès en écriture au dépôt
gc-da11yn/gc-da11yn.github.io - Être ajouté comme collaborateur ou faire partie d'une équipe avec des permissions d'écriture
- Accédez aux paramètres du dépôt : https://github.com/gc-da11yn/gc-da11yn.github.io/settings/access
- Cliquez sur "Add people" ou "Manage access"
- Recherchez le nom d'utilisateur GitHub de l'utilisateur
- Accordez le rôle "Write" ou "Maintain"
- L'utilisateur recevra une invitation à accepter
-
Accédez au CMS :
https://a11ycanada.netlify.app/admin/ -
Cliquez sur "Login with GitHub"
-
Autorisez Decap CMS : Les nouveaux utilisateurs verront un écran d'autorisation OAuth GitHub demandant l'accès aux dépôts "Public and private"
⚠️ Important : Malgré le message d'avertissement large, Decap CMS accède uniquement au dépôtgc-da11yn/gc-da11yn.github.iospécifié dans la configuration. Il ne peut pas lire ou écrire dans vos autres dépôts. Il s'agit du comportement standard des applications OAuth GitHub utilisées par les outils CMS basés sur Git. -
Cliquez sur "Authorize" pour accorder l'accès
-
Commencez à éditer : Vous serez redirigé vers le tableau de bord du CMS
La façon la plus simple de tester le CMS localement :
npm run start-cmsCette seule commande :
- Génère
config.ymlaveclocal_backend: true - Démarre
decap-serversur le port 8081 - Démarre le serveur de développement Eleventy
- Accédez au CMS à :
http://localhost:{PORT}/admin/- Le port est détecté automatiquement (généralement 8080, mais peut varier si le port est utilisé)
- Vérifiez la sortie de la console pour l'URL réelle
Si vous avez besoin de plus de contrôle :
-
Générez la configuration pour le développement local :
npm run cms:config -- --local
-
Démarrez le backend local (dans un terminal) :
npx decap-server
-
Démarrez Eleventy (dans un autre terminal) :
npm start
-
Accès :
http://localhost:{PORT}/admin/- Le port est détecté automatiquement (généralement 8080, mais peut varier si le port est utilisé)
- Vérifiez la sortie de la console pour l'URL réelle
Pour tester avec une configuration similaire à la production (sans backend local) :
npm run build # Génère la configuration sans local_backend
npm run start-prod # Sert le site construitLe CMS utilise un flux de travail éditorial avec des demandes de tirage (pull requests) pour la révision du contenu :
- Brouillon (Draft) → Travailler sur le contenu (sauvegardé localement dans le navigateur)
- En révision (In Review) → Crée une demande de tirage automatiquement lorsque vous cliquez sur "Set status: In review"
- Prêt (Ready) → Marque la PR comme prête (l'approbation se fait dans GitHub, pas dans le CMS)
Important : L'approbation finale et la fusion doivent être effectuées dans GitHub, pas via l'interface du CMS.
- Connectez-vous à
https://a11ycanada.netlify.app/admin/avec GitHub - Cliquez sur la collection Resources
- Cliquez sur New Resources
- Remplissez les champs :
- Title : Basculez entre les onglets EN/FR pour entrer les deux langues
- Description : Entrez une brève description dans les deux langues (prend en charge HTML comme
<abbr>,<strong>) - URL : Entrez le lien (champ partagé, apparaît une fois)
- Topic : Sélectionnez la catégorie dans le menu déroulant (étiquettes complètes : "Apprentissage", "Développement", etc.)
- Language Availability : Choisissez "both" (par défaut), "en" ou "fr"
- Internal Links : Activez si la ressource nécessite un accès au réseau du GC
- Resource Type : Sélectionnez "Standard resource" (par défaut), "Parent resource" ou "Child resource"
- Parent Resource : Si ressource enfant, sélectionnez le parent dans le menu déroulant filtré
- Enregistrez pour créer un brouillon
- Set status: In review → Cela crée une demande de tirage
- Netlify crée un aperçu de déploiement pour la PR automatiquement
- Révisez et approuvez dans GitHub → Fusionnez la PR pour publier les modifications
- Connectez-vous au CMS avec GitHub
- Cliquez sur la collection Resources
- Trouvez et cliquez sur la ressource à modifier
- Mettez à jour les champs au besoin (utilisez les onglets de langue pour title/description)
- Enregistrez et Set status: In review pour créer/mettre à jour la PR
- D'autres modifications mettront à jour la même branche PR
- Fusionnez la PR dans GitHub pour publier les modifications
Comprendre le comportement des brouillons :
- Les brouillons apparaissent dans toutes les vues de sujet : Lorsqu'une ressource est en statut de brouillon (pas encore fusionnée), elle apparaîtra en haut de chaque filtre de sujet dans l'interface du CMS avec une étiquette "Draft". C'est un comportement normal qui vous aide à trouver vos brouillons quel que soit le filtre que vous utilisez.
- Filtrer uniquement les brouillons : Utilisez le filtre "Drafts" en haut des filtres de vue pour voir uniquement vos ressources en brouillon
- Après fusion : Une fois que vous fusionnez la PR, la ressource devient publiée et n'apparaîtra que sous son sujet assigné
Flux de travail des brouillons :
- Créer une nouvelle ressource → Commence automatiquement comme brouillon
- Modifier et enregistrer → Reste en statut de brouillon
- Définir le statut sur "In review" → Crée une PR, s'affiche toujours comme brouillon dans le CMS
- Fusionner la PR dans GitHub → Le brouillon devient publié, apparaît uniquement dans le bon sujet
- both (par défaut) : La ressource apparaît sur les pages EN et FR sans indicateur de langue
- en : Ressource en anglais seulement, apparaît sur la page FR avec l'étiquette "(en anglais seulement)"
- fr : Ressource en français seulement, apparaît sur la page EN avec l'étiquette "(in French only)"
Les ressources sont organisées en 6 sujets (triés alphabétiquement par langue) :
Anglais : Accessible meetings and events, Development, Learning, Policy, Procurement, Services
Français : Apprentissage, Approvisionnement, Développement, Politique, Réunions et événements accessibles, Services
- Organisation par sujets : Filtrer par 6 sujets (Apprentissage, Développement, etc.) ou regrouper les ressources par sujet
- Contrôles d'affichage : Utiliser
view_filterspour filtrage rapide, activer "Group by Topic" pour affichage organisé - Ressources parent/enfant : Créer des collections de ressources hiérarchiques (parent avec enfants associés)
- Entrée bilingue avec onglets de langue pour titre et description
- Métadonnées partagées pour URL, sujet et indicateurs
- Génération automatique de bascule pour liaison inter-langues
- Bibliothèque multimédia pour futurs téléchargements d'images
- Flux de travail éditorial avec création de demandes de tirage
- Aperçus de déploiement pour révision des PR via Netlify
- Attribution GitHub : Tous les commits affichent votre nom d'utilisateur GitHub
- Accès au dépôt GitHub requis : Seuls les utilisateurs avec des permissions d'écriture peuvent utiliser le CMS
- Attribution Git : Tous les changements sont suivis aux comptes GitHub individuels
- Flux de travail par demandes de tirage : Processus de révision obligatoire avant fusion
- Accès basé sur les rôles : Géré via les permissions du dépôt GitHub
Pour des détails complets, consultez :
- Documentation de mise en œuvre :
docs/implementation/decap-cms-implementation.md - README du dossier admin :
src/admin/README.md - Documentation Decap CMS : decapcms.org/docs
- Documentation backend GitHub : decapcms.org/docs/github-backend
Le CMS utilise le backend GitHub avec flux de travail éditorial :
backend:
name: github
repo: gc-da11yn/gc-da11yn.github.io
branch: mainComment ça fonctionne :
- Les demandes de tirage sont créées automatiquement lorsque vous définissez le statut sur "In review"
- Les PR ciblent la branche
main - Netlify crée des aperçus de déploiement pour chaque PR
- Fusionnez les PR dans GitHub pour publier les modifications
- Resources (Collection bilingue i18n)
- Emplacement :
src/resources/en/etsrc/resources/fr/ - Structure : Fichiers markdown frontmatter uniquement
- Point d'entrée unique avec onglets de langue pour titre et description
- Liens de bascule inter-langues générés automatiquement
- Organisation par sujets : Étiquettes complètes stockées dans frontmatter ("Apprentissage"), converties en clés par plugin collections
- Support parent/enfant : Champ
resourceType(standard/parent/child), relationparentResource - Contrôles d'affichage : Filtrer par sujet avec
view_filters, regrouper par sujet avecview_groups
- Emplacement :
- Les pages Ressources additionnelles interrogent les ressources des collections Eleventy via
resourcesByTopicEnetresourcesByTopicFr - Étiquettes de sujets stockées en texte complet dans frontmatter ("Apprentissage", "Développement"), converties en clés par plugin collections
- Sujets triés alphabétiquement dans chaque langue sur les pages rendues
- Hiérarchie parent/enfant : Ressources parents affichées avec ressources enfants associées comme éléments de sous-liste
- Toutes les ressources affichées sur les deux pages de langue
- Indicateurs de langue pour les ressources en une seule langue :
- La page EN affiche "(in French only)" pour les ressources FR uniquement
- La page FR affiche "(en anglais seulement)" pour les ressources EN uniquement
- Descriptions de sujets apparaissent sous certains titres de sujets (par ex., "Réunions et événements accessibles")
- Emplacement de téléchargement :
src/_images/ - URL publique :
/img/ - Géré automatiquement par la construction Eleventy
- Assurez-vous que
decap-serverest en cours d'exécution - Vérifiez que
local_backend: trueest décommenté dans la configuration - Vérifiez que le serveur de développement Eleventy est en cours d'exécution
- Vérifiez que vous avez un compte GitHub
- Vérifiez que vous avez un accès en écriture au dépôt
- Essayez de vous déconnecter et de vous reconnecter pour actualiser l'OAuth GitHub
- Vérifiez si vous avez cliqué sur "Set status: In review" pour créer la PR
- Vérifiez que la PR a été créée dans GitHub
- Attendez que l'aperçu de déploiement Netlify soit construit
- Les demandes de tirage doivent être fusionnées dans GitHub, pas dans le CMS
- Vérifiez que la PR a été approuvée par les réviseurs requis
- Vérifiez que les vérifications CI sont réussies
Pour les questions ou problèmes :
- Consultez
docs/implementation/decap-cms-implementation.md - Consultez la documentation Decap CMS
- Vérifiez les permissions du dépôt GitHub
- Contactez l'équipe de développement
Statut : ✅ Prêt pour la production URL du CMS : https://a11ycanada.netlify.app/admin/
Statut : ✅ Prêt pour les tests Prochaine action : Configurer Netlify Identity et inviter des utilisateurs Branche : feature/decapCMS