# 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TechRadar Admin</title>
</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
```

#### 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 :
'<a href="/admin/#/collections/team/entries/' + memberId + '" ' +
'target="_blank" class="edit-link" ' +
'style="position:absolute;top:15px;right:50px;color:#4ade80;font-size:14px;text-decoration:none">' +
'Editer</a>' +
```

### 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
'<a href="https://git.open.us.org/AJR/TechradarDev/_edit/main/docs/data/team/' + memberId + '.md" target="_blank">Editer sur Git</a>'
```

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

