From 27685ee250d09416b6909e89df30e796fef48023 Mon Sep 17 00:00:00 2001 From: syoul Date: Thu, 19 Mar 2026 17:34:12 +0100 Subject: [PATCH] =?UTF-8?q?docs:=20mise=20=C3=A0=20jour=20du=20README=20et?= =?UTF-8?q?=20ajout=20de=20la=20configuration=20CI=20Woodpecker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .gitignore | 5 + .woodpecker.yml | 245 ++++++++++++++++++++++++++++++++++++++++++++++++ Readme.md | 220 +++++++++++++++++++++++++++++++++---------- 3 files changed, 423 insertions(+), 47 deletions(-) create mode 100644 .woodpecker.yml diff --git a/.gitignore b/.gitignore index e3d3901..de70eff 100644 --- 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/ \ No newline at end of file diff --git a/.woodpecker.yml b/.woodpecker.yml new file mode 100644 index 0000000..985b562 --- /dev/null +++ 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 diff --git a/Readme.md b/Readme.md index bef92e2..de56ec5 100644 --- 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) \ No newline at end of file +- [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