docs: mise à jour du README et ajout de la configuration CI Woodpecker

- Réécriture complète du README pour le projet stand-alone Techradar Laplank - Ajout de .woodpecker.yml pour la pipeline CI/CD - Mise à jour du .gitignore pour exclure les dossiers docs/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-19 17:34:12 +01:00
parent 236b8fe037
commit 27685ee250
3 changed files with 423 additions and 47 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,8 @@ public/inline-strategie.js
 public/strategie-content-raw.txt
 public/strategie-content.js
 public/strategie-inline.html
+
+# Docs
+docs/
+docs-sbom/
+docs-syoul/
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@@ -0,0 +1,245 @@
+---
+kind: pipeline
+type: docker
+name: build-and-deploy
+
+# Ce pipeline Woodpecker CI automatise le build et le déploiement de l'application statique
+# Il se déclenche automatiquement sur chaque push vers les branches main ou stand-alone
+
+steps:
+  # ============================================
+  # ÉTAPE 1: BUILD DE L'APPLICATION STATIQUE
+  # ============================================
+  # Cette étape construit l'application Next.js et génère les fichiers statiques HTML/CSS/JS
+  - name: build
+    # Image Docker utilisée : Node.js 20 sur Alpine Linux (légère et rapide)
+    image: node:20-alpine
+    
+    # Variables d'environnement nécessaires pour le build
+    environment:
+      NODE_ENV: production        # Mode production (optimisations activées)
+      HUSKY: 0                    # Désactive Husky (git hooks) pour éviter les erreurs
+      HUSKY_SKIP_INSTALL: 1       # Skip l'installation de Husky
+    
+    # Commandes exécutées dans l'ordre
+    commands:
+      # Installation des dépendances système nécessaires
+      # - git : pour cloner/récupérer des dépendances si nécessaire
+      # - python3 : requis pour les scripts de patch (patch_document.py, add_team_link.py)
+      - apk add --no-cache git python3
+      
+      # Installation des dépendances Node.js de la racine du projet
+      # npm ci : Clean Install (supprime node_modules et réinstalle depuis package-lock.json)
+      # --legacy-peer-deps : Ignore les conflits de dépendances peer (compatibilité)
+      - npm ci --legacy-peer-deps
+      
+      # Installation des dépendances de radar-app/ (le framework Next.js vendu)
+      # On se déplace dans le dossier radar-app pour installer ses dépendances
+      - cd radar-app
+      
+      # Installation des dépendances de radar-app (y compris devDependencies)
+      # --include=dev : Inclut les dépendances de développement (tsx, eslint, etc.)
+      - npm ci --legacy-peer-deps --include=dev
+      
+      # Build des icônes SVG en composants React TypeScript
+      # Ce script génère les composants Icons depuis les fichiers SVG dans src/icons/
+      - npm run build:icons
+      
+      # Retour à la racine du projet
+      - cd ..
+      
+      # Génération des données de visualisation équipe
+      # Ce script lit les profils dans docs/data/team/*.md et les technologies
+      # Il génère public/team-visualization-data.json utilisé par la page /team
+      - node scripts/generate-team-visualization-data.js
+      
+      # Build de l'application complète
+      # Ce script (build-radar.js) :
+      # 1. Copie config-business.json vers radar-app/data/config.json
+      # 2. Copie radar-business/2025-01-15/ vers radar-app/data/radar/2025-01-15/
+      # 3. Copie public/* vers radar-app/public/
+      # 4. Applique les patches (team page, _document, Navigation)
+      # 5. Lance npm run build:data puis npm run build dans radar-app/
+      # 6. Copie radar-app/out/ vers build/ à la racine
+      - npm run build
+      
+      # Vérification que le build a réussi
+      # Affiche les 10 premiers fichiers du dossier build/ pour vérifier la génération
+      - ls -la build/ | head -10
+    
+    # Volumes temporaires pour accélérer les builds suivants
+    # Ces volumes persistent les node_modules entre les étapes pour éviter de réinstaller
+    volumes:
+      - name: node_modules_root
+        path: /app/node_modules
+      - name: node_modules_radar_app
+        path: /app/radar-app/node_modules
+
+  # ============================================
+  # ÉTAPE 2: DÉPLOIEMENT VIA RSYNC (OPTIONNEL)
+  # ============================================
+  # Cette étape synchronise les fichiers statiques vers un serveur web distant
+  # Utile si vous avez un serveur Nginx/Apache qui sert des fichiers statiques
+  - name: deploy-rsync
+    # Image Alpine (légère) avec rsync et SSH
+    image: alpine:latest
+    
+    # Variables d'environnement récupérées depuis les secrets Woodpecker
+    environment:
+      DEPLOY_HOST:
+        from_secret: deploy_host      # Exemple: techradar.example.com
+      DEPLOY_USER:
+        from_secret: deploy_user      # Exemple: deploy
+      DEPLOY_PATH:
+        from_secret: deploy_path      # Exemple: /var/www/techradar
+      DEPLOY_KEY:
+        from_secret: deploy_key       # Clé privée SSH complète
+    
+    commands:
+      # Installation des outils nécessaires
+      - apk add --no-cache openssh-client rsync
+      
+      # Création du dossier .ssh pour les clés SSH
+      - mkdir -p ~/.ssh
+      
+      # Écriture de la clé privée SSH dans le fichier id_rsa
+      # $$ est échappé pour éviter l'interpolation par le shell
+      - echo "$$DEPLOY_KEY" > ~/.ssh/id_rsa
+      
+      # Protection de la clé privée (lecture/écriture uniquement pour le propriétaire)
+      - chmod 600 ~/.ssh/id_rsa
+      
+      # Ajout de la clé publique du serveur dans known_hosts
+      # Évite la vérification manuelle lors de la première connexion
+      - ssh-keyscan -H $$DEPLOY_HOST >> ~/.ssh/known_hosts || true
+      
+      # Synchronisation des fichiers
+      # rsync -avz : Archive mode, Verbose, Compression
+      # --delete : Supprime les fichiers sur le serveur qui n'existent plus localement
+      # build/ : Source (dossier build généré à l'étape précédente)
+      # $$DEPLOY_USER@$$DEPLOY_HOST:$$DEPLOY_PATH/ : Destination (serveur distant)
+      - rsync -avz --delete build/ $$DEPLOY_USER@$$DEPLOY_HOST:$$DEPLOY_PATH/
+      
+      # Message de confirmation
+      - echo "✅ Déploiement terminé sur $$DEPLOY_HOST:$$DEPLOY_PATH"
+    
+    # Conditions de déclenchement
+    # Cette étape ne s'exécute que si :
+    when:
+      branch:
+        - main        # Sur la branche main
+        - stand-alone # Ou sur la branche stand-alone
+      event:
+        - push        # Et uniquement sur un événement push (pas sur les PR)
+
+  # ============================================
+  # ÉTAPE 3: DÉPLOIEMENT DOCKER (RECOMMANDÉ)
+  # ============================================
+  # Cette étape build et déploie l'application via Docker
+  # Plus simple et reproductible que rsync
+  - name: deploy-docker
+    # Image Docker officielle avec docker-compose
+    image: docker:latest
+    
+    # Configuration Docker
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock  # Socket Docker du serveur Woodpecker
+    
+    commands:
+      # Installation de docker-compose
+      - apk add --no-cache docker-compose
+      
+      # Build de l'image Docker sans cache
+      # --no-cache : Force un rebuild complet (garantit que tout est à jour)
+      # docker-compose.business.yml : Fichier de configuration Docker Compose
+      - docker compose -f docker-compose.business.yml build --no-cache
+      
+      # Démarrage du conteneur en mode détaché
+      # -d : Détaché (en arrière-plan)
+      # up : Crée et démarre les conteneurs
+      - docker compose -f docker-compose.business.yml up -d
+      
+      # Vérification que le conteneur tourne
+      # Affiche les conteneurs contenant "laplank-radar" ou un message si non trouvé
+      - docker ps | grep laplank-radar || echo "Conteneur non trouvé"
+    
+    # Volume pour accéder au socket Docker du serveur
+    # Nécessaire pour que le conteneur puisse utiliser Docker
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    
+    # Conditions de déclenchement (identique à deploy-rsync)
+    when:
+      branch:
+        - main
+        - stand-alone
+      event:
+        - push
+
+  # ============================================
+  # ÉTAPE 4: NOTIFICATION TELEGRAM
+  # ============================================
+  # Cette étape envoie une notification Telegram à la fin du pipeline
+  # Utile pour être informé immédiatement du résultat du build
+  - name: notify
+    # Plugin Drone/Woodpecker pour Telegram
+    # Compatible avec Woodpecker (fork de Drone)
+    image: appleboy/drone-telegram
+    
+    # Configuration du plugin Telegram
+    settings:
+      token:
+        from_secret: telegram_token      # Token du bot Telegram
+      to:
+        from_secret: telegram_chat_id_ajr # ID du chat Telegram (destinataire)
+      format: markdown                    # Format du message (Markdown supporté)
+      
+      # Message personnalisé avec template Woodpecker
+      # {{#success build.status}} : Condition si le build a réussi
+      # {{repo.name}} : Nom du dépôt Git
+      # {{commit.branch}} : Branche du commit
+      # {{commit.message}} : Message du commit
+      # {{commit.author}} : Auteur du commit
+      # {{build.link}} : Lien vers le build dans Woodpecker
+      message: >
+        {{#success build.status}}
+        ✅ Build réussi pour `{{repo.name}}` sur la branche `{{commit.branch}}`
+        📝 Commit: `{{commit.message}}`
+        👤 Auteur: {{commit.author}}
+        🔗 {{ build.link }}
+        {{else}}
+        ❌ Build échoué pour `{{repo.name}}` sur la branche `{{commit.branch}}`
+        📝 Commit: `{{commit.message}}`
+        👤 Auteur: {{commit.author}}
+        🔗 {{ build.link }}
+        {{/success}}
+    
+    # Conditions de déclenchement
+    # S'exécute toujours, que le build réussisse ou échoue
+    when:
+      status:
+        - success  # Si le build réussit
+        - failure  # Si le build échoue
+
+# ============================================
+# VOLUMES TEMPORAIRES
+# ============================================
+# Ces volumes sont créés temporairement pour chaque pipeline
+# Ils permettent de partager des données entre les étapes
+volumes:
+  # Volume pour les node_modules de la racine
+  # Persiste entre les étapes pour éviter de réinstaller
+  - name: node_modules_root
+    temp: {}  # Volume temporaire (supprimé à la fin du pipeline)
+  
+  # Volume pour les node_modules de radar-app
+  # Persiste entre les étapes pour éviter de réinstaller
+  - name: node_modules_radar_app
+    temp: {}
+  
+  # Volume pour accéder au socket Docker du serveur
+  # Nécessaire pour que les conteneurs puissent utiliser Docker
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock  # Chemin du socket Docker sur le serveur
--- a/Readme.md
+++ b/Readme.md
@@ -1,52 +1,168 @@
-# AJR Technology Radar - Content
+# Techradar Laplank

-Ce dépôt contient le contenu du Technology Radar AJR, publié sous : https://www.coeurbox.syoul.fr
+**Techradar Laplank** est un Technology Radar interactif pour suivre l'évolution des technologies de l'écosystème Laplank/Duniter/Ğ1. Le projet est basé sur le framework [aoe_technology_radar](https://github.com/AOEpeople/aoe_technology_radar), dont le code source est vendu dans le répertoire `radar-app/`.

-Le projet est basé sur le framework [aoe_technology_radar](https://github.com/AOEpeople/aoe_technology_radar), dont le code source est vendu dans le répertoire `radar-app/`.
+## 🎯 Vue d'ensemble

-## Vue d'ensemble
+**Techradar Laplank** est un projet **stand-alone** qui présente :
+- **38 technologies** organisées par quadrants business et anneaux d'adoption
+- **12 membres d'équipe** avec leurs compétences et projets
+- **Visualisations interactives** : graphe réseau, matrice de congestion, équipe de genèse
+- **Pages de stratégie** : Technique, Business, DataViz Expert

-Le projet contient deux radars distincts :
+### Technologies utilisées

-1. **Radar Technique Principal** : Radar standard des technologies utilisées par AJR
-2. **Radar Technologique Laplank** : Tech radar classique pour suivre l'évolution des technologies de l'écosystème Laplank/Duniter/Ğ1 avec historique par release
+- **Next.js** : 16.1.6 (avec Turbopack)
+- **React** : 19
+- **TypeScript** : 5
+- **Cytoscape.js** : Visualisation du graphe réseau
+- **ECharts** : Matrice de congestion
+- **Node.js** : 20+

-## Radar Technologique Laplank
+## 🚀 Démarrage rapide

-Le Radar Technologique Laplank est un tech radar classique accessible via le port **3006** avec une **protection par mot de passe** (`laplank-radar`).
+### Prérequis

-### Fonctionnalités
+- Node.js 20 ou supérieur
+- npm ou yarn
+- Docker (pour le déploiement)

- **Historique par release** : Suivi de l'évolution des technologies au fil du temps avec organisation par date
- **Pages de stratégie dynamiques** : Accès à trois pages de stratégie depuis le header :
-  - Stratégie Technique
-  - Business
-  - DataViz Expert
- **Protection par mot de passe** : Accès restreint via un système d'authentification client-side
- **Quadrants business** : Classification selon l'impact business (Différenciantes, Commodité, Risque, Émergentes)
- **Anneaux classiques** : Hold, Assess, Trial, Adopt
+### Installation
+
+```bash
+git clone gitea@git.open.us.org:AJR/TechradarDev.git
+cd TechradarDev
+npm install
+```

 ### Développement local

+**Mode développement Next.js** (avec hot-reload) :
+```bash
+npm run serve-dev
+```
+Le serveur démarre sur http://localhost:3000
+
+**Mode production local** (serveur statique) :
 ```bash
-npm install
 npm run serve-business
 ```
-
 Le serveur démarre sur http://localhost:3006

-### Déploiement
+**Build de production** :
+```bash
+npm run build
+```
+Les fichiers statiques sont générés dans le répertoire `build/`

-Le Radar Technologique Laplank est déployé via Docker et Portainer :
+## 🐳 Déploiement Docker

+Le radar est déployé via Docker Compose :
+
+**Commande de déploiement :**
+
+```bash
+docker compose -f docker-compose.business.yml up -d --build
+```
+
+Cette commande :
+- Build l'image Docker sans cache (`--build`)
+- Démarre le conteneur en mode détaché (`-d`)
+- Le radar sera accessible sur http://localhost:3006
+
+**Arrêter le déploiement :**
+
+```bash
+docker compose -f docker-compose.business.yml down
+```
+
+**Configuration Docker :**
 - **Dockerfile** : `Dockerfile.business`
 - **Docker Compose** : `docker-compose.business.yml`
 - **Port** : 3006 (mappé depuis le port 3000 du conteneur)
- **Base path** : `/` (racine)
+- **Conteneur** : `laplank-radar-technolologique`

-## Content Guidelines
+## 📊 Fonctionnalités

-Les nouveaux blips doivent être tagués. Les tags suivants sont établis :
+### Radar Technologique
+
+- **Quadrants business** :
+  - Technologies Différenciantes
+  - Technologies Commodité
+  - Technologies Risque
+  - Technologies Émergentes
+
+- **Anneaux d'adoption** :
+  - **Adopt** : Technologies adoptées et utilisées en production
+  - **Trial** : Technologies en phase d'essai
+  - **Assess** : Technologies à évaluer
+  - **Hold** : Technologies à éviter ou remplacer
+
+- **38 technologies** suivies dans la release 2025-01-15
+
+### Page Équipe (`/team`)
+
+Visualisations interactives de l'équipe :
+
+1. **Graphe réseau** : Relations entre membres et technologies (Cytoscape.js)
+2. **Matrice de congestion** : Technologies core vs disponibilité de l'équipe (ECharts)
+3. **Équipe de genèse** : Membres fondateurs et leurs compétences
+4. **Profils cliquables** : Cartes de profil détaillées pour chaque membre
+
+**12 membres** de l'équipe avec leurs compétences, projets et disponibilités.
+
+### Pages de stratégie
+
+Accès à trois pages de stratégie depuis le header :
+- **Stratégie Technique** : Vision technique et roadmap
+- **Business** : Impact business et métriques
+- **DataViz Expert** : Stratégie de visualisation de données
+
+**Protection par mot de passe** : `laplank-radar`
+
+## 📁 Structure du projet
+
+```
+TechradarDev/
+├── radar-app/              # Framework Next.js vendu (stand-alone)
+│   ├── src/                # Code source Next.js
+│   ├── data/               # Données du radar
+│   └── package.json        # Next.js 16.1.6, React 19
+├── radar-business/         # Contenu du radar business
+│   ├── 2025-01-15/         # Release actuelle (38 technologies)
+│   └── config-business.json # Configuration du radar
+├── docs/
+│   ├── data/
+│   │   └── team/           # Profils des 12 membres
+│   └── app/                # Documentation technique
+├── scripts/
+│   ├── build-radar.js      # Script de build stand-alone
+│   ├── serve-radar.js      # Script de serve
+│   ├── generate-team-visualization-data.js # Génération données équipe
+│   └── ...
+├── public/                 # Fichiers statiques
+│   ├── team-block-script.js # Script page équipe
+│   └── team-visualization-data.json # Données visualisations
+├── Dockerfile.business     # Dockerfile pour déploiement
+└── docker-compose.business.yml # Configuration Docker Compose
+```
+
+## 🛠️ Scripts disponibles
+
+| Script | Description |
+|--------|-------------|
+| `npm run build` | Build de production (génère `build/`) |
+| `npm run serve` | Serve les fichiers statiques depuis `build/` |
+| `npm run serve-dev` | Mode développement Next.js (hot-reload) |
+| `npm run serve-business` | Serve le radar business en local (port 3006) |
+| `npm run extract-tech` | Extraction des technologies depuis la doc |
+| `npm run analyze-business` | Analyse des métriques business |
+
+## 📝 Content Guidelines
+
+### Tags disponibles
+
+Les blips doivent être tagués avec les tags suivants :

 * architecture
 * security
@@ -59,35 +175,45 @@ Les nouveaux blips doivent être tagués. Les tags suivants sont établis :
 * ux/ui
 * documentation

-Exemple d'utilisation :
-
-```md
+Exemple :
+```markdown
 tags: [devops, security]
 ```

-## Development
+### Format des blips

-### Build le radar principal
-```
-npm install
-npm run serve
-```
+Voir `radar-business/FORMAT-BLIP.md` pour le format complet des métadonnées business.

-Puis ouvrir : http://localhost:3000/techradar
+## 🔐 Sécurité

-### Build avec fichiers statiques
-```
-npm install
-npm run build
-```
+- **Protection par mot de passe** : Les pages de stratégie sont protégées par le mot de passe `laplank-radar`
+- **Authentification client-side** : Système d'authentification JavaScript côté client

-## Documentation
+## 📚 Documentation

 La documentation complète est disponible dans le dossier `docs/` :

- [Architecture](./docs/app/architecture.md)
- [Configuration](./docs/app/configuration.md)
- [Développement](./docs/app/developpement.md)
- [Déploiement](./docs/app/deploiement.md)
- [Contribution](./docs/app/contribution.md)
- [Guide Radar Technologique Laplank](./docs/app/guide-radar-business.md)
+- [Architecture](./docs/app/architecture.md) - Architecture technique du projet
+- [Configuration](./docs/app/configuration.md) - Configuration du radar
+- [Développement](./docs/app/developpement.md) - Guide de développement
+- [Déploiement](./docs/app/deploiement.md) - Guide de déploiement
+- [Contribution](./docs/app/contribution.md) - Guide de contribution
+- [Guide Radar Business](./docs/app/guide-radar-business.md) - Guide spécifique au radar business
+- [Guide Page Équipe](./docs/app/guide-page-equipe.md) - Documentation de la page équipe
+- [Migration Next.js 16](./docs/app/migration-nextjs-16.md) - Notes de migration
+
+## 🔄 État du projet
+
+- **Branche actuelle** : `stand-alone`
+- **Version** : 4.3.0
+- **Statut** : Projet stand-alone, indépendant du package externe `aoe_technology_radar`
+- **Framework** : Code vendu dans `radar-app/` (basé sur aoe_technology_radar)
+
+## 📞 Support
+
+- **Dépôt Git** : https://git.open.us.org/AJR/TechradarDev
+- **Radar en ligne** : http://localhost:3006 (après déploiement)
+
+## 📄 Licence
+
+MIT