Doc: plan d'implementation NetlifyCMS + Gitea pour edition des profils
This commit is contained in:
syoul
238
docs/app/plan-edition-cms.md
Normal file
238
docs/app/plan-edition-cms.md
Normal file
@@ -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
|
||||
<!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*
|
||||
|
||||
Reference in New Issue
Block a user