diff --git a/docs/app/plan-edition-cms.md b/docs/app/plan-edition-cms.md new file mode 100644 index 0000000..f5f0acc --- /dev/null +++ b/docs/app/plan-edition-cms.md @@ -0,0 +1,238 @@ +# Plan d'implementation - Edition des profils via NetlifyCMS + Gitea + +## Objectif + +Permettre l'edition des profils de membres et des technologies directement depuis l'interface web, avec regeneration automatique des visualisations. + +## Architecture + +``` ++------------------+ +------------------+ +------------------+ +| UTILISATEUR | | NetlifyCMS | | GITEA | +| |---->| /admin |---->| git.open.us.org | +| Clic "Editer" | | Formulaires | | OAuth + API | ++------------------+ +------------------+ +------------------+ + | + v (webhook) + +------------------+ + | CI/CD | + | - npm build | + | - regenere JSON | + | - deploie | + +------------------+ +``` + +## Etapes d'implementation + +### Etape 1 : Configurer OAuth sur Gitea (15 min) + +1. Aller dans **Settings > Applications > OAuth2 Applications** +2. Creer une nouvelle application : + - **Name** : `TechRadar CMS` + - **Redirect URI** : `https://votre-domaine.com/admin/` +3. Noter le **Client ID** et **Client Secret** + +### Etape 2 : Creer les fichiers NetlifyCMS (1h) + +#### Fichier : `public/admin/index.html` + +```html + + + + + + TechRadar Admin + + + + + +``` + +#### Fichier : `public/admin/config.yml` + +```yaml +backend: + name: gitea + repo: AJR/TechradarDev + branch: main + api_root: https://git.open.us.org/api/v1 + base_url: https://git.open.us.org + auth_endpoint: /login/oauth/authorize + auth_type: implicit + +media_folder: "public/images/team" +public_folder: "/images/team" + +collections: + # Collection : Membres de l'equipe + - name: "team" + label: "Membres de l'equipe" + folder: "docs/data/team" + create: true + delete: true + extension: "md" + format: "frontmatter" + slug: "{{fields.name}}" + fields: + - { label: "Pseudo", name: "name", widget: "string", required: true } + - { label: "Nom complet", name: "fullName", widget: "string" } + - { label: "Role", name: "role", widget: "string" } + - { label: "Disponibilite (%)", name: "availability", widget: "number", min: 0, max: 100, default: 50 } + - { label: "Niveau de seniorite", name: "seniorityLevel", widget: "select", + options: ["beginner", "intermediate", "senior", "expert"] } + - { label: "Annees d'experience", name: "yearsExperience", widget: "number", min: 0 } + - { label: "Date d'arrivee", name: "joinDate", widget: "string", hint: "Format: YYYY-MM" } + - label: "Centres d'interet" + name: "interests" + widget: "list" + field: { label: "Interet", name: "interest", widget: "string" } + - label: "Competences" + name: "skills" + widget: "list" + fields: + - { label: "Nom", name: "name", widget: "string" } + - { label: "Niveau", name: "level", widget: "select", + options: ["beginner", "intermediate", "expert"] } + - { label: "Annees", name: "years", widget: "number", min: 0 } + - { label: "Derniere utilisation", name: "lastUsed", widget: "string" } + - label: "Soft Skills" + name: "softSkills" + widget: "list" + field: { label: "Skill", name: "skill", widget: "string" } + - label: "Projets" + name: "projects" + widget: "list" + field: { label: "Projet", name: "project", widget: "string" } + - { label: "Bio", name: "body", widget: "markdown" } + + # Collection : Technologies (blips radar) + - name: "technologies" + label: "Technologies" + folder: "radar-business/2025-01-15" + create: true + extension: "md" + format: "frontmatter" + fields: + - { label: "Titre", name: "title", widget: "string" } + - { label: "Ring", name: "ring", widget: "select", + options: ["adopt", "trial", "assess", "hold"] } + - { label: "Quadrant", name: "quadrant", widget: "select", + options: + - { label: "Technologies de Commodite", value: "technologies-commodite" } + - { label: "Technologies Differentiantes", value: "technologies-differentiantes" } + - { label: "Technologies Emergentes", value: "technologies-emergentes" } + - { label: "Technologies a Risque", value: "technologies-risque" } + } + - { label: "Impact Business", name: "businessImpact", widget: "select", + options: ["low", "medium", "high"] } + - { label: "Skill Gap", name: "skillGap", widget: "select", + options: ["low", "medium", "high"] } + - { label: "Description", name: "body", widget: "markdown" } +``` + +### Etape 3 : Configurer le CI/CD (30 min) + +Ajouter dans `.gitlab-ci.yml` : + +```yaml +stages: + - build + - deploy + +build: + stage: build + image: node:20-alpine + script: + - npm install + - node scripts/generate-team-visualization-data.js + - npm run build + artifacts: + paths: + - build/ + only: + - main + - dev-tech + +deploy: + stage: deploy + script: + - docker compose -f docker-compose.business.yml build --no-cache + - docker compose -f docker-compose.business.yml up -d + only: + - main +``` + +### Etape 4 : Ajouter lien "Editer" dans la carte de profil (15 min) + +Modifier `public/team-block-script.js` dans la fonction `showMemberProfile()` : + +```javascript +// Ajouter apres le bouton close : +'' + +'Editer' + +``` + +### Etape 5 : Gestion des CORS (si necessaire) + +Si Gitea n'a pas les bons headers CORS, deployer un proxy OAuth : + +```bash +npm install netlify-cms-oauth-provider-node +``` + +Ou configurer Nginx/Traefik pour ajouter les headers CORS. + +## Workflow utilisateur + +1. Utilisateur clique sur un pseudo dans le graphe/matrice/equipe +2. Carte de profil s'affiche avec bouton "Editer" +3. Clic sur "Editer" -> Redirige vers `/admin/#/collections/team/entries/pseudo` +4. NetlifyCMS demande authentification Gitea (OAuth) +5. Utilisateur modifie le formulaire (WYSIWYG) +6. Clic "Publish" -> NetlifyCMS commit sur Gitea +7. Webhook declenche le CI/CD +8. CI regenere `team-visualization-data.json` +9. Site redeploye avec les nouvelles donnees + +## Estimation des temps + +| Tache | Duree | +|-------|-------| +| Creer app OAuth Gitea | 15 min | +| Creer `admin/index.html` et `config.yml` | 1h | +| Configurer le backend Gitea dans NetlifyCMS | 1-2h | +| Ajouter etape regeneration dans CI/CD | 30 min | +| Ajouter lien "Editer" dans la carte profil | 15 min | +| Tester le workflow complet | 1-2h | +| **Total** | **4-6 heures** | + +## Points d'attention + +1. **CORS** : Gitea auto-heberge peut necessiter un proxy OAuth +2. **Permissions** : Definir qui peut editer (tous les membres authentifies ou seulement certains) +3. **Validation** : Les donnees doivent etre validees cote serveur +4. **Conflits** : Gerer les editions simultanees (Git gere ca naturellement) + +## Alternative simple : Lien direct vers l'editeur Git + +En attendant l'implementation complete, on peut ajouter un simple lien : + +```javascript +'Editer sur Git' +``` + +## Ressources + +- [NetlifyCMS Documentation](https://www.netlifycms.org/docs/) +- [NetlifyCMS Gitea Backend](https://www.netlifycms.org/docs/gitea-backend/) +- [Gitea OAuth2 Provider](https://docs.gitea.io/en-us/oauth2-provider/) + +--- + +*Document cree le 2025-12-09* +*Derniere mise a jour : 2025-12-09* +