AJR/TechradarDev
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
e9fd40f27d438d0f3a82d4339fb981f4defa28c1
TechradarDev/docs/app/plan-edition-cms.md

7.9 KiB
Raw Blame History

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

<!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

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 :

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() :

// 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 :

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 :

'<a href="https://git.open.us.org/AJR/TechradarDev/_edit/main/docs/data/team/' + memberId + '.md" target="_blank">Editer sur Git</a>'

Ressources

Document cree le 2025-12-09 Derniere mise a jour : 2025-12-09

Reference in New Issue View Git Blame Copy Permalink