Le Singe Du Numérique

Site Astro de l'association Le Singe Du Numérique.

Le site présente l'association, ses actions, ses événements, ses ressources et son blog. Il est construit comme un site statique Astro, avec un blog basé sur astro:content.

Objectif du site

L'association a pour objet :

• la démocratisation et l'inclusion numérique pour tous les publics
• le soutien à la transformation numérique du tissu associatif local

Le site sert donc à :

• présenter la mission de l'association
• expliquer ses actions et ses priorités
• publier des ressources utiles
• structurer un blog avec les rubriques Articles, Veille et Technos

Stack

• Astro pour la structure du site
• astro:content pour les contenus du blog
• CSS maison
• build statique généré dans dist/

Structure du projet

/
├── public/                 # assets publics (logo, favicon, etc.)
├── src/
│   ├── content/
│   │   └── blog/           # articles Markdown du blog
│   ├── layouts/            # layouts Astro partagés
│   ├── pages/              # pages du site
│   ├── styles/             # styles globaux
│   └── content.config.ts   # schéma des contenus astro:content
├── dist/                   # build statique généré
└── package.json

Utilisation d'Astro dans ce projet

Pages

Les pages du site sont dans src/pages/.

Exemples :

• src/pages/index.astro
• src/pages/asso.astro
• src/pages/blog/index.astro

Chaque fichier .astro devient une route.

Layouts

Les pages internes réutilisent un layout commun dans src/layouts/SiteLayout.astro.

Cela permet de partager la navigation, le footer et les métadonnées.

Blog avec astro:content

Le blog utilise astro:content.

Les articles sont stockés dans :

• src/content/blog/*.md

Le schéma du contenu est défini dans :

• src/content.config.ts

Chaque article contient actuellement :

• title
• description
• pubDate
• rubrique
• tags
• author

Exemple minimal :

---
title: "Mon article"
description: "Résumé court de l'article."
pubDate: 2026-03-29
rubrique: "Articles"
tags: ["Débutant", "Cybersécurité"]
author: "Le Singe Du Numérique"
---

# Titre

Contenu Markdown...

Commandes utiles

Depuis la racine du projet :

Commande	Action
npm install	installe les dépendances
npm run dev	lance le serveur local sur http://localhost:4321
npm run build	génère le site statique dans dist/
npm run preview	prévisualise le build localement

Ajouter un article de blog

1. Créer un fichier Markdown dans src/content/blog/
2. Ajouter les métadonnées attendues
3. Choisir une rubrique parmi :
   • Articles
   • Veille
   • Technos
4. Ajouter des tags cohérents
5. Lancer npm run build pour vérifier que le schéma Astro est respecté

Administration du contenu

Une base d'administration Decap CMS est préparée pour le blog.

En local :

1. lancer le site avec npm run dev
2. lancer le backend local avec npx decap-server
3. ouvrir /admin

En production :

• site public : https://lesingedunumerique.fr
• administration : https://lesingedunumerique-oauth.vercel.app/admin/

L'administration publique ne doit pas être servie depuis O2Switch.

Déploiement O2Switch

Le site public est déployé automatiquement depuis main via GitHub Actions.

Les workflows :

1. Security CI sur PR et main :
   • npm audit (racine + decap-oauth-vercel)
   • build Astro (racine + decap-oauth-vercel)
   • scan de secrets (gitleaks)
2. Dependabot Auto Merge :
   • auto-approve + auto-merge pour les mises à jour patch/minor
   • les mises à jour major restent manuelles
3. Deploy O2Switch sur main :
   • installe les dépendances
   • exécute npm audit --audit-level=high
   • build le site Astro
   • déploie dist/ vers O2Switch (FTPS)
   • exécute des healthchecks post-déploiement
   • déclenche un rollback automatique vers le dernier artefact sain si un healthcheck échoue

Secrets GitHub à renseigner dans le dépôt :

• O2SWITCH_FTP_SERVER
• O2SWITCH_FTP_USERNAME
• O2SWITCH_FTP_PASSWORD
• O2SWITCH_REMOTE_DIR
• O2SWITCH_HEALTHCHECK_URLS (optionnel)

Valeur attendue pour O2SWITCH_REMOTE_DIR :

• le chemin distant exact de la racine web du site, par exemple /lesingedunumerique.fr/

Valeur possible pour O2SWITCH_HEALTHCHECK_URLS :

• liste d'URLs séparées par des virgules ou des retours ligne, par exemple : https://lesingedunumerique.fr/,https://lesingedunumerique.fr/sitemap.xml

Note :

• le workflow n'envoie pas admin/ sur O2Switch
• l'administration reste servie uniquement sur Vercel
• au premier déploiement, s'il n'existe pas encore d'artefact sain, un rollback automatique n'est pas possible

Bibliothèque de jeux

Les jeux sont hébergés par la super-admin (https://admin.stan-bouchet.fr/jeux/<slug>) et embarqués en iframe. Le site ne contient plus de HTML de jeu : il lit le catalogue src/data/jeux.json, généré et committé par l'admin à chaque publication. Ne pas l'éditer à la main, il serait écrasé au prochain sync.

Ce catalogue alimente /sensibilisation, /sensibilisation/jeux et une page par jeu (src/pages/sensibilisation/jeux/[slug].astro). Les vignettes sont copiées dans public/jeux/covers/.

Pour ajouter ou modifier un jeu : tout se passe dans l'admin (upload de la version, métadonnées de la page publique, publication), puis « Déployer » pousse sur main et déclenche le build O2Switch.

L'origine qui sert les jeux doit rester listée dans frame-src de la CSP (public/.htaccess), sinon l'iframe est bloquée par le navigateur.

Accessibilité

Le site a déjà reçu plusieurs améliorations d'accessibilité. L'état public reste documenté sur la page accessibilité du site et doit rester cohérent avec les audits et tests réellement effectués.

Licence

Le dépôt utilise une séparation claire :

• contenus éditoriaux et médias : CC BY-NC-SA 4.0
• code source et fichiers techniques : droits réservés
• logo, nom de l'association et identité visuelle : droits réservés

Voir :

• LICENSE
• LICENSE-CONTENT.md