# 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*