Compare commits
164 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cc8df1a4af | ||
|
|
b69850a23b | ||
|
|
b8ec3f2828 | ||
|
|
cdd6e1c573 | ||
|
|
89c24b9cd8 | ||
|
|
5c47f1f7c6 | ||
|
|
bc2cfdb1c3 | ||
|
|
5d7d158436 | ||
|
|
240988ed61 | ||
|
|
3553f1d839 | ||
|
|
d326f24f8d | ||
|
|
a5a71bcd8b | ||
|
|
16a346e8fe | ||
|
|
59acaf46cb | ||
|
|
c69b917f94 | ||
|
|
484f0313b2 | ||
|
|
c38ea72928 | ||
|
|
95ab0b68ae | ||
|
|
e29b7401d6 | ||
|
|
45fc4c56d9 | ||
|
|
be86854c7e | ||
|
|
7b236f6770 | ||
|
|
f149571673 | ||
|
|
2dd08c0d46 | ||
|
|
982d45994d | ||
|
|
c008d38d10 | ||
|
|
c76f5e958c | ||
|
|
f6f138ea97 | ||
|
|
9264854a54 | ||
|
|
ae6f88a02e | ||
|
|
a9f02bd47d | ||
|
|
eec2e0c52f | ||
|
|
aa04c62904 | ||
|
|
42b829fffc | ||
|
|
6ecf94dc9f | ||
|
|
b7911fcdae | ||
|
|
d8e9503cc7 | ||
|
|
166248078f | ||
|
|
f431a0b7cc | ||
|
|
4b111ef02d | ||
|
|
2d72898bdc | ||
|
|
78021a5496 | ||
|
|
a4bc477520 | ||
|
|
7097490439 | ||
|
|
53c9e1253d | ||
|
|
aa0a7a4efd | ||
|
|
1492e49b5e | ||
|
|
a5ace8b0fa | ||
|
|
13a8730692 | ||
|
|
2ab2e1f261 | ||
|
|
52ff55a291 | ||
|
|
0147a86fac | ||
|
|
e9f16769a9 | ||
|
|
a4f279480b | ||
|
|
112ba401d7 | ||
|
|
3d12bbdc8d | ||
|
|
bd49ae940d | ||
|
|
282ffbf9d8 | ||
|
|
44b777b69d | ||
|
|
c4aada1caa | ||
|
|
a1a5849dd4 | ||
|
|
e357330cad | ||
|
|
062b4e2162 | ||
|
|
4f8d495579 | ||
|
|
cdbacdd434 | ||
|
|
c8263df37d | ||
|
|
82fada4f32 | ||
|
|
376e82570f | ||
|
|
66fe78f86e | ||
|
|
005ed9ee7f | ||
|
|
9a055add6f | ||
|
|
99cb96bbd6 | ||
|
|
9894a8b2fb | ||
|
|
57c9d26cb3 | ||
|
|
4b9073b8ee | ||
|
|
4ef4c77c3a | ||
|
|
82cad3b56c | ||
|
|
9c860e25cc | ||
|
|
cd013ae162 | ||
|
|
7a301456fe | ||
|
|
5a70b6214f | ||
|
|
52668323e1 | ||
|
|
00a000dc48 | ||
|
|
97577b32c5 | ||
|
|
322fc20875 | ||
|
|
7eaa3e3c09 | ||
|
|
db00e2d814 | ||
|
|
01d506ec76 | ||
|
|
647b5dbd3b | ||
|
|
56f227e939 | ||
|
|
387b3f4806 | ||
|
|
e1842c5df5 | ||
|
|
56f010c21c | ||
|
|
13b0486104 | ||
|
|
e218ab9a0e | ||
|
|
ece48d7a4e | ||
|
|
991e557b68 | ||
|
|
dc8cd06989 | ||
|
|
3ede12865b | ||
|
|
56401bae09 | ||
|
|
73331e27c1 | ||
|
|
8e932be47f | ||
|
|
0d4f6f3929 | ||
|
|
66187011b6 | ||
|
|
f15eccdf5c | ||
|
|
74214fc286 | ||
|
|
89a5446889 | ||
|
|
74519f7e41 | ||
|
|
df4948c19a | ||
|
|
7bc6c695b8 | ||
|
|
946a0f93b3 | ||
|
|
98992b0e1d | ||
|
|
02a23a09ee | ||
|
|
a967840079 | ||
|
|
ba45a934cf | ||
|
|
47fb1d9727 | ||
|
|
7986bc70b1 | ||
|
|
19e85089ab | ||
|
|
91b820d289 | ||
|
|
6c4904875b | ||
|
|
8d32db8674 | ||
|
|
328c0dc2f5 | ||
|
|
475d6958dc | ||
|
|
9b546f6d77 | ||
|
|
3b1203e3f7 | ||
|
|
ba1c7ffb4d | ||
|
|
e125fcb1ab | ||
|
|
efa3c1c1cd | ||
|
|
5b03ef4c10 | ||
|
|
083c82eb1e | ||
|
|
e830bdb69c | ||
|
|
327c23c33f | ||
|
|
58eb66fc7f | ||
|
|
ac14204dc6 | ||
|
|
1fcad7fd95 | ||
|
|
801af0df91 | ||
|
|
6b626f861d | ||
|
|
c83946223b | ||
|
|
764bd31f1c | ||
|
|
29c171d4b1 | ||
|
|
0559094aba | ||
|
|
805c3d4524 | ||
|
|
0645e6b7b3 | ||
|
|
789ee885a2 | ||
|
|
821bce7476 | ||
|
|
5fafcfd604 | ||
|
|
d6166c788a | ||
|
|
987ffb2da1 | ||
|
|
c84392a7ff | ||
|
|
ecfd69504c | ||
|
|
f3108d4d84 | ||
|
|
e7c79bf033 | ||
|
|
8c208554d5 | ||
|
|
c5cac7f7f8 | ||
|
|
c2f4867a55 | ||
|
|
9d38590fc1 | ||
|
|
3c3e984655 | ||
|
|
89865cbba5 | ||
|
|
cf7a0618bc | ||
|
|
de4e0a32db | ||
|
|
6314bb7e51 | ||
|
|
055e4a9281 | ||
|
|
6add0ece80 | ||
|
|
befb91672d |
@@ -3,5 +3,6 @@
|
|||||||
/.git*
|
/.git*
|
||||||
/.nuxt
|
/.nuxt
|
||||||
/.output
|
/.output
|
||||||
/docker
|
|
||||||
/node_modules
|
/node_modules
|
||||||
|
/.techradar
|
||||||
|
/build
|
||||||
|
|||||||
@@ -1,22 +1,39 @@
|
|||||||
|
# syntax=docker/dockerfile:1.4
|
||||||
# Utiliser une image Node.js légère
|
# Utiliser une image Node.js légère
|
||||||
FROM node:20-alpine
|
FROM node:20-alpine
|
||||||
|
|
||||||
|
# Build arguments pour invalider le cache si nécessaire
|
||||||
|
ARG BUILD_DATE=unknown
|
||||||
|
ARG BUILD_VERSION=unknown
|
||||||
|
ARG CACHE_BUST=1
|
||||||
|
LABEL build.date="${BUILD_DATE}" \
|
||||||
|
build.version="${BUILD_VERSION}" \
|
||||||
|
cache.bust="${CACHE_BUST}"
|
||||||
|
|
||||||
|
# Invalider le cache en utilisant CACHE_BUST dans une instruction RUN
|
||||||
|
# Cela force Docker à reconstruire à partir de cette ligne si CACHE_BUST change
|
||||||
|
# Utiliser CACHE_BUST dans une variable d'environnement pour forcer l'invalidation
|
||||||
|
RUN echo "Cache bust: ${CACHE_BUST}" && \
|
||||||
|
echo "Build date: ${BUILD_DATE}" && \
|
||||||
|
date && \
|
||||||
|
echo "${CACHE_BUST}" > /tmp/cache_bust.txt
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
# Variables d'environnement à définir AVANT npm install
|
# Variables d'environnement à définir AVANT npm install
|
||||||
ENV HUSKY=0
|
ENV HUSKY=0
|
||||||
ENV HUSKY_SKIP_INSTALL=1
|
ENV HUSKY_SKIP_INSTALL=1
|
||||||
ENV NODE_PATH=/app/node_modules
|
ENV NODE_PATH=/app/node_modules
|
||||||
ENV NODE_ENV=development
|
ENV NODE_ENV=production
|
||||||
|
|
||||||
# Installation des dépendances système
|
# Installation des dépendances système
|
||||||
RUN apk add --no-cache git
|
RUN apk add --no-cache git python3
|
||||||
|
|
||||||
# Copie des fichiers de dépendances
|
# Copie des fichiers de dépendances
|
||||||
COPY package.json package-lock.json* ./
|
COPY package.json package-lock.json* ./
|
||||||
|
|
||||||
# Installation des dépendances Node
|
# Installation des dépendances Node
|
||||||
RUN npm install --legacy-peer-deps --ignore-scripts
|
RUN npm install --legacy-peer-deps --ignore-scripts cytoscape cytoscape-cose-bilkent echarts-for-react
|
||||||
|
|
||||||
# Patch du package aoe_technology_radar pour inclure gray-matter dans les dépendances runtime
|
# Patch du package aoe_technology_radar pour inclure gray-matter dans les dépendances runtime
|
||||||
RUN node -e "const fs=require('fs');const pkgPath='./node_modules/aoe_technology_radar/package.json';const pkg=JSON.parse(fs.readFileSync(pkgPath,'utf8'));pkg.dependencies=pkg.dependencies||{};pkg.dependencies['gray-matter']='^4.0.3';pkg.dependencies['postcss']='^8.4.47';pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(pkgPath,JSON.stringify(pkg,null,2));"
|
RUN node -e "const fs=require('fs');const pkgPath='./node_modules/aoe_technology_radar/package.json';const pkg=JSON.parse(fs.readFileSync(pkgPath,'utf8'));pkg.dependencies=pkg.dependencies||{};pkg.dependencies['gray-matter']='^4.0.3';pkg.dependencies['postcss']='^8.4.47';pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(pkgPath,JSON.stringify(pkg,null,2));"
|
||||||
@@ -26,15 +43,156 @@ COPY . .
|
|||||||
RUN chmod +x scripts/start-business.sh
|
RUN chmod +x scripts/start-business.sh
|
||||||
|
|
||||||
# Préparer .techradar une fois pour toutes (évite les réinstallations au runtime)
|
# Préparer .techradar une fois pour toutes (évite les réinstallations au runtime)
|
||||||
RUN npx techradar install && \
|
# Le script techradar.js crée automatiquement .techradar lors de l'exécution
|
||||||
node -e "const fs=require('fs');const p='.techradar/package.json';const pkg=JSON.parse(fs.readFileSync(p,'utf8'));pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(p,JSON.stringify(pkg,null,2));" && \
|
# Création manuelle de .techradar en copiant depuis node_modules
|
||||||
cd .techradar && npm install --legacy-peer-deps && npm run build:icons && cd ..
|
RUN mkdir -p .techradar && \
|
||||||
|
cp -r node_modules/aoe_technology_radar/* .techradar/
|
||||||
|
# Créer le fichier hash pour éviter la recréation (calculé séparément pour éviter les problèmes d'échappement)
|
||||||
|
RUN node -e "const crypto=require('crypto');const fs=require('fs');const hash=crypto.createHash('sha256').update(fs.readFileSync('package.json')).digest('hex');fs.writeFileSync('.techradar/hash',hash);"
|
||||||
|
RUN node -e "const fs=require('fs');const p='.techradar/package.json';if(!fs.existsSync(p)){console.error('.techradar/package.json not found');process.exit(1);}const pkg=JSON.parse(fs.readFileSync(p,'utf8'));pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(p,JSON.stringify(pkg,null,2));"
|
||||||
|
# Installer les dépendances dans .techradar (y compris devDependencies pour tsx nécessaire à build:data)
|
||||||
|
RUN cd .techradar && npm install --legacy-peer-deps --include=dev cytoscape cytoscape-cose-bilkent echarts-for-react
|
||||||
|
RUN cd .techradar && npm run build:icons
|
||||||
|
|
||||||
# --- CONFIGURATION BUSINESS ---
|
# --- CONFIGURATION BUSINESS ---
|
||||||
# Application de la logique Business (remplacement de la config et des données)
|
# Application de la logique Business (remplacement de la config et des données)
|
||||||
|
# Préserver la structure de dossiers par date pour que le framework puisse parser les dates
|
||||||
RUN cp radar-business/config-business.json config.json && \
|
RUN cp radar-business/config-business.json config.json && \
|
||||||
rm -rf radar/* && \
|
rm -rf radar/* && \
|
||||||
cp -r radar-business/2025-01-15/* radar/
|
mkdir -p radar/2025-01-15 && \
|
||||||
|
cp -r radar-business/2025-01-15/* radar/2025-01-15/
|
||||||
|
|
||||||
|
# Toujours régénérer les données de visualisation équipe (pour avoir les bons rings)
|
||||||
|
RUN echo "🔄 Régénération des données de visualisation équipe..." && \
|
||||||
|
node scripts/generate-team-visualization-data.js && \
|
||||||
|
echo "✅ Données de visualisation équipe générées" && \
|
||||||
|
echo "🔍 Vérification contenu team-visualization-data.json:" && \
|
||||||
|
ls -la public/team-visualization-data.json && \
|
||||||
|
head -20 public/team-visualization-data.json
|
||||||
|
|
||||||
|
# Copier les fichiers nécessaires dans .techradar avant le build (comme le fait techradar.js)
|
||||||
|
RUN rm -rf .techradar/data/radar && \
|
||||||
|
mkdir -p .techradar/data/radar/2025-01-15 && \
|
||||||
|
cp -r radar-business/2025-01-15/* .techradar/data/radar/2025-01-15/ && \
|
||||||
|
# Supprimer toute release de démo (2017-03-01, 2024-03-01, etc.) éventuellement recopiée depuis le package
|
||||||
|
find .techradar/data/radar -mindepth 1 -maxdepth 1 ! -name '2025-01-15' -exec rm -rf {} + && \
|
||||||
|
cp radar-business/config-business.json .techradar/data/config.json && \
|
||||||
|
rm -rf .techradar/public && mkdir -p .techradar/public && \
|
||||||
|
cp -r public/* .techradar/public/ && \
|
||||||
|
cp public/_team-content .techradar/public/_team-content 2>/dev/null || true && \
|
||||||
|
cp public/team-visualization-data.json .techradar/public/team-visualization-data.json 2>/dev/null || true && \
|
||||||
|
cp about.md .techradar/data/about.md 2>/dev/null || echo "about.md not found, skipping" && \
|
||||||
|
cp custom.css .techradar/src/styles/custom.css 2>/dev/null || echo "custom.css not found, skipping" && \
|
||||||
|
echo "Fichiers public copiés" && \
|
||||||
|
echo "📁 Vérification des fichiers team dans .techradar/public/:" && \
|
||||||
|
ls -la .techradar/public/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team trouvés" || (echo "⚠️ Fichiers team non trouvés dans .techradar/public/" && echo "📁 Contenu de public/ source:" && ls -la public/ | head -10) && \
|
||||||
|
echo "📁 Vérification que _team-content existe dans public/ source:" && \
|
||||||
|
test -f public/_team-content && echo "✅ public/_team-content existe" || echo "❌ public/_team-content n'existe pas"
|
||||||
|
|
||||||
|
# Diagnostic : compter les fichiers markdown copiés dans .techradar/data/radar
|
||||||
|
RUN echo "📊 Comptage des fichiers .md dans .techradar/data/radar" && \
|
||||||
|
find .techradar/data/radar -name "*.md" | wc -l && \
|
||||||
|
find .techradar/data/radar -name "*.md" | head -10
|
||||||
|
|
||||||
|
# Créer la page Next.js /team ET un fichier HTML statique /team/index.html
|
||||||
|
# La page Next.js pour le routing, le HTML statique pour garantir l'affichage
|
||||||
|
RUN mkdir -p .techradar/src/pages
|
||||||
|
COPY docker/team-page.tsx .techradar/src/pages/team.tsx
|
||||||
|
|
||||||
|
# Modifier _document.tsx pour charger team-block-script.js en premier (avant le rendu)
|
||||||
|
COPY docker/patch_document.py /tmp/patch_document.py
|
||||||
|
RUN python3 /tmp/patch_document.py && \
|
||||||
|
echo "📄 _document.tsx apres modification:" && \
|
||||||
|
cat .techradar/src/pages/_document.tsx
|
||||||
|
|
||||||
|
# Script Python pour ajouter le lien Équipe dans Navigation.tsx (supprime TOUS les doublons)
|
||||||
|
COPY docker/add_team_link.py /tmp/add_team_link.py
|
||||||
|
|
||||||
|
# Script shell pour gérer l'ajout du lien Équipe
|
||||||
|
COPY docker/add_team_link.sh /tmp/add_team_link.sh
|
||||||
|
RUN chmod +x /tmp/add_team_link.sh && \
|
||||||
|
echo "🔍 VÉRIFICATION: Scripts modifiés:" && \
|
||||||
|
echo "=== team-block-script.js ===" && \
|
||||||
|
head -10 public/team-block-script.js && \
|
||||||
|
echo "=== strategie-script.js ===" && \
|
||||||
|
grep -A 2 -B 1 "__blockTeamPages" public/strategie-script.js || echo "❌ Protection non trouvée" && \
|
||||||
|
echo "=== config-business.json ===" && \
|
||||||
|
grep "jsFile" radar-business/config-business.json
|
||||||
|
|
||||||
|
# Exécuter le script
|
||||||
|
RUN /tmp/add_team_link.sh
|
||||||
|
|
||||||
|
# Builder l'application en mode production pour éviter Fast Refresh
|
||||||
|
# Utiliser WORKDIR pour changer de répertoire de manière fiable
|
||||||
|
WORKDIR /app/.techradar
|
||||||
|
RUN npm run build:data
|
||||||
|
RUN npm run build
|
||||||
|
# S'assurer que _team-content.html et team-visualization-data.json sont copiés dans out/
|
||||||
|
# Next.js en mode export copie automatiquement les fichiers de public/, mais vérifions quand même
|
||||||
|
RUN if [ -d "out" ]; then \
|
||||||
|
echo "📁 Contenu de out/ avant copie:" && \
|
||||||
|
ls -la out/ | head -10 && \
|
||||||
|
echo "" && \
|
||||||
|
echo "🔍 Recherche de _team-content..." && \
|
||||||
|
if [ -f "public/_team-content" ]; then \
|
||||||
|
cp -v public/_team-content out/_team-content && echo "✅ _team-content copié depuis public/ vers out/"; \
|
||||||
|
elif [ -f "/app/public/_team-content" ]; then \
|
||||||
|
cp -v /app/public/_team-content out/_team-content && echo "✅ _team-content copié depuis /app/public/ vers out/"; \
|
||||||
|
else \
|
||||||
|
echo "⚠️ _team-content introuvable dans public/ ou /app/public/"; \
|
||||||
|
echo "📁 Contenu de public/:" && \
|
||||||
|
ls -la public/ 2>/dev/null | head -10 || echo "public/ non accessible"; \
|
||||||
|
echo "📁 Contenu de /app/public/:" && \
|
||||||
|
ls -la /app/public/ 2>/dev/null | head -10 || echo "/app/public/ non accessible"; \
|
||||||
|
fi && \
|
||||||
|
if [ -f "public/team-visualization-data.json" ]; then \
|
||||||
|
cp -v public/team-visualization-data.json out/team-visualization-data.json && echo "✅ team-visualization-data.json copié dans out/"; \
|
||||||
|
else \
|
||||||
|
echo "⚠️ public/team-visualization-data.json introuvable"; \
|
||||||
|
fi && \
|
||||||
|
if [ -d "public/team" ]; then \
|
||||||
|
mkdir -p out/team && \
|
||||||
|
cp -rv public/team/* out/team/ && echo "✅ /team/index.html copié dans out/team/"; \
|
||||||
|
elif [ -d "/app/.techradar/public/team" ]; then \
|
||||||
|
mkdir -p out/team && \
|
||||||
|
cp -rv /app/.techradar/public/team/* out/team/ && echo "✅ /team/index.html copié depuis /app/.techradar/public/team/"; \
|
||||||
|
fi && \
|
||||||
|
echo "🔍 VÉRIFICATION: _team-content dans out/:" && \
|
||||||
|
ls -la out/_team-content 2>/dev/null || echo "❌ _team-content absent de out/" && \
|
||||||
|
echo "" && \
|
||||||
|
echo "📁 Vérification finale dans out/:" && \
|
||||||
|
ls -la out/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team présents dans out/" || echo "⚠️ Fichiers team non trouvés dans out/"; \
|
||||||
|
else \
|
||||||
|
echo "❌ Dossier out/ introuvable après build"; \
|
||||||
|
ls -la . | head -20; \
|
||||||
|
fi && \
|
||||||
|
echo "" && \
|
||||||
|
echo "📋 Vérification finale de Navigation.tsx après build:" && \
|
||||||
|
grep -qE 'href="/team' src/components/Navigation/Navigation.tsx && echo "✅ Lien Équipe toujours présent dans Navigation.tsx après build" || echo "❌ Lien Équipe absent de Navigation.tsx après build" && \
|
||||||
|
echo "" && \
|
||||||
|
echo "🔍 Vérification des doublons dans le HTML généré..." && \
|
||||||
|
if [ -f "out/index.html" ]; then \
|
||||||
|
header_count=$(grep -oE '<header|<nav[^>]*>' out/index.html | wc -l | tr -d ' '); \
|
||||||
|
nav_count=$(grep -oE '<nav[^>]*>' out/index.html | wc -l | tr -d ' '); \
|
||||||
|
logo_count=$(grep -oE 'logo\.svg|logoFile|CoeurBox' out/index.html | wc -l | tr -d ' '); \
|
||||||
|
echo "📊 HTML généré: $header_count header/nav, $nav_count nav, $logo_count logo"; \
|
||||||
|
if [ "$header_count" -gt "2" ] || [ "$nav_count" -gt "2" ]; then \
|
||||||
|
echo "❌ ERREUR: Duplication détectée dans le HTML généré!"; \
|
||||||
|
echo "📄 Recherche des headers/nav dans index.html:"; \
|
||||||
|
grep -nE '<header|<nav' out/index.html | head -10 || true; \
|
||||||
|
exit 1; \
|
||||||
|
else \
|
||||||
|
echo "✅ HTML généré correct (pas de duplication structurelle)"; \
|
||||||
|
fi; \
|
||||||
|
if [ "$logo_count" -gt "5" ]; then \
|
||||||
|
echo "⚠️ ATTENTION: $logo_count références au logo dans le HTML (possible duplication)"; \
|
||||||
|
else \
|
||||||
|
echo "✅ Références logo correctes dans le HTML"; \
|
||||||
|
fi; \
|
||||||
|
else \
|
||||||
|
echo "⚠️ out/index.html non trouvé, vérification HTML ignorée"; \
|
||||||
|
fi
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
# Exposition du port interne
|
# Exposition du port interne
|
||||||
EXPOSE 3000
|
EXPOSE 3000
|
||||||
|
|||||||
27
Readme.md
27
Readme.md
@@ -9,21 +9,22 @@ Le projet est basé sur le framework [aoe_technology_radar](https://github.com/A
|
|||||||
Le projet contient deux radars distincts :
|
Le projet contient deux radars distincts :
|
||||||
|
|
||||||
1. **Radar Technique Principal** : Radar standard des technologies utilisées par AJR
|
1. **Radar Technique Principal** : Radar standard des technologies utilisées par AJR
|
||||||
2. **Radar Business** : Radar stratégique business pour analyser les technologies de l'écosystème Laplank/Duniter/Ğ1
|
2. **Radar Technologique Laplank** : Tech radar classique pour suivre l'évolution des technologies de l'écosystème Laplank/Duniter/Ğ1 avec historique par release
|
||||||
|
|
||||||
## Radar Business
|
## Radar Technologique Laplank
|
||||||
|
|
||||||
Le Radar Business est un outil stratégique accessible via le port **3004** avec une **protection par mot de passe** (`laplank-radar`).
|
Le Radar Technologique Laplank est un tech radar classique accessible via le port **3006** avec une **protection par mot de passe** (`laplank-radar`).
|
||||||
|
|
||||||
### Fonctionnalités
|
### Fonctionnalités
|
||||||
|
|
||||||
|
- **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 :
|
- **Pages de stratégie dynamiques** : Accès à trois pages de stratégie depuis le header :
|
||||||
- Stratégie Technique
|
- Stratégie Technique
|
||||||
- Business
|
- Business
|
||||||
- DataViz Expert
|
- DataViz Expert
|
||||||
- **Protection par mot de passe** : Accès restreint via un système d'authentification client-side
|
- **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)
|
- **Quadrants business** : Classification selon l'impact business (Différenciantes, Commodité, Risque, Émergentes)
|
||||||
- **Anneaux stratégiques** : Core, Strategic, Support, Legacy
|
- **Anneaux classiques** : Hold, Assess, Trial, Adopt
|
||||||
|
|
||||||
### Développement local
|
### Développement local
|
||||||
|
|
||||||
@@ -32,15 +33,15 @@ npm install
|
|||||||
npm run serve-business
|
npm run serve-business
|
||||||
```
|
```
|
||||||
|
|
||||||
Le serveur démarre sur http://localhost:3004
|
Le serveur démarre sur http://localhost:3006
|
||||||
|
|
||||||
### Déploiement
|
### Déploiement
|
||||||
|
|
||||||
Le Radar Business est déployé via Docker et Portainer :
|
Le Radar Technologique Laplank est déployé via Docker et Portainer :
|
||||||
|
|
||||||
- **Dockerfile** : `Dockerfile.business`
|
- **Dockerfile** : `Dockerfile.business`
|
||||||
- **Docker Compose** : `docker-compose.business.yml`
|
- **Docker Compose** : `docker-compose.business.yml`
|
||||||
- **Port** : 3004 (mappé depuis le port 3000 du conteneur)
|
- **Port** : 3006 (mappé depuis le port 3000 du conteneur)
|
||||||
- **Base path** : `/` (racine)
|
- **Base path** : `/` (racine)
|
||||||
|
|
||||||
## Content Guidelines
|
## Content Guidelines
|
||||||
@@ -84,9 +85,9 @@ npm run build
|
|||||||
|
|
||||||
La documentation complète est disponible dans le dossier `docs/` :
|
La documentation complète est disponible dans le dossier `docs/` :
|
||||||
|
|
||||||
- [Architecture](./docs/architecture.md)
|
- [Architecture](./docs/app/architecture.md)
|
||||||
- [Configuration](./docs/configuration.md)
|
- [Configuration](./docs/app/configuration.md)
|
||||||
- [Développement](./docs/developpement.md)
|
- [Développement](./docs/app/developpement.md)
|
||||||
- [Déploiement](./docs/deploiement.md)
|
- [Déploiement](./docs/app/deploiement.md)
|
||||||
- [Contribution](./docs/contribution.md)
|
- [Contribution](./docs/app/contribution.md)
|
||||||
- [Guide Radar Business](./docs/guide-radar-business.md)
|
- [Guide Radar Technologique Laplank](./docs/app/guide-radar-business.md)
|
||||||
85
about.md
85
about.md
@@ -1,79 +1,44 @@
|
|||||||
# How to use the AOE Technology Radar
|
# Comment utiliser le Radar Technologique Laplank
|
||||||
|
|
||||||
### Introduction
|
### Introduction
|
||||||
|
|
||||||
Technology is advancing rapidly, with new technologies and innovations constantly emerging.
|
Le monde de la technologie évolue à une vitesse fulgurante. Pour une organisation comme Laplank, il est crucial de rester à la pointe, d'évaluer constamment les nouvelles innovations et de remettre en question les technologies établies. Ce radar est un outil pour nous aider dans cette démarche.
|
||||||
|
|
||||||
It is essential for a development and technology company like AOE to continually improve and keep
|
### Qu'est-ce que le Radar Technologique Laplank ?
|
||||||
track of the latest valuable innovations. It is important to actively seek out innovations and new
|
|
||||||
technologies and periodically question established technologies and methods.
|
|
||||||
|
|
||||||
But, it is also important to wisely choose which technologies to use in our daily work and in the
|
Le Radar Technologique Laplank offre une vue d'ensemble des technologies (langages, frameworks, outils, méthodes, plateformes) que nous considérons pertinentes pour notre écosystème, en particulier autour de la monnaie libre Ğ1 et de l'infrastructure décentralisée. Il se concentre sur les éléments qui ont récemment gagné en importance ou qui ont subi des changements significatifs.
|
||||||
different projects we are carrying out. As we all know: There is no silver bullet.
|
|
||||||
|
|
||||||
### What is the AOE Technology Radar?
|
### Comment est-il créé ?
|
||||||
|
|
||||||
The Tech Radar provides an overview of different technologies, including languages, frameworks,
|
Les éléments du radar sont suggérés par les membres de l'équipe, souvent en lien avec les défis rencontrés dans nos projets. Chaque technologie est évaluée et classifiée après des discussions approfondies au sein des groupes d'experts. Nous n'incluons que des technologies que nous avons personnellement testées ou étudiées.
|
||||||
tools, and patterns, as well as platforms, that we consider 'new or noteworthy.' The radar does not
|
|
||||||
cover all established technologies; instead, it focuses on items that have recently gained
|
|
||||||
significance or undergone changes. Items previously featured in the radar are not listed on the
|
|
||||||
homepage but remain available in the complete overview and search.
|
|
||||||
|
|
||||||
### How it is created
|
### Comment l'utiliser ?
|
||||||
|
|
||||||
The items in the technology radar are suggested by different teams, many of which are related to the
|
Le radar sert de guide et d'inspiration pour le travail quotidien des équipes. Il vise à fournir une perspective de haut niveau pour prendre des décisions éclairées et coordonnées.
|
||||||
work and challenges faced by the teams in various projects. In fact, we do not include anything on
|
|
||||||
the radar that we haven't personally tested at least once.
|
|
||||||
|
|
||||||
Numerous valuable discussions have taken place in various expert groups regarding the classification
|
Nous classifions les éléments en quatre quadrants et quatre anneaux.
|
||||||
and details of each technology and innovation. The culmination of these discussions is reflected in
|
|
||||||
the latest technology radar.
|
|
||||||
|
|
||||||
### How should it be used
|
#### Les quadrants sont :
|
||||||
|
|
||||||
The radar serves as an overview of technologies that we believe everyone in the teams should be
|
- **Technologies Différenciantes** : Technologies qui créent un avantage concurrentiel et de la valeur différenciante pour le business. Ce sont les technologies qui nous permettent de nous distinguer sur le marché.
|
||||||
aware of at present.
|
- **Technologies de Commodité** : Technologies nécessaires mais non différenciantes. Elles sont essentielles au fonctionnement mais ne créent pas d'avantage concurrentiel direct. L'objectif est de les optimiser pour réduire les coûts et la complexité.
|
||||||
|
- **Technologies à Risque** : Technologies obsolètes, coûteuses ou présentant des risques techniques ou business importants. Il est recommandé de les migrer ou de les remplacer pour réduire les risques et les coûts.
|
||||||
|
- **Technologies Émergentes** : Technologies prometteuses représentant des opportunités futures. Elles sont à évaluer et potentiellement à adopter pour créer de nouveaux avantages compétitifs.
|
||||||
|
|
||||||
Its goal is to guide and inspire daily work within the teams. Additionally, it aims to provide
|
#### Chaque élément est classé dans l'un de ces anneaux :
|
||||||
valuable information and a high-level perspective to enable decisions to be made with a deeper
|
|
||||||
understanding of the subject matter, resulting in more informed and coordinated choices.
|
|
||||||
|
|
||||||
We also hope that developers outside of AOE will find the information in our technology overview
|
- **Adopt** : Nous recommandons pleinement cette technologie. Elle a été largement utilisée avec succès dans nos projets, prouvant sa stabilité, son utilité et sa maturité. Elle peut être adoptée en toute confiance pour de nouveaux projets.
|
||||||
inspiring.
|
*Exemples : Rust, Substrate Framework, Vue.js, JavaScript/TypeScript, Flutter, Dart, GitLab CI/CD, Linux, Docker, ThreeFold Blockchain.*
|
||||||
|
|
||||||
We categorize the items into four quadrants, and sometimes, when it's not entirely clear where an
|
- **Trial** : Nous avons mis en œuvre cette technologie avec succès dans des contextes spécifiques et suggérons de l'examiner de plus près. L'objectif est de la tester davantage avec l'intention de l'élever au niveau 'Adopt' si elle confirme son potentiel.
|
||||||
item belongs, we choose the best fit.
|
*Exemples : IPFS, Nostr, ThreeFold Grid, ThreeFold Cloud/Compute/Storage, D3.js, ECharts, Cytoscape.js, Grafana, Leaflet, Zero OS, Mycelium Network, AIBox, Ansible, OpenTofu.*
|
||||||
|
|
||||||
#### The quadrants are:
|
- **Assess** : Nous avons expérimenté cette technologie et la trouvons prometteuse. Nous recommandons de l'explorer lorsque vous rencontrez un besoin spécifique pour cette technologie dans votre projet. Une évaluation approfondie est nécessaire avant toute adoption.
|
||||||
|
*Exemples : Nuxt.js, PostgreSQL, Python, ProxMox, Cryptographie, Bash, Serverless, Kubernetes, NetlifyCMS, WordUp CMS, Squid.*
|
||||||
|
|
||||||
- **Languages & Frameworks:** In this category, we include development languages like Scala or
|
- **Hold** : Cette catégorie est unique. Elle conseille d'arrêter ou de s'abstenir d'utiliser certaines technologies pour de nouveaux projets. Cela n'implique pas nécessairement qu'elles sont intrinsèquement mauvaises, mais nous avons identifié de meilleures options ou alternatives, ou elles présentent des risques significatifs.
|
||||||
Golang, as well as low-level development frameworks such as Play or Symfony. These are valuable
|
*Exemples : (Actuellement aucune technologie n'est en 'Hold' dans ce radar, mais cela pourrait inclure des technologies obsolètes ou non maintenues).*
|
||||||
for implementing various types of custom software.
|
|
||||||
- **Tools:** This section is dedicated to a wide range of software tools, from small utilities to
|
|
||||||
more extensive software projects.
|
|
||||||
- **Methods & Patterns:** Patterns hold enduring significance, with many of them standing the test
|
|
||||||
of time compared to some tools or frameworks. This category is where we provide information on
|
|
||||||
methods and patterns related to development, continuous integration, testing, organization,
|
|
||||||
architecture, and more.
|
|
||||||
- **Platforms & Operations:** In this quadrant, we group technologies related to the operation of
|
|
||||||
software, infrastructure, and platform-related tools and services.
|
|
||||||
|
|
||||||
#### Each of the items is classified in one of these rings:
|
### Contribuer au Radar Technologique Laplank
|
||||||
|
|
||||||
- **Adopt:** We wholeheartedly recommend this technology. It has been extensively used in many teams
|
Les contributions et le code source du Radar Technologique Laplank sont disponibles sur notre dépôt Git.
|
||||||
for an extended period, proving its stability and utility.
|
|
||||||
- **Trial:** We have successfully implemented this technology and suggest taking a closer look at it
|
|
||||||
in this category. The aim here is to scrutinize these items more closely with the intention of
|
|
||||||
elevating them to the 'Adopt' level.
|
|
||||||
- **Assess:** We have experimented with this technology and find it promising. We recommend
|
|
||||||
exploring these items when you encounter a specific need for the technology in your project.
|
|
||||||
- **Hold:** This category is somewhat unique. Unlike the others, it advises discontinuing or
|
|
||||||
refraining from using certain technologies. This does not necessarily imply that they are
|
|
||||||
inherently bad; it often may be acceptable to use them in existing projects. However, we move
|
|
||||||
items here when we believe they should no longer be employed, as we have identified better options
|
|
||||||
or alternatives.
|
|
||||||
|
|
||||||
### Contributing to the AOE Technology Radar
|
|
||||||
|
|
||||||
Contributions and source code of the AOE Tech Radar are on
|
|
||||||
GitHub: [AOE Tech Radar on GitHub](https://github.com/AOEpeople/aoe_technology_radar)
|
|
||||||
|
|||||||
38
config.json
38
config.json
@@ -3,7 +3,7 @@
|
|||||||
"baseUrl": "",
|
"baseUrl": "",
|
||||||
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar-business/{release}/{id}.md",
|
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar-business/{release}/{id}.md",
|
||||||
"logoFile": "logo.svg",
|
"logoFile": "logo.svg",
|
||||||
"jsFile": "strategie-script.js",
|
"jsFile": "/team-block-script.js",
|
||||||
"toggles": {
|
"toggles": {
|
||||||
"showChart": true,
|
"showChart": true,
|
||||||
"showTagFilter": true,
|
"showTagFilter": true,
|
||||||
@@ -49,34 +49,34 @@
|
|||||||
],
|
],
|
||||||
"rings": [
|
"rings": [
|
||||||
{
|
{
|
||||||
"id": "core",
|
"id": "adopt",
|
||||||
"title": "Core",
|
"title": "Adopt",
|
||||||
"description": "Technologies critiques pour le business model. Indispensables au fonctionnement et à la création de valeur. Investissement prioritaire en maintenance et évolution.",
|
"description": "Technologies recommandées et utilisées avec succès en production. Elles sont stables, éprouvées et peuvent être adoptées en toute confiance pour de nouveaux projets. Utilisation active dans l'écosystème Duniter/Ğ1.",
|
||||||
"color": "#27ae60",
|
"color": "#27ae60",
|
||||||
"radius": 0.5,
|
"radius": 0.5,
|
||||||
"strokeWidth": 5
|
"strokeWidth": 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "strategic",
|
"id": "trial",
|
||||||
"title": "Strategic",
|
"title": "Trial",
|
||||||
"description": "Technologies stratégiques pour la croissance et le développement. Investissements importants pour renforcer la position concurrentielle.",
|
"description": "Technologies à essayer. Elles sont prometteuses et ont été testées avec succès dans certains contextes. À considérer pour de nouveaux projets. Technologies en phase d'expérimentation active.",
|
||||||
"color": "#3498db",
|
"color": "#3498db",
|
||||||
"radius": 0.69,
|
"radius": 0.69,
|
||||||
"strokeWidth": 4
|
"strokeWidth": 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "support",
|
"id": "assess",
|
||||||
"title": "Support",
|
"title": "Assess",
|
||||||
"description": "Technologies de support nécessaires mais non critiques. À maintenir à un niveau fonctionnel sans sur-investissement.",
|
"description": "Technologies à évaluer. Elles sont prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester. Technologies nécessitant une analyse plus poussée.",
|
||||||
"color": "#95a5a6",
|
"color": "#f39c12",
|
||||||
"radius": 0.85,
|
"radius": 0.85,
|
||||||
"strokeWidth": 3
|
"strokeWidth": 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "legacy",
|
"id": "hold",
|
||||||
"title": "Legacy",
|
"title": "Hold",
|
||||||
"description": "Technologies à remplacer. Présentent des risques techniques, des coûts élevés ou sont obsolètes. Planifier la migration vers des alternatives modernes.",
|
"description": "Technologies à éviter ou à remplacer. Elles présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets. Technologies à migrer ou remplacer.",
|
||||||
"color": "#c0392b",
|
"color": "#e74c3c",
|
||||||
"radius": 1,
|
"radius": 1,
|
||||||
"strokeWidth": 2
|
"strokeWidth": 2
|
||||||
}
|
}
|
||||||
@@ -105,20 +105,20 @@
|
|||||||
"social": [],
|
"social": [],
|
||||||
"imprint": "",
|
"imprint": "",
|
||||||
"labels": {
|
"labels": {
|
||||||
"title": "Radar Stratégique Business - Laplank",
|
"title": "Radar Technologique Laplank",
|
||||||
"imprint": "Informations légales",
|
"imprint": "Informations légales",
|
||||||
"quadrant": "Quadrant",
|
"quadrant": "Quadrant",
|
||||||
"quadrantOverview": "Vue d'ensemble des quadrants",
|
"quadrantOverview": "Vue d'ensemble des quadrants",
|
||||||
"zoomIn": "Zoomer",
|
"zoomIn": "Zoomer",
|
||||||
"filterByTag": "Filtrer par tag",
|
"filterByTag": "Filtrer par tag",
|
||||||
"footer": "Radar stratégique pour analyser les technologies de l'écosystème Laplank et définir une stratégie d'évolution technique alignée avec les objectifs business.",
|
"footer": "Radar technologique pour suivre l'évolution des technologies de l'écosystème Laplank avec historique des versions.",
|
||||||
"notUpdated": "Cet élément n'a pas été mis à jour dans les trois dernières versions du Radar.",
|
"notUpdated": "Cet élément n'a pas été mis à jour dans les trois dernières versions du Radar.",
|
||||||
"notFound": "404 - Page non trouvée",
|
"notFound": "404 - Page non trouvée",
|
||||||
"pageAbout": "Comment utiliser le Radar Business ?",
|
"pageAbout": "Comment utiliser le Radar Technologique ?",
|
||||||
"pageOverview": "Vue d'ensemble des technologies",
|
"pageOverview": "Vue d'ensemble des technologies",
|
||||||
"pageSearch": "Recherche",
|
"pageSearch": "Recherche",
|
||||||
"searchPlaceholder": "Que recherchez-vous ?",
|
"searchPlaceholder": "Que recherchez-vous ?",
|
||||||
"metaDescription": "Radar stratégique business pour l'écosystème Duniter/Ğ1 - Analyse des technologies et définition de la stratégie d'évolution."
|
"metaDescription": "Radar technologique pour l'écosystème Laplank - Suivi de l'évolution des technologies avec historique."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
143
custom.css
143
custom.css
@@ -1,2 +1,145 @@
|
|||||||
/* Use this file to optionally override global css styles and use with caution. */
|
/* Use this file to optionally override global css styles and use with caution. */
|
||||||
/* See README.md for hints and examples: https://github.com/AOEpeople/aoe_technology_radar/ */
|
/* See README.md for hints and examples: https://github.com/AOEpeople/aoe_technology_radar/ */
|
||||||
|
|
||||||
|
/* Améliorer la visibilité des icônes de navigation */
|
||||||
|
nav[class*="Navigation"] svg,
|
||||||
|
nav svg,
|
||||||
|
header nav svg {
|
||||||
|
fill: #2ecc71 !important;
|
||||||
|
width: 22px !important;
|
||||||
|
height: 22px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 6px !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* S'assurer que les liens de navigation sont visibles */
|
||||||
|
nav[class*="Navigation"] a,
|
||||||
|
nav a,
|
||||||
|
header nav a {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
color: #fff !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[class*="Navigation"] a:hover,
|
||||||
|
nav a:hover,
|
||||||
|
header nav a:hover {
|
||||||
|
color: #2ecc71 !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CORRECTION RADICALE DES LABELS DE QUADRANTS */
|
||||||
|
/* Labels compacts mais lisibles, très éloignés des cercles */
|
||||||
|
[class*="Radar_radar"] [class*="Label_label"],
|
||||||
|
[class*="Label_label"] {
|
||||||
|
width: 180px !important;
|
||||||
|
max-width: 180px !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
background: rgba(26, 77, 58, 0.95) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Taille de texte lisible */
|
||||||
|
[class*="Label_label"] [class*="title"],
|
||||||
|
[class*="Label_label"] h3 {
|
||||||
|
font-size: 15px !important;
|
||||||
|
margin: 0 0 8px 0 !important;
|
||||||
|
line-height: 1.3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="Label_label"] [class*="description"],
|
||||||
|
[class*="Label_label"] p {
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="Label_label"] [class*="header"] {
|
||||||
|
font-size: 11px !important;
|
||||||
|
padding: 8px 0 !important;
|
||||||
|
margin: 0 0 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quadrant 1 (en haut à gauche) - TRÈS ÉLOIGNÉ */
|
||||||
|
[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-1"],
|
||||||
|
[class*="Label_position-1"] {
|
||||||
|
left: 10px !important;
|
||||||
|
top: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quadrant 2 (en haut à droite) - TRÈS ÉLOIGNÉ */
|
||||||
|
[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-2"],
|
||||||
|
[class*="Label_position-2"] {
|
||||||
|
right: 10px !important;
|
||||||
|
top: 10px !important;
|
||||||
|
left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quadrant 3 (en bas à gauche) - TRÈS ÉLOIGNÉ */
|
||||||
|
[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-3"],
|
||||||
|
[class*="Label_position-3"] {
|
||||||
|
left: 10px !important;
|
||||||
|
bottom: 10px !important;
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quadrant 4 (en bas à droite) - DESCENDU tout en bas */
|
||||||
|
[class*="Radar_radar"] [class*="Label_label"][class*="Label_position-4"],
|
||||||
|
[class*="Label_position-4"] {
|
||||||
|
right: 10px !important;
|
||||||
|
bottom: 10px !important;
|
||||||
|
left: auto !important;
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajuster la légende - positionnée tout en bas à droite */
|
||||||
|
[class*="Radar_radar"] [class*="Legend_legend"],
|
||||||
|
[class*="Legend_legend"] {
|
||||||
|
z-index: 100 !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
background: rgba(26, 77, 58, 0.95) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
max-width: 180px !important;
|
||||||
|
position: absolute !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="Legend_legend"] li {
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
margin-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sur les grands écrans, positionner la légende ENCORE PLUS HAUT */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
[class*="Radar_radar"] [class*="Legend_legend"],
|
||||||
|
[class*="Legend_legend"] {
|
||||||
|
right: 10px !important;
|
||||||
|
bottom: 320px !important;
|
||||||
|
left: auto !important;
|
||||||
|
top: auto !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sur les écrans moyens, centrer la légende ENCORE PLUS HAUT */
|
||||||
|
@media (min-width: 768px) and (max-width: 1199px) {
|
||||||
|
[class*="Radar_radar"] [class*="Legend_legend"],
|
||||||
|
[class*="Legend_legend"] {
|
||||||
|
left: 50% !important;
|
||||||
|
right: auto !important;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
bottom: 320px !important;
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
<h1 style="color: #1a4d3a; border-bottom: 3px solid #2ecc71; padding-bottom: 10px;">Stratégie d'Évolution Technique - Laplank</h1>
|
<h1 style="color: #1a4d3a; border-bottom: 3px solid #2ecc71; padding-bottom: 10px;">Stratégie d'Évolution Technique - Laplank</h1>
|
||||||
<p><strong>Date de mise à jour</strong> : 02/12/2025</p>
|
<p><strong>Date de mise à jour</strong> : 02/12/2025</p>
|
||||||
<p>La stratégie complète est disponible dans le dépôt Git :</p>
|
<p>La stratégie complète est disponible dans le dépôt Git :</p>
|
||||||
<p><a href="https://git.open.us.org/AJR/TechradarDev/-/blob/dev-biz/docs/strategie-evolution-technique.md" target="_blank" style="color: #2ecc71; font-weight: bold;">📋 Voir la stratégie sur GitLab</a></p>
|
<p><a href="https://git.open.us.org/AJR/TechradarDev/-/blob/dev-biz/docs/data/strategie-evolution-technique.md" target="_blank" style="color: #2ecc71; font-weight: bold;">📋 Voir la stratégie sur GitLab</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -2,15 +2,22 @@ version: '3.8'
|
|||||||
|
|
||||||
services:
|
services:
|
||||||
radar-business:
|
radar-business:
|
||||||
container_name: laplank-radar-business
|
container_name: laplank-radar-technolologique
|
||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile.business
|
dockerfile: Dockerfile.business
|
||||||
|
pull: true # Force le pull de l'image de base pour éviter le cache
|
||||||
|
args:
|
||||||
|
BUILD_DATE: "${BUILD_DATE:-$(date +%s)}"
|
||||||
|
BUILD_VERSION: "${BUILD_VERSION:-dev}"
|
||||||
|
CACHE_BUST: "${CACHE_BUST:-$(date +%s%N)}" # Nanosecondes pour garantir l'unicité et forcer l'invalidation
|
||||||
|
# Note: no_cache n'est pas supporté dans docker-compose
|
||||||
|
# Pour forcer le rebuild sans cache dans Portainer, utilisez l'option "Rebuild" avec "No cache" dans l'interface
|
||||||
# Si vous utilisez une image pré-bâtie, décommentez image et commentez build
|
# Si vous utilisez une image pré-bâtie, décommentez image et commentez build
|
||||||
# image: votre-registre/laplank-radar-business:latest
|
# image: votre-registre/laplank-radar-business:latest
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- "3004:3000" # Mappe le port 3004 de l'hôte vers le port 3000 du conteneur
|
- "3006:3000" # Mappe le port 3006 de l'hôte vers le port 3000 du conteneur
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
# Optionnel : Persistance des logs si nécessaire
|
# Optionnel : Persistance des logs si nécessaire
|
||||||
|
|||||||
195
docker/add_team_link.py
Normal file
195
docker/add_team_link.py
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
import sys
|
||||||
|
import re
|
||||||
|
import os
|
||||||
|
|
||||||
|
f = ".techradar/src/components/Navigation/Navigation.tsx"
|
||||||
|
|
||||||
|
try:
|
||||||
|
# Vérifier que le fichier existe
|
||||||
|
if not os.path.exists(f):
|
||||||
|
print(f"❌ Fichier {f} introuvable", file=sys.stderr)
|
||||||
|
sys.exit(1)
|
||||||
|
|
||||||
|
with open(f, 'r', encoding='utf-8') as file:
|
||||||
|
content = file.read()
|
||||||
|
|
||||||
|
# VÉRIFICATION PRÉLIMINAIRE: Détecter les doublons structurels
|
||||||
|
print("🔍 Vérification de la structure du composant...")
|
||||||
|
|
||||||
|
# Compter les éléments structurels
|
||||||
|
nav_patterns = [
|
||||||
|
r'<nav\s',
|
||||||
|
r'className.*[Nn]avigation',
|
||||||
|
r'export\s+(default\s+)?function\s+Navigation',
|
||||||
|
r'const\s+Navigation\s*='
|
||||||
|
]
|
||||||
|
nav_count = sum(len(re.findall(pattern, content)) for pattern in nav_patterns)
|
||||||
|
|
||||||
|
# Compter les <ul> (peut y en avoir 2 pour mobile/desktop)
|
||||||
|
ul_count = len(re.findall(r'<ul[^>]*>', content))
|
||||||
|
|
||||||
|
# Compter les logos (Image avec logo ou logoFile)
|
||||||
|
logo_patterns = [
|
||||||
|
r'logoFile',
|
||||||
|
r'logo\.svg',
|
||||||
|
r'[Ll]ogo',
|
||||||
|
r'Image.*logo'
|
||||||
|
]
|
||||||
|
logo_count = sum(len(re.findall(pattern, content)) for pattern in logo_patterns)
|
||||||
|
|
||||||
|
# Compter les fonctions Navigation
|
||||||
|
function_count = len(re.findall(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content))
|
||||||
|
|
||||||
|
print(f"📊 Structure détectée: {nav_count} nav, {ul_count} ul, {logo_count} logo, {function_count} fonction(s)")
|
||||||
|
|
||||||
|
# Détecter les duplications structurelles
|
||||||
|
if function_count > 1:
|
||||||
|
print(f"⚠️ ATTENTION: {function_count} fonction(s) Navigation détectée(s) - possible duplication du composant", file=sys.stderr)
|
||||||
|
# Extraire uniquement la première fonction Navigation
|
||||||
|
matches = list(re.finditer(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content))
|
||||||
|
if len(matches) > 1:
|
||||||
|
# Garder seulement jusqu'à la fin de la première fonction
|
||||||
|
first_end = matches[1].start() if len(matches) > 1 else len(content)
|
||||||
|
content = content[:first_end]
|
||||||
|
# Trouver la fin de la fonction (dernière accolade fermante avant la prochaine fonction)
|
||||||
|
brace_count = 0
|
||||||
|
in_function = False
|
||||||
|
for i, char in enumerate(content[matches[0].start():], matches[0].start()):
|
||||||
|
if char == '{':
|
||||||
|
brace_count += 1
|
||||||
|
in_function = True
|
||||||
|
elif char == '}':
|
||||||
|
brace_count -= 1
|
||||||
|
if in_function and brace_count == 0:
|
||||||
|
content = content[:i+1]
|
||||||
|
break
|
||||||
|
print(f"✅ Duplication du composant supprimée")
|
||||||
|
|
||||||
|
if ul_count > 3: # Plus de 3 ul suggère une duplication
|
||||||
|
print(f"⚠️ ATTENTION: {ul_count} éléments <ul> détectés - possible duplication", file=sys.stderr)
|
||||||
|
|
||||||
|
if logo_count > 5: # Plus de 5 références au logo suggère une duplication
|
||||||
|
print(f"⚠️ ATTENTION: {logo_count} références au logo détectées - possible duplication", file=sys.stderr)
|
||||||
|
|
||||||
|
# ÉTAPE 1: Supprimer TOUS les liens Équipe existants (même s'il n'y en a qu'un)
|
||||||
|
print("🧹 Nettoyage de tous les liens Équipe existants...")
|
||||||
|
|
||||||
|
# APPROCHE AGRESSIVE: Supprimer tous les blocs <li> contenant un lien vers /team
|
||||||
|
# Utiliser plusieurs patterns pour capturer tous les cas possibles
|
||||||
|
# Pattern 1: <li>...<Link href="/team"...>...</Link>...</li>
|
||||||
|
team_link_block_pattern = r'<li[^>]*>.*?<Link[^>]*href=["\']/?team(/|\.html)?["\'][^>]*>.*?</Link>.*?</li>'
|
||||||
|
content_cleaned = re.sub(team_link_block_pattern, '', content, flags=re.DOTALL | re.IGNORECASE)
|
||||||
|
|
||||||
|
# Pattern 2: Supprimer aussi les lignes contenant href="/team" même si elles ne sont pas dans un <li> complet
|
||||||
|
content_cleaned = re.sub(r'.*href=["\']/?team(/|\.html)?["\'].*\n', '', content_cleaned, flags=re.IGNORECASE)
|
||||||
|
|
||||||
|
# Pattern 3: Supprimer les blocs <li> qui pourraient contenir /team sur plusieurs lignes (format différent)
|
||||||
|
content_cleaned = re.sub(r'<li[^>]*>.*?/team.*?</li>', '', content_cleaned, flags=re.DOTALL | re.IGNORECASE)
|
||||||
|
|
||||||
|
# Compter combien de liens ont été supprimés
|
||||||
|
remaining_before = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content))
|
||||||
|
remaining_after = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
|
||||||
|
team_links_removed = remaining_before - remaining_after
|
||||||
|
|
||||||
|
if team_links_removed > 0:
|
||||||
|
print(f"✅ {team_links_removed} lien(s) Équipe supprimé(s) (regex multiligne)")
|
||||||
|
elif remaining_after > 0:
|
||||||
|
print(f"⚠️ {remaining_after} lien(s) Équipe encore présent(s) après nettoyage regex, nettoyage manuel...")
|
||||||
|
# Nettoyage manuel ligne par ligne si la regex n'a pas tout capturé
|
||||||
|
lines = content_cleaned.splitlines(keepends=True)
|
||||||
|
if lines and not lines[-1].endswith('\n'):
|
||||||
|
lines[-1] = lines[-1] + '\n'
|
||||||
|
|
||||||
|
new_lines = []
|
||||||
|
skip_team_link = False
|
||||||
|
manual_removed = 0
|
||||||
|
|
||||||
|
i = 0
|
||||||
|
while i < len(lines):
|
||||||
|
line = lines[i]
|
||||||
|
|
||||||
|
# Détecter le début d'un lien Équipe
|
||||||
|
team_link_match = re.search(r'href=["\']/?team(/|\.html)?["\']|href=\{["\']/?team', line)
|
||||||
|
if team_link_match and not skip_team_link:
|
||||||
|
skip_team_link = True
|
||||||
|
manual_removed += 1
|
||||||
|
i += 1
|
||||||
|
continue
|
||||||
|
|
||||||
|
if skip_team_link:
|
||||||
|
if '</li>' in line:
|
||||||
|
skip_team_link = False
|
||||||
|
i += 1
|
||||||
|
continue
|
||||||
|
|
||||||
|
new_lines.append(line)
|
||||||
|
i += 1
|
||||||
|
|
||||||
|
if manual_removed > 0:
|
||||||
|
content_cleaned = ''.join(new_lines)
|
||||||
|
print(f"✅ {manual_removed} lien(s) Équipe supplémentaire(s) supprimé(s) (nettoyage manuel)")
|
||||||
|
|
||||||
|
lines = content_cleaned.splitlines(keepends=True)
|
||||||
|
if lines and not lines[-1].endswith('\n'):
|
||||||
|
lines[-1] = lines[-1] + '\n'
|
||||||
|
|
||||||
|
# ÉTAPE 2: Vérifier qu'il n'y a plus aucun lien team avant d'ajouter
|
||||||
|
final_check = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
|
||||||
|
if final_check > 0:
|
||||||
|
print(f"⚠️ ATTENTION: {final_check} lien(s) Équipe encore présent(s) après nettoyage, nettoyage supplémentaire...", file=sys.stderr)
|
||||||
|
# Nettoyage supplémentaire avec une regex plus agressive
|
||||||
|
content_cleaned = re.sub(r'.*?href=["\']/?team(/|\.html)?["\'].*?\n', '', content_cleaned, flags=re.MULTILINE | re.IGNORECASE)
|
||||||
|
# Supprimer aussi les blocs <li> vides qui pourraient rester
|
||||||
|
content_cleaned = re.sub(r'<li[^>]*>\s*</li>\s*\n', '', content_cleaned)
|
||||||
|
final_check_2 = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
|
||||||
|
if final_check_2 > 0:
|
||||||
|
print(f"❌ ERREUR: {final_check_2} lien(s) Équipe toujours présent(s) après nettoyage supplémentaire!", file=sys.stderr)
|
||||||
|
print("📄 Contenu autour des liens restants:", file=sys.stderr)
|
||||||
|
for match in re.finditer(r'href=["\']/?team(/|\.html)?["\']', content_cleaned):
|
||||||
|
start = max(0, match.start() - 50)
|
||||||
|
end = min(len(content_cleaned), match.end() + 50)
|
||||||
|
print(f" {content_cleaned[start:end]}", file=sys.stderr)
|
||||||
|
else:
|
||||||
|
print(f"✅ Tous les liens Équipe supprimés après nettoyage supplémentaire")
|
||||||
|
|
||||||
|
# ÉTAPE 3: Ajouter un seul lien Équipe au bon endroit
|
||||||
|
insert_idx = -1
|
||||||
|
for i, line in enumerate(lines):
|
||||||
|
if 'href="/overview"' in line:
|
||||||
|
for j in range(i, min(i+10, len(lines))):
|
||||||
|
if '</Link>' in lines[j] and j+1 < len(lines) and '</li>' in lines[j+1]:
|
||||||
|
insert_idx = j + 2
|
||||||
|
break
|
||||||
|
break
|
||||||
|
|
||||||
|
if insert_idx > 0:
|
||||||
|
new_lines = lines[:insert_idx] + [
|
||||||
|
' <li className={styles.item}>\n',
|
||||||
|
' <Link href="/team">\n',
|
||||||
|
' <span className={styles.label}>👥 Équipe</span>\n',
|
||||||
|
' </Link>\n',
|
||||||
|
' </li>\n'
|
||||||
|
] + lines[insert_idx:]
|
||||||
|
with open(f, 'w', encoding='utf-8') as file:
|
||||||
|
file.writelines(new_lines)
|
||||||
|
|
||||||
|
# Vérifier qu'il n'y a qu'un seul lien maintenant (inclut /team, /team/, /team.html)
|
||||||
|
with open(f, 'r', encoding='utf-8') as file:
|
||||||
|
final_content = file.read()
|
||||||
|
final_count = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', final_content))
|
||||||
|
|
||||||
|
if final_count == 1:
|
||||||
|
print("✅ Navigation.tsx modifié - 1 seul lien Équipe présent")
|
||||||
|
sys.exit(0)
|
||||||
|
else:
|
||||||
|
print(f"⚠️ Attention: {final_count} lien(s) Équipe détecté(s) après modification", file=sys.stderr)
|
||||||
|
sys.exit(1)
|
||||||
|
else:
|
||||||
|
print("❌ Impossible de trouver l'emplacement pour insérer le lien", file=sys.stderr)
|
||||||
|
sys.exit(1)
|
||||||
|
except Exception as e:
|
||||||
|
print(f"❌ Erreur Python: {e}", file=sys.stderr)
|
||||||
|
import traceback
|
||||||
|
traceback.print_exc(file=sys.stderr)
|
||||||
|
sys.exit(1)
|
||||||
97
docker/add_team_link.sh
Normal file
97
docker/add_team_link.sh
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
set -e
|
||||||
|
|
||||||
|
echo "🔧 Modification de Navigation.tsx pour le lien Équipe..."
|
||||||
|
|
||||||
|
NAV_FILE=".techradar/src/components/Navigation/Navigation.tsx"
|
||||||
|
|
||||||
|
# Vérifier que le fichier existe
|
||||||
|
if [ ! -f "$NAV_FILE" ]; then
|
||||||
|
echo "❌ Fichier $NAV_FILE introuvable"
|
||||||
|
echo "📁 Répertoire actuel: $(pwd)"
|
||||||
|
echo "📁 Contenu de .techradar/src/components/:"
|
||||||
|
ls -la .techradar/src/components/ 2>/dev/null || echo "Répertoire non trouvé"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Exécuter le script Python
|
||||||
|
if python3 /tmp/add_team_link.py; then
|
||||||
|
# Vérifier le résultat (inclut /team, /team/, /team.html)
|
||||||
|
team_count=$(grep -cE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
echo "📊 Nombre d'occurrences trouvées: $team_count"
|
||||||
|
|
||||||
|
if [ "$team_count" -eq "1" ]; then
|
||||||
|
echo "✅ Lien Équipe présent (1 occurrence)"
|
||||||
|
elif [ "$team_count" -gt "1" ]; then
|
||||||
|
echo "❌ ERREUR: $team_count occurrences détectées - affichage des occurrences:"
|
||||||
|
grep -nE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" || true
|
||||||
|
echo "⚠️ Relance du nettoyage..."
|
||||||
|
python3 /tmp/add_team_link.py
|
||||||
|
final_count=$(grep -cE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$final_count" -gt "1" ]; then
|
||||||
|
echo "❌ ERREUR CRITIQUE: $final_count occurrences encore présentes après nettoyage!"
|
||||||
|
echo "📄 Aperçu complet de Navigation.tsx:"
|
||||||
|
cat "$NAV_FILE" || true
|
||||||
|
exit 1
|
||||||
|
else
|
||||||
|
echo "✅ Après nettoyage: $final_count occurrence(s)"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
echo "❌ Lien Équipe non trouvé après modification"
|
||||||
|
echo "📄 Aperçu de Navigation.tsx (premières 50 lignes):"
|
||||||
|
head -50 "$NAV_FILE" || true
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# VÉRIFICATIONS POST-MODIFICATION: Détecter les doublons structurels
|
||||||
|
echo "🔍 Vérification des doublons structurels..."
|
||||||
|
|
||||||
|
# Compter les fonctions Navigation
|
||||||
|
function_count=$(grep -cE '(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$function_count" -gt "1" ]; then
|
||||||
|
echo "❌ ERREUR: $function_count fonction(s) Navigation détectée(s) - duplication du composant!"
|
||||||
|
echo "📄 Recherche des fonctions Navigation:"
|
||||||
|
grep -nE '(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()' "$NAV_FILE" || true
|
||||||
|
exit 1
|
||||||
|
else
|
||||||
|
echo "✅ Composant Navigation unique ($function_count fonction)"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Compter les éléments <nav> ou className Navigation
|
||||||
|
nav_count=$(grep -cE '<nav\s|className.*[Nn]avigation' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$nav_count" -gt "2" ]; then
|
||||||
|
echo "⚠️ ATTENTION: $nav_count éléments nav détectés (attendu: 1-2)"
|
||||||
|
else
|
||||||
|
echo "✅ Structure nav correcte ($nav_count élément(s))"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Compter les éléments <ul>
|
||||||
|
ul_count=$(grep -c '<ul' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$ul_count" -gt "3" ]; then
|
||||||
|
echo "⚠️ ATTENTION: $ul_count éléments <ul> détectés (attendu: 1-3 pour mobile/desktop)"
|
||||||
|
else
|
||||||
|
echo "✅ Structure ul correcte ($ul_count élément(s))"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Compter les références au logo
|
||||||
|
logo_count=$(grep -cE 'logoFile|logo\.svg|[Ll]ogo' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$logo_count" -gt "5" ]; then
|
||||||
|
echo "⚠️ ATTENTION: $logo_count références au logo détectées (possible duplication)"
|
||||||
|
else
|
||||||
|
echo "✅ Références logo correctes ($logo_count référence(s))"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Vérifier qu'il n'y a qu'un seul export default
|
||||||
|
export_count=$(grep -c 'export default' "$NAV_FILE" 2>/dev/null || echo "0")
|
||||||
|
if [ "$export_count" -gt "1" ]; then
|
||||||
|
echo "❌ ERREUR: $export_count export default détectés - duplication du composant!"
|
||||||
|
exit 1
|
||||||
|
else
|
||||||
|
echo "✅ Export unique ($export_count export default)"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "✅ Toutes les vérifications structurelles passées"
|
||||||
|
else
|
||||||
|
echo "❌ Erreur lors de l'exécution du script Python"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
42
docker/patch_document.py
Normal file
42
docker/patch_document.py
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
# Script pour modifier _document.tsx et charger team-block-script.js en premier
|
||||||
|
|
||||||
|
import sys
|
||||||
|
|
||||||
|
doc_path = ".techradar/src/pages/_document.tsx"
|
||||||
|
|
||||||
|
try:
|
||||||
|
with open(doc_path, "r") as f:
|
||||||
|
content = f.read()
|
||||||
|
|
||||||
|
# Ajouter l'import de Script si pas present
|
||||||
|
if "import Script from 'next/script'" not in content and 'import Script from "next/script"' not in content:
|
||||||
|
content = content.replace(
|
||||||
|
'import { Head, Html, Main, NextScript } from "next/document";',
|
||||||
|
'import { Head, Html, Main, NextScript } from "next/document";\nimport Script from "next/script";'
|
||||||
|
)
|
||||||
|
|
||||||
|
# Ajouter le script dans <Head> avec strategy="beforeInteractive"
|
||||||
|
if "team-block-script.js" not in content:
|
||||||
|
# Trouver la fin de <Head /> et la remplacer par un <Head> avec contenu
|
||||||
|
if "<Head />" in content:
|
||||||
|
content = content.replace(
|
||||||
|
"<Head />",
|
||||||
|
'<Head>\n <Script src="/team-block-script.js" strategy="beforeInteractive" />\n </Head>'
|
||||||
|
)
|
||||||
|
elif "<Head>" in content and "</Head>" in content:
|
||||||
|
# Ajouter avant </Head>
|
||||||
|
content = content.replace(
|
||||||
|
"</Head>",
|
||||||
|
' <Script src="/team-block-script.js" strategy="beforeInteractive" />\n </Head>'
|
||||||
|
)
|
||||||
|
|
||||||
|
with open(doc_path, "w") as f:
|
||||||
|
f.write(content)
|
||||||
|
|
||||||
|
print("_document.tsx modifie pour charger team-block-script.js en premier")
|
||||||
|
sys.exit(0)
|
||||||
|
except Exception as e:
|
||||||
|
print(f"Erreur: {e}")
|
||||||
|
sys.exit(1)
|
||||||
|
|
||||||
5
docker/team-page.tsx
Normal file
5
docker/team-page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
// Page vide - le contenu est injecté par team-block-script.js via iframe
|
||||||
|
export default function TeamPage() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -2,29 +2,39 @@
|
|||||||
|
|
||||||
Bienvenue dans la documentation du projet AJR Technology Radar (CoeurBox).
|
Bienvenue dans la documentation du projet AJR Technology Radar (CoeurBox).
|
||||||
|
|
||||||
|
## Structure de la documentation
|
||||||
|
|
||||||
|
La documentation est organisée en deux catégories principales :
|
||||||
|
|
||||||
|
### 📚 Documentation de l'application (`app/`)
|
||||||
|
|
||||||
|
Documentation technique sur l'utilisation, le développement et le déploiement de l'application :
|
||||||
|
|
||||||
|
- **[Architecture](./app/architecture.md)** - Structure du projet, organisation des fichiers et composants
|
||||||
|
- **[Configuration](./app/configuration.md)** - Configuration du radar, quadrants, anneaux et personnalisation
|
||||||
|
- **[Développement](./app/developpement.md)** - Guide pour développer et tester localement
|
||||||
|
- **[Déploiement](./app/deploiement.md)** - Instructions pour déployer le radar en production
|
||||||
|
- **[Contribution](./app/contribution.md)** - Guide pour ajouter de nouvelles technologies au radar
|
||||||
|
- **[Guide Radar Technologique Laplank](./app/guide-radar-business.md)** - Guide d'utilisation du radar technologique Laplank
|
||||||
|
|
||||||
|
### 📊 Données utilisées par l'application (`data/`)
|
||||||
|
|
||||||
|
Données métier et contenu utilisé par l'application pour générer le radar :
|
||||||
|
|
||||||
|
- **[Technologies Duniter](./data/technologies-duniter.md)** - Liste des technologies de l'écosystème Duniter/Ğ1
|
||||||
|
- **[Profil Team](./data/profil-team.md)** - Profils et compétences des membres de l'équipe
|
||||||
|
- **[Stratégie d'Évolution Technique](./data/strategie-evolution-technique.md)** - Vision et roadmap technique
|
||||||
|
- **[Stratégie Business](./data/strategie-business.md)** - Analyse stratégique business
|
||||||
|
- **[Opportunités DataViz](./data/opportunites-dataviz.md)** - Opportunités en dataviz
|
||||||
|
- **[Opportunités DataViz Détails](./data/opportunites-dataviz-details.md)** - Détails des opportunités dataviz
|
||||||
|
- **[Analyse Stratégique](./data/analyse-strategique.md)** - Rapport d'analyse généré automatiquement
|
||||||
|
|
||||||
## Vue d'ensemble
|
## Vue d'ensemble
|
||||||
|
|
||||||
Le Technology Radar AJR est une application web interactive qui présente les technologies, outils, méthodes et plateformes utilisées et évaluées par AJR. Il est basé sur le framework [aoe_technology_radar](https://github.com/AOEpeople/aoe_technology_radar).
|
Le Technology Radar AJR est une application web interactive qui présente les technologies, outils, méthodes et plateformes utilisées et évaluées par AJR. Il est basé sur le framework [aoe_technology_radar](https://github.com/AOEpeople/aoe_technology_radar).
|
||||||
|
|
||||||
Le radar est organisé en quatre quadrants et quatre anneaux (rings) pour classifier chaque technologie selon son niveau d'adoption et sa catégorie.
|
Le radar est organisé en quatre quadrants et quatre anneaux (rings) pour classifier chaque technologie selon son niveau d'adoption et sa catégorie.
|
||||||
|
|
||||||
## Structure de la documentation
|
|
||||||
|
|
||||||
Cette documentation est organisée en plusieurs sections :
|
|
||||||
|
|
||||||
- **[Architecture](./architecture.md)** - Structure du projet, organisation des fichiers et composants
|
|
||||||
- **[Configuration](./configuration.md)** - Configuration du radar, quadrants, anneaux et personnalisation
|
|
||||||
- **[Développement](./developpement.md)** - Guide pour développer et tester localement
|
|
||||||
- **[Déploiement](./deploiement.md)** - Instructions pour déployer le radar en production
|
|
||||||
- **[Contribution](./contribution.md)** - Guide pour ajouter de nouvelles technologies au radar
|
|
||||||
|
|
||||||
### Radar Business
|
|
||||||
|
|
||||||
- **[Guide Radar Business](./guide-radar-business.md)** - Guide d'utilisation du radar stratégique business
|
|
||||||
- **[Analyse Stratégique](./analyse-strategique.md)** - Rapport d'analyse des patterns et recommandations
|
|
||||||
- **[Stratégie d'Évolution Technique](./strategie-evolution-technique.md)** - Vision et roadmap technique
|
|
||||||
- **[Technologies Duniter](./technologies-duniter.md)** - Liste des technologies de l'écosystème Duniter/Ğ1
|
|
||||||
|
|
||||||
## Liens utiles
|
## Liens utiles
|
||||||
|
|
||||||
- **Radar en ligne** : https://www.coeurbox.syoul.fr
|
- **Radar en ligne** : https://www.coeurbox.syoul.fr
|
||||||
@@ -44,18 +54,18 @@ npm run serve
|
|||||||
|
|
||||||
Puis ouvrir http://localhost:3000/techradar dans votre navigateur.
|
Puis ouvrir http://localhost:3000/techradar dans votre navigateur.
|
||||||
|
|
||||||
### Radar Business
|
### Radar Technologique Laplank
|
||||||
|
|
||||||
Pour démarrer le radar business en local :
|
Pour démarrer le radar technologique Laplank en local :
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
npm run serve-business
|
npm run serve-business
|
||||||
```
|
```
|
||||||
|
|
||||||
Le serveur démarre sur http://localhost:3004
|
Le serveur démarre sur http://localhost:3006
|
||||||
|
|
||||||
**Note** : Le radar business est protégé par un mot de passe (`laplank-radar`).
|
**Note** : Le radar technologique Laplank est protégé par un mot de passe (`laplank-radar`).
|
||||||
|
|
||||||
Pour plus de détails, consultez le [guide de développement](./developpement.md) et le [guide du radar business](./guide-radar-business.md).
|
Pour plus de détails, consultez le [guide de développement](./app/developpement.md) et le [guide du radar technologique Laplank](./app/guide-radar-business.md).
|
||||||
|
|
||||||
|
|||||||
156
docs/app/README.md
Normal file
156
docs/app/README.md
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
# Documentation AJR Technology Radar
|
||||||
|
|
||||||
|
Bienvenue dans la documentation du projet AJR Technology Radar (CoeurBox).
|
||||||
|
|
||||||
|
## Vue d'ensemble
|
||||||
|
|
||||||
|
Le Technology Radar AJR est une application web interactive qui présente les technologies, outils, méthodes et plateformes utilisées et évaluées par AJR. Il est basé sur le framework [aoe_technology_radar](https://github.com/AOEpeople/aoe_technology_radar).
|
||||||
|
|
||||||
|
Le radar est organisé en quatre quadrants et quatre anneaux (rings) pour classifier chaque technologie selon son niveau d'adoption et sa catégorie.
|
||||||
|
|
||||||
|
## Structure de la documentation
|
||||||
|
|
||||||
|
Cette documentation est organisée en plusieurs sections :
|
||||||
|
|
||||||
|
### Documentation technique
|
||||||
|
|
||||||
|
- **[Architecture](./architecture.md)** - Structure du projet, organisation des fichiers et composants
|
||||||
|
- **[Configuration](./configuration.md)** - Configuration du radar, quadrants, anneaux et personnalisation
|
||||||
|
- **[Développement](./developpement.md)** - Guide pour développer et tester localement
|
||||||
|
- **[Déploiement](./deploiement.md)** - Instructions pour déployer le radar en production
|
||||||
|
- **[Contribution](./contribution.md)** - Guide pour ajouter de nouvelles technologies au radar
|
||||||
|
- **[Guide Radar Business](./guide-radar-business.md)** - Guide d'utilisation du radar technologique Laplank
|
||||||
|
- **[Page Équipe & Technologies](./guide-page-equipe.md)** - Documentation de la page de visualisation équipe/technologies
|
||||||
|
- **[Dépannage](./troubleshooting.md)** - Guide de résolution des problèmes courants
|
||||||
|
|
||||||
|
### Données du Radar Technologique Laplank
|
||||||
|
|
||||||
|
Les données utilisées par l'application sont dans le dossier [`../data/`](../data/) :
|
||||||
|
|
||||||
|
- **[Technologies Duniter](../data/technologies-duniter.md)** - Liste des technologies de l'écosystème Duniter/Ğ1
|
||||||
|
- **[Profils Team](../data/team/)** - Profils individuels des membres de l'équipe (fichiers Markdown)
|
||||||
|
- **[Stratégie d'Évolution Technique](../data/strategie-evolution-technique.md)** - Vision et roadmap technique
|
||||||
|
- **[Stratégie Business](../data/strategie-business.md)** - Analyse stratégique business
|
||||||
|
- **[Analyse Stratégique](../data/analyse-strategique.md)** - Rapport d'analyse généré automatiquement
|
||||||
|
|
||||||
|
## Liens utiles
|
||||||
|
|
||||||
|
- **Radar en ligne** : https://www.coeurbox.syoul.fr
|
||||||
|
- **Radar Technologique Laplank** : http://laplank.techradar.syoul.fr:3006
|
||||||
|
- **Dépôt Git** : https://git.open.us.org/AJR/TechradarDev
|
||||||
|
- **Framework source** : https://github.com/AOEpeople/aoe_technology_radar
|
||||||
|
|
||||||
|
## Démarrage rapide
|
||||||
|
|
||||||
|
### Radar Principal
|
||||||
|
|
||||||
|
Pour démarrer rapidement le radar principal en local :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Puis ouvrir http://localhost:3000/techradar dans votre navigateur.
|
||||||
|
|
||||||
|
### Radar Technologique Laplank
|
||||||
|
|
||||||
|
Pour démarrer le radar technologique Laplank en local :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run serve-business
|
||||||
|
```
|
||||||
|
|
||||||
|
Le serveur démarre sur http://localhost:3006
|
||||||
|
|
||||||
|
**Note** : Le radar technologique Laplank est protégé par un mot de passe (`laplank-radar`).
|
||||||
|
|
||||||
|
Pour plus de détails, consultez le [guide de développement](./developpement.md) et le [guide du radar technologique Laplank](./guide-radar-business.md).
|
||||||
|
|
||||||
|
## Fonctionnalités principales
|
||||||
|
|
||||||
|
### Radar Technologique
|
||||||
|
|
||||||
|
- **Visualisation interactive** : Graphique radar avec zoom et filtres
|
||||||
|
- **Historique par release** : Suivi de l'évolution des technologies au fil du temps
|
||||||
|
- **Quadrants business** : Classification selon l'impact business
|
||||||
|
- **Anneaux classiques** : Hold, Assess, Trial, Adopt
|
||||||
|
- **Filtrage par tags** : Recherche et filtrage des technologies
|
||||||
|
- **Pages de stratégie** : Accès à la stratégie technique, business et opportunités
|
||||||
|
|
||||||
|
### Page Équipe & Technologies
|
||||||
|
|
||||||
|
- **Graphe réseau** : Visualisation des connexions technologies/membres
|
||||||
|
- **Matrice de congestion** : Identification des technologies avec faible couverture
|
||||||
|
- **Équipe de genèse MVP** : Composition automatique d'une équipe minimale
|
||||||
|
|
||||||
|
## Technologies utilisées
|
||||||
|
|
||||||
|
- **Next.js** : Framework React pour la génération statique
|
||||||
|
- **React** : Bibliothèque JavaScript pour l'interface utilisateur
|
||||||
|
- **TypeScript** : Typage statique
|
||||||
|
- **Cytoscape.js** : Visualisation de graphes
|
||||||
|
- **ECharts** : Visualisation de données (heatmaps, scatter plots)
|
||||||
|
- **Markdown** : Format des blips et profils
|
||||||
|
- **YAML** : Métadonnées dans les fichiers Markdown
|
||||||
|
|
||||||
|
## Structure du projet
|
||||||
|
|
||||||
|
```
|
||||||
|
TechradarDev/
|
||||||
|
├── radar-business/ # Contenu du radar business (actif)
|
||||||
|
│ ├── 2025-01-15/ # Blips organisés par release
|
||||||
|
│ └── config-business.json # Configuration
|
||||||
|
├── docs/
|
||||||
|
│ ├── app/ # Documentation technique
|
||||||
|
│ └── data/ # Données métier
|
||||||
|
│ └── team/ # Profils équipe individuels
|
||||||
|
├── public/ # Fichiers statiques
|
||||||
|
│ ├── team-block-script.js # Script principal pour la page equipe
|
||||||
|
│ └── team-visualization-data.json # Donnees equipe
|
||||||
|
├── scripts/ # Scripts utilitaires
|
||||||
|
└── Dockerfile.business # Dockerfile pour le déploiement
|
||||||
|
```
|
||||||
|
|
||||||
|
## Commandes principales
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Développement
|
||||||
|
npm run serve-business # Démarrer le serveur de développement (port 3006)
|
||||||
|
|
||||||
|
# Génération de données
|
||||||
|
node scripts/generate-team-visualization-data.js # Générer les données équipe
|
||||||
|
node scripts/extract-technologies.js # Extraire les technologies
|
||||||
|
node scripts/analyze-business-metrics.js # Analyser les métriques
|
||||||
|
|
||||||
|
# Build
|
||||||
|
npm run build # Build de production
|
||||||
|
```
|
||||||
|
|
||||||
|
## Problèmes courants
|
||||||
|
|
||||||
|
Consultez le [guide de dépannage](./troubleshooting.md) pour les problèmes courants :
|
||||||
|
|
||||||
|
- Doublons de liens dans la navigation
|
||||||
|
- Seulement quelques blips affichés
|
||||||
|
- Page équipe inaccessible
|
||||||
|
- Données de visualisation manquantes
|
||||||
|
|
||||||
|
## Contribution
|
||||||
|
|
||||||
|
Pour contribuer au projet :
|
||||||
|
|
||||||
|
1. Lire le [guide de contribution](./contribution.md)
|
||||||
|
2. Créer une branche pour vos modifications
|
||||||
|
3. Ajouter/modifier les blips dans `radar-business/2025-01-15/`
|
||||||
|
4. Tester localement avec `npm run serve-business`
|
||||||
|
5. Créer une pull request
|
||||||
|
|
||||||
|
## Support
|
||||||
|
|
||||||
|
Pour toute question :
|
||||||
|
- Consulter la documentation dans `docs/app/`
|
||||||
|
- Vérifier le [guide de dépannage](./troubleshooting.md)
|
||||||
|
- Ouvrir une issue sur le dépôt Git
|
||||||
|
- Contacter l'équipe technique
|
||||||
258
docs/app/architecture.md
Normal file
258
docs/app/architecture.md
Normal file
@@ -0,0 +1,258 @@
|
|||||||
|
# Architecture du projet
|
||||||
|
|
||||||
|
## Vue d'ensemble
|
||||||
|
|
||||||
|
Le projet AJR Technology Radar est une application web statique construite avec le framework `aoe_technology_radar` (basé sur Next.js). L'application génère un site web interactif à partir de fichiers Markdown organisés par dates de release.
|
||||||
|
|
||||||
|
## Structure des répertoires
|
||||||
|
|
||||||
|
```
|
||||||
|
TechradarDev/
|
||||||
|
├── radar/ # Contenu du radar principal organisé par dates (déprécié)
|
||||||
|
│ └── 2025-01-15/ # Release de janvier 2025
|
||||||
|
├── radar-business/ # Contenu du radar business (actif)
|
||||||
|
│ ├── 2025-01-15/ # Release business de janvier 2025
|
||||||
|
│ ├── config-business.json # Configuration du radar business
|
||||||
|
│ ├── FORMAT-BLIP.md # Format des blips business
|
||||||
|
│ └── README.md # Documentation du radar business
|
||||||
|
├── public/ # Fichiers statiques publics
|
||||||
|
│ ├── images/ # Images utilisees dans les descriptions
|
||||||
|
│ ├── logo.svg # Logo AJR
|
||||||
|
│ ├── favicon.ico # Icone du site
|
||||||
|
│ ├── robots.txt # Configuration pour les robots
|
||||||
|
│ ├── strategie-script.js # Script pour les pages de strategie dynamiques
|
||||||
|
│ ├── strategie-link.js # Script alternatif pour les liens strategie
|
||||||
|
│ ├── team-block-script.js # Script principal pour la page equipe (injection DOM)
|
||||||
|
│ ├── _team-content # Contenu HTML de reference pour la page equipe
|
||||||
|
│ └── team-visualization-data.json # Donnees JSON pour les visualisations
|
||||||
|
├── scripts/ # Scripts utilitaires
|
||||||
|
│ ├── serve-business.sh # Script pour servir le radar business en local
|
||||||
|
│ ├── start-business.sh # Script de démarrage pour Docker
|
||||||
|
│ ├── extract-technologies.js # Extraction des technologies depuis la doc
|
||||||
|
│ ├── analyze-business-metrics.js # Analyse des métriques business
|
||||||
|
│ ├── generate-team-visualization-data.js # Génération des données équipe
|
||||||
|
│ ├── create-team-page.sh # Script pour créer la page équipe
|
||||||
|
│ └── patch-navigation.sh # Script pour patcher Navigation.tsx
|
||||||
|
├── docker/ # Configuration Docker pour le déploiement
|
||||||
|
│ ├── Dockerfile # Image Docker de production
|
||||||
|
│ ├── docker-compose.yml # Configuration Docker Compose
|
||||||
|
│ ├── docker-compose.labels.yml # Labels pour le déploiement
|
||||||
|
│ └── docker-compose.local.yml # Configuration locale
|
||||||
|
├── docs/ # Documentation du projet
|
||||||
|
│ ├── app/ # Documentation technique de l'application
|
||||||
|
│ └── data/ # Données métier et contenu
|
||||||
|
│ └── team/ # Profils individuels des membres de l'équipe
|
||||||
|
├── .techradar/ # Framework aoe_technology_radar (généré pendant le build)
|
||||||
|
│ ├── src/ # Code source Next.js du framework
|
||||||
|
│ │ ├── pages/ # Pages Next.js (routes)
|
||||||
|
│ │ │ └── team.tsx # Page /team générée par Dockerfile
|
||||||
|
│ │ └── components/ # Composants React
|
||||||
|
│ │ └── Navigation/ # Composant de navigation
|
||||||
|
│ │ └── Navigation.tsx # Modifié par Dockerfile pour ajouter le lien Équipe
|
||||||
|
│ ├── data/ # Données du radar
|
||||||
|
│ │ ├── config.json # Configuration (copiée depuis config-business.json)
|
||||||
|
│ │ └── radar/ # Blips organisés par release
|
||||||
|
│ │ └── 2025-01-15/ # Blips de la release actuelle
|
||||||
|
│ └── public/ # Fichiers statiques servis
|
||||||
|
│ ├── team.html # Page équipe (copiée depuis public/)
|
||||||
|
│ └── team-visualization-data.json # Données équipe (copiée depuis public/)
|
||||||
|
├── config.json # Configuration principale du radar (déprécié)
|
||||||
|
├── custom.css # Styles personnalisés
|
||||||
|
├── about.md # Page "À propos" du radar
|
||||||
|
├── package.json # Dépendances Node.js
|
||||||
|
├── Dockerfile # Dockerfile alternatif (racine)
|
||||||
|
├── Dockerfile.business # Dockerfile pour le radar business
|
||||||
|
├── docker-compose.yml # Docker Compose alternatif (racine)
|
||||||
|
├── docker-compose.business.yml # Docker Compose pour le radar business
|
||||||
|
├── docker-entrypoint.sh # Script d'entrée Docker
|
||||||
|
└── .drone.yml # Configuration CI/CD Drone
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture technique
|
||||||
|
|
||||||
|
### Framework de base
|
||||||
|
|
||||||
|
Le projet utilise le framework **aoe_technology_radar** qui est basé sur :
|
||||||
|
- **Next.js** : Framework React pour le rendu côté serveur et la génération statique
|
||||||
|
- **React** : Bibliothèque JavaScript pour l'interface utilisateur
|
||||||
|
- **TypeScript** : Typage statique pour JavaScript
|
||||||
|
|
||||||
|
### Processus de build
|
||||||
|
|
||||||
|
1. **Installation des dépendances** : `npm install` installe `aoe_technology_radar` depuis GitHub
|
||||||
|
2. **Préparation du framework** : Copie de `node_modules/aoe_technology_radar` vers `.techradar/`
|
||||||
|
3. **Configuration** : Copie de `radar-business/config-business.json` vers `.techradar/data/config.json`
|
||||||
|
4. **Données** : Copie des blips depuis `radar-business/2025-01-15/` vers `.techradar/data/radar/2025-01-15/`
|
||||||
|
5. **Modifications personnalisées** :
|
||||||
|
- Création de `.techradar/src/pages/team.tsx` (page Next.js pour `/team`)
|
||||||
|
- Modification de `.techradar/src/components/Navigation/Navigation.tsx` (ajout du lien Équipe)
|
||||||
|
6. **Build Next.js** : `npm run build:data` puis `npm run build` génère les fichiers statiques
|
||||||
|
7. **Output** : Fichiers statiques dans `.techradar/out/` servis par un serveur statique
|
||||||
|
|
||||||
|
### Modifications personnalisées
|
||||||
|
|
||||||
|
Le projet apporte plusieurs modifications au framework de base :
|
||||||
|
|
||||||
|
#### 1. Page Equipe (`/team`)
|
||||||
|
|
||||||
|
- **Script principal** : `public/team-block-script.js` (injection du contenu et visualisations)
|
||||||
|
- **Route Next.js** : `.techradar/src/pages/team.tsx` (page vide, le script remplace le contenu)
|
||||||
|
- **Chargement** : Le script est charge via `_document.tsx` avec `strategy="beforeInteractive"`
|
||||||
|
- **Bibliotheques** : Cytoscape.js et ECharts charges depuis CDN
|
||||||
|
- **Donnees** : `public/team-visualization-data.json` genere par `scripts/generate-team-visualization-data.js`
|
||||||
|
- **Layout** : Utilise le layout `cose` integre a Cytoscape (pas de plugin externe)
|
||||||
|
|
||||||
|
#### 2. Navigation modifiée
|
||||||
|
|
||||||
|
- **Fichier modifié** : `.techradar/src/components/Navigation/Navigation.tsx`
|
||||||
|
- **Modification** : Ajout du lien "👥 Équipe" vers `/team`
|
||||||
|
- **Méthode** : Script Python dans `Dockerfile.business` qui :
|
||||||
|
- Supprime tous les liens Équipe existants (évite les doublons)
|
||||||
|
- Ajoute un seul lien Équipe après le lien "Vue d'ensemble"
|
||||||
|
|
||||||
|
#### 3. Scripts JavaScript désactivés
|
||||||
|
|
||||||
|
Les scripts suivants ont été désactivés pour éviter les doublons de liens :
|
||||||
|
- `public/strategie-script.js` : `addLinksToHeader()` désactivée
|
||||||
|
- `public/strategie-link.js` : `addStrategyLinkToHeader()` désactivée
|
||||||
|
|
||||||
|
Tous les liens de navigation sont maintenant gérés uniquement par `Navigation.tsx`.
|
||||||
|
|
||||||
|
## Format des fichiers radar
|
||||||
|
|
||||||
|
Chaque technologie (blip) est définie dans un fichier Markdown avec un en-tête YAML front matter :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: "Nom de la technologie"
|
||||||
|
ring: adopt|trial|assess|hold
|
||||||
|
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
|
||||||
|
tags: [tag1, tag2]
|
||||||
|
businessImpact: high|medium|low
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 1
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
Description de la technologie en Markdown.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Métadonnées
|
||||||
|
|
||||||
|
- **title** : Nom de la technologie
|
||||||
|
- **ring** : Anneau du radar (adopt, trial, assess, hold)
|
||||||
|
- **quadrant** : Quadrant du radar (business)
|
||||||
|
- **tags** : Tags pour le filtrage (optionnel)
|
||||||
|
- **Métadonnées business** : Voir [guide-radar-business.md](./guide-radar-business.md)
|
||||||
|
|
||||||
|
## Flux de traitement
|
||||||
|
|
||||||
|
1. **Lecture des fichiers** : Le framework lit tous les fichiers `.md` dans `radar-business/2025-01-15/`
|
||||||
|
2. **Parsing** : Extraction des métadonnées YAML et du contenu Markdown
|
||||||
|
3. **Génération** : Création d'une application React statique
|
||||||
|
4. **Build** : Compilation en fichiers HTML/CSS/JS statiques
|
||||||
|
5. **Serve** : Service via un serveur web statique (`serve` package)
|
||||||
|
|
||||||
|
## Dépendances principales
|
||||||
|
|
||||||
|
- **aoe_technology_radar** : Framework principal (dépendance GitHub)
|
||||||
|
- **Node.js** : Runtime JavaScript (version 20+)
|
||||||
|
- **npm** : Gestionnaire de paquets
|
||||||
|
- **gray-matter** : Parsing YAML front matter
|
||||||
|
- **postcss** : Traitement CSS
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
La configuration principale se trouve dans `radar-business/config-business.json` et définit :
|
||||||
|
- Les quadrants et leurs descriptions
|
||||||
|
- Les anneaux (rings) et leurs significations
|
||||||
|
- Les couleurs et le style
|
||||||
|
- Les options d'affichage
|
||||||
|
- Les métadonnées du site
|
||||||
|
|
||||||
|
Voir [configuration.md](./configuration.md) pour plus de détails.
|
||||||
|
|
||||||
|
## Radar Technologique Laplank
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est un tech radar classique avec :
|
||||||
|
|
||||||
|
- **Configuration spécifique** : `radar-business/config-business.json`
|
||||||
|
- **Quadrants business** : Technologies Différenciantes, Commodité, Risque, Émergentes
|
||||||
|
- **Anneaux classiques** : Hold, Assess, Trial, Adopt
|
||||||
|
- **Historique par release** : Organisation des technologies par date (radar-business/YYYY-MM-DD/)
|
||||||
|
- **Pages de stratégie** : Pages dynamiques générées via `public/strategie-script.js`
|
||||||
|
- **Protection par mot de passe** : Authentification client-side (mot de passe : `laplank-radar`)
|
||||||
|
- **Base path** : `/` (racine, pas de sous-chemin)
|
||||||
|
- **Page Équipe** : `/team` avec visualisations interactives
|
||||||
|
|
||||||
|
### Scripts de stratégie
|
||||||
|
|
||||||
|
Le fichier `public/strategie-script.js` contient :
|
||||||
|
- La logique de protection par mot de passe
|
||||||
|
- La conversion Markdown vers HTML pour les pages de stratégie
|
||||||
|
- Le contenu des trois pages de stratégie :
|
||||||
|
- Stratégie d'Évolution Technique
|
||||||
|
- Stratégie Business
|
||||||
|
- Opportunités DataViz Expert
|
||||||
|
|
||||||
|
**Note** : Les fonctions d'ajout de liens dans le header ont été désactivées pour éviter les doublons. Tous les liens sont maintenant gérés par `Navigation.tsx`.
|
||||||
|
|
||||||
|
## Build et déploiement
|
||||||
|
|
||||||
|
Le projet utilise plusieurs commandes :
|
||||||
|
- `npm run build` : Génère les fichiers statiques du radar principal
|
||||||
|
- `npm run serve` : Lance un serveur de développement du radar principal (port 3000)
|
||||||
|
- `npm run serve-business` : Lance un serveur de développement du radar business (port 3006)
|
||||||
|
- `npm run extract-tech` : Extrait les technologies depuis la documentation
|
||||||
|
- `npm run analyze-business` : Analyse les métriques business
|
||||||
|
|
||||||
|
Le déploiement se fait via Docker avec plusieurs configurations selon l'environnement :
|
||||||
|
- **Radar principal** : Via `docker/Dockerfile` ou `Dockerfile`
|
||||||
|
- **Radar Technologique Laplank** : Via `Dockerfile.business` et `docker-compose.business.yml` (Portainer)
|
||||||
|
|
||||||
|
Voir [deploiement.md](./deploiement.md) pour plus de détails.
|
||||||
|
|
||||||
|
## Génération des données équipe
|
||||||
|
|
||||||
|
Le script `scripts/generate-team-visualization-data.js` :
|
||||||
|
- Lit les profils d'équipe depuis `docs/data/team/*.md`
|
||||||
|
- Lit les technologies depuis `radar-business/2025-01-15/*.md`
|
||||||
|
- Génère `public/team-visualization-data.json` avec :
|
||||||
|
- Données réseau (nodes/edges) pour Cytoscape.js
|
||||||
|
- Matrice de congestion pour ECharts (technologies `adopt` uniquement - anciennement "core")
|
||||||
|
- Équipe de genèse MVP avec statistiques (basée sur les technologies `adopt`)
|
||||||
|
|
||||||
|
Ce fichier est utilisé par `public/team.html` pour les visualisations interactives.
|
||||||
|
|
||||||
|
## Structure des profils équipe
|
||||||
|
|
||||||
|
Les profils d'équipe sont stockés dans `docs/data/team/*.md` avec le format suivant :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
name: "pseudo"
|
||||||
|
fullName: "Nom complet"
|
||||||
|
role: "Rôle"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2016-01"
|
||||||
|
interests: ["Mobile", "Infrastructure"]
|
||||||
|
skills:
|
||||||
|
- name: "Flutter"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Autonomie"
|
||||||
|
projects:
|
||||||
|
- "Projet1"
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Voir [guide-page-equipe.md](./guide-page-equipe.md) pour plus de détails.
|
||||||
223
docs/app/configuration.md
Normal file
223
docs/app/configuration.md
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
# Configuration
|
||||||
|
|
||||||
|
## Fichier config-business.json
|
||||||
|
|
||||||
|
Le fichier `radar-business/config-business.json` contient toute la configuration du Radar Technologique Laplank. Il définit l'apparence, le comportement et la structure du radar.
|
||||||
|
|
||||||
|
## Structure de configuration
|
||||||
|
|
||||||
|
### Paramètres de base
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"basePath": "",
|
||||||
|
"baseUrl": "",
|
||||||
|
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar-business/{release}/{id}.md",
|
||||||
|
"logoFile": "logo.svg",
|
||||||
|
"jsFile": "/strategie-script.js"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- **basePath** : Chemin de base pour l'application (vide `""` pour servir à la racine `/`)
|
||||||
|
- **baseUrl** : URL de base du site
|
||||||
|
- **editUrl** : Template d'URL pour éditer les fichiers (utilise {release} et {id})
|
||||||
|
- **logoFile** : Nom du fichier logo dans `public/`
|
||||||
|
- **jsFile** : Fichier JavaScript personnalisé à charger (`/strategie-script.js` pour le radar business)
|
||||||
|
|
||||||
|
### Options d'affichage (toggles)
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"toggles": {
|
||||||
|
"showChart": true,
|
||||||
|
"showTagFilter": true,
|
||||||
|
"showQuadrantList": true,
|
||||||
|
"showEmptyRings": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- **showChart** : Affiche le graphique radar interactif
|
||||||
|
- **showTagFilter** : Active le filtre par tags
|
||||||
|
- **showQuadrantList** : Affiche la liste des quadrants
|
||||||
|
- **showEmptyRings** : Affiche les anneaux vides
|
||||||
|
|
||||||
|
### Sections
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"sections": ["radar", "tags", "list"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Définit l'ordre des sections dans l'interface.
|
||||||
|
|
||||||
|
### Couleurs
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"colors": {
|
||||||
|
"foreground": "#fff",
|
||||||
|
"background": "#1a4d3a",
|
||||||
|
"highlight": "#2ecc71",
|
||||||
|
"content": "#fff",
|
||||||
|
"text": "#575757",
|
||||||
|
"link": "#2ecc71",
|
||||||
|
"border": "rgba(255, 255, 255, 0.1)",
|
||||||
|
"tag": "rgba(255, 255, 255, 0.1)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Personnalisation des couleurs de l'interface avec un thème vert.
|
||||||
|
|
||||||
|
### Quadrants Business
|
||||||
|
|
||||||
|
Les quadrants définissent les quatre catégories principales selon l'impact business :
|
||||||
|
|
||||||
|
1. **Technologies Différenciantes** : Créent un avantage concurrentiel et de la valeur différenciante
|
||||||
|
2. **Technologies de Commodité** : Nécessaires mais non différenciantes, à optimiser pour réduire les coûts
|
||||||
|
3. **Technologies à Risque** : Obsolètes, coûteuses ou présentant des risques, à migrer ou remplacer
|
||||||
|
4. **Technologies Émergentes** : Opportunités futures, à évaluer et potentiellement adopter
|
||||||
|
|
||||||
|
Chaque quadrant a :
|
||||||
|
- **id** : Identifiant unique (technologies-differentiantes, technologies-commodite, technologies-risque, technologies-emergentes)
|
||||||
|
- **title** : Titre affiché
|
||||||
|
- **description** : Description du quadrant
|
||||||
|
- **color** : Couleur associée
|
||||||
|
|
||||||
|
### Anneaux (Rings)
|
||||||
|
|
||||||
|
Les anneaux classifient les technologies selon leur niveau d'adoption. Le Radar Technologique Laplank utilise les anneaux classiques :
|
||||||
|
|
||||||
|
1. **Adopt** : Technologies recommandées et utilisées avec succès en production. Stables, éprouvées, peuvent être adoptées en toute confiance pour de nouveaux projets.
|
||||||
|
2. **Trial** : Technologies à essayer. Prometteuses et testées avec succès dans certains contextes. À considérer pour de nouveaux projets.
|
||||||
|
3. **Assess** : Technologies à évaluer. Prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester.
|
||||||
|
4. **Hold** : Technologies à éviter ou à remplacer. Présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets.
|
||||||
|
|
||||||
|
Chaque anneau a :
|
||||||
|
- **id** : Identifiant unique (adopt, trial, assess, hold)
|
||||||
|
- **title** : Titre affiché
|
||||||
|
- **description** : Description de l'anneau
|
||||||
|
- **color** : Couleur associée
|
||||||
|
- **radius** : Rayon dans le graphique (0-1)
|
||||||
|
- **strokeWidth** : Épaisseur du trait
|
||||||
|
|
||||||
|
**Important** : Tous les blips doivent utiliser ces rings (adopt|trial|assess|hold). Les anciens rings (core, strategic, support) ne sont plus utilisés.
|
||||||
|
|
||||||
|
### Flags (Drapeaux)
|
||||||
|
|
||||||
|
Les flags marquent les changements entre versions :
|
||||||
|
|
||||||
|
- **new** : Nouveau dans cette version (couleur : #f1235a)
|
||||||
|
- **changed** : Modifié récemment (couleur : #40a7d1)
|
||||||
|
- **default** : Inchangé
|
||||||
|
|
||||||
|
### Graphique
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"chart": {
|
||||||
|
"size": 800,
|
||||||
|
"blipSize": 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- **size** : Taille du graphique en pixels
|
||||||
|
- **blipSize** : Taille des points (blips) sur le graphique
|
||||||
|
|
||||||
|
### Labels (Textes)
|
||||||
|
|
||||||
|
Les labels permettent de personnaliser tous les textes de l'interface, notamment :
|
||||||
|
- Titre du site : "Radar Technologique Laplank"
|
||||||
|
- Textes des pages
|
||||||
|
- Messages d'erreur
|
||||||
|
- Placeholders
|
||||||
|
- Footer
|
||||||
|
|
||||||
|
## Personnalisation
|
||||||
|
|
||||||
|
### Modifier les couleurs
|
||||||
|
|
||||||
|
Éditez la section `colors` dans `radar-business/config-business.json` avec les codes hexadécimaux souhaités.
|
||||||
|
|
||||||
|
### Ajouter un quadrant
|
||||||
|
|
||||||
|
Ajoutez un nouvel objet dans le tableau `quadrants` avec les propriétés requises.
|
||||||
|
|
||||||
|
### Modifier les descriptions
|
||||||
|
|
||||||
|
Les descriptions des quadrants et anneaux peuvent être modifiées directement dans `config-business.json`.
|
||||||
|
|
||||||
|
### Styles personnalisés
|
||||||
|
|
||||||
|
Le fichier `custom.css` permet d'ajouter des styles CSS personnalisés qui seront appliqués à l'application.
|
||||||
|
|
||||||
|
## Configuration du Radar Technologique Laplank
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank utilise une configuration spécifique dans `radar-business/config-business.json` :
|
||||||
|
|
||||||
|
### Différences principales
|
||||||
|
|
||||||
|
- **basePath** : `""` (vide) pour servir à la racine
|
||||||
|
- **jsFile** : `"/strategie-script.js"` pour charger le script de stratégie
|
||||||
|
- **Quadrants business** : Technologies Différenciantes, Commodité, Risque, Émergentes
|
||||||
|
- **Anneaux classiques** : Hold, Assess, Trial, Adopt
|
||||||
|
- **Couleurs** : Thème vert (`#1a4d3a` pour le background, `#2ecc71` pour les accents)
|
||||||
|
|
||||||
|
### Script de strategie
|
||||||
|
|
||||||
|
Le fichier `public/strategie-script.js` est charge automatiquement et fournit :
|
||||||
|
- Protection par mot de passe (authentification client-side)
|
||||||
|
- Pages de strategie dynamiques (Markdown converti en HTML)
|
||||||
|
|
||||||
|
**Note** : Les fonctions d'ajout de liens dans le header ont ete desactivees pour eviter les doublons. Tous les liens sont maintenant geres par `Navigation.tsx`.
|
||||||
|
|
||||||
|
### Script de la page equipe
|
||||||
|
|
||||||
|
Le fichier `public/team-block-script.js` est charge via `_document.tsx` et fournit :
|
||||||
|
- Detection de la route `/team`
|
||||||
|
- Remplacement du DOM avec le contenu de la page equipe
|
||||||
|
- Chargement dynamique de Cytoscape.js et ECharts depuis CDN
|
||||||
|
- Initialisation des trois visualisations (graphe reseau, matrice congestion, equipe genese)
|
||||||
|
|
||||||
|
Ce script utilise le layout `cose` integre a Cytoscape (pas de plugin externe necessaire).
|
||||||
|
|
||||||
|
## Variables d'environnement
|
||||||
|
|
||||||
|
En Docker, la variable `BASE_PATH` peut être utilisée pour modifier dynamiquement le `basePath` dans `config.json`. Le script `docker-entrypoint.sh` effectue cette modification au démarrage.
|
||||||
|
|
||||||
|
Pour le Radar Technologique Laplank, le `basePath` est fixé à `""` (vide) dans `config-business.json` pour servir l'application à la racine.
|
||||||
|
|
||||||
|
## Tags disponibles
|
||||||
|
|
||||||
|
Les tags suivants sont établis pour classifier les technologies :
|
||||||
|
|
||||||
|
- architecture
|
||||||
|
- security
|
||||||
|
- devops
|
||||||
|
- frontend
|
||||||
|
- agile
|
||||||
|
- coding
|
||||||
|
- quality assurance
|
||||||
|
- ci/cd
|
||||||
|
- ux/ui
|
||||||
|
- documentation
|
||||||
|
- blockchain
|
||||||
|
- infrastructure
|
||||||
|
- dataviz
|
||||||
|
- mobile
|
||||||
|
|
||||||
|
Les tags sont utilisés dans les fichiers Markdown des blips et permettent le filtrage dans l'interface.
|
||||||
|
|
||||||
|
## Migration des rings
|
||||||
|
|
||||||
|
Si vous avez des blips avec les anciens rings (core, strategic, support), ils doivent être migrés vers les rings standards :
|
||||||
|
|
||||||
|
- **core** → **adopt** (technologies fondamentales en production)
|
||||||
|
- **strategic** → **assess** (technologies prometteuses à évaluer)
|
||||||
|
- **support** → **adopt** (technologies utilisées en production)
|
||||||
|
- **trial** → **trial** (déjà correct)
|
||||||
|
|
||||||
|
Le script `scripts/migrate-rings.sh` peut être utilisé pour automatiser cette migration.
|
||||||
300
docs/app/contribution.md
Normal file
300
docs/app/contribution.md
Normal file
@@ -0,0 +1,300 @@
|
|||||||
|
# Guide de contribution
|
||||||
|
|
||||||
|
## Vue d'ensemble
|
||||||
|
|
||||||
|
Ce guide explique comment contribuer au Technology Radar AJR en ajoutant, modifiant ou supprimant des technologies (blips) et des profils équipe.
|
||||||
|
|
||||||
|
## Processus de contribution
|
||||||
|
|
||||||
|
### 1. Préparer l'environnement
|
||||||
|
|
||||||
|
Voir le [guide de développement](./developpement.md) pour l'installation et la configuration de l'environnement local.
|
||||||
|
|
||||||
|
### 2. Créer une branche
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout -b feature/nom-de-la-technologie
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Ajouter ou modifier un blip
|
||||||
|
|
||||||
|
#### Ajouter un nouveau blip
|
||||||
|
|
||||||
|
1. Créer un fichier Markdown dans le dossier de release approprié :
|
||||||
|
```
|
||||||
|
radar-business/2025-01-15/nom-technologie.md
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Utiliser le format standard avec toutes les métadonnées :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: "Nom de la technologie"
|
||||||
|
ring: adopt|trial|assess|hold
|
||||||
|
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
|
||||||
|
tags: [tag1, tag2]
|
||||||
|
businessImpact: high|medium|low
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 1
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
Description de la technologie.
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
Description de l'impact sur le business.
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€
|
||||||
|
- Coût de maintenance annuel : 0€
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 1
|
||||||
|
- Membres de l'équipe : pseudo
|
||||||
|
- Niveau moyen : beginner
|
||||||
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
Recommandations stratégiques pour cette technologie.
|
||||||
|
```
|
||||||
|
|
||||||
|
Voir `radar-business/FORMAT-BLIP.md` pour le format complet.
|
||||||
|
|
||||||
|
#### Modifier un blip existant
|
||||||
|
|
||||||
|
1. Localiser le fichier dans `radar-business/2025-01-15/`
|
||||||
|
2. Modifier le contenu ou les métadonnées
|
||||||
|
3. Si vous changez le ring ou le quadrant, documenter la raison
|
||||||
|
4. **Important** : Vérifier que le ring est standard (adopt, trial, assess, hold)
|
||||||
|
|
||||||
|
#### Supprimer un blip
|
||||||
|
|
||||||
|
Si une technologie doit être retirée du radar :
|
||||||
|
- La déplacer vers le ring "hold" plutôt que de la supprimer
|
||||||
|
- Ou la supprimer complètement si elle n'est plus pertinente
|
||||||
|
|
||||||
|
### 4. Ajouter ou modifier un profil équipe
|
||||||
|
|
||||||
|
#### Ajouter un profil équipe
|
||||||
|
|
||||||
|
1. Créer un fichier Markdown dans `docs/data/team/` :
|
||||||
|
```
|
||||||
|
docs/data/team/pseudo.md
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Utiliser le format standard :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
name: "pseudo"
|
||||||
|
fullName: "Nom complet"
|
||||||
|
role: "Rôle"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2016-01"
|
||||||
|
interests: ["Mobile", "Infrastructure"]
|
||||||
|
skills:
|
||||||
|
- name: "Flutter"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Autonomie"
|
||||||
|
projects:
|
||||||
|
- "Projet1"
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Régénérer les données équipe :
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Tester localement
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run serve-business
|
||||||
|
```
|
||||||
|
|
||||||
|
Vérifier :
|
||||||
|
- L'affichage correct du blip
|
||||||
|
- Le positionnement dans le bon quadrant et ring
|
||||||
|
- La lisibilité du contenu
|
||||||
|
- Le fonctionnement des tags
|
||||||
|
- La page équipe (`/team`) affiche correctement les données
|
||||||
|
|
||||||
|
### 6. Commiter les changements
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add radar-business/2025-01-15/nom-technologie.md
|
||||||
|
git add docs/data/team/pseudo.md
|
||||||
|
git add public/team-visualization-data.json
|
||||||
|
git commit -m "feat: ajouter [technologie] au quadrant [quadrant]"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Pousser et créer une pull request
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push origin feature/nom-de-la-technologie
|
||||||
|
```
|
||||||
|
|
||||||
|
Créer une pull request sur le dépôt Git.
|
||||||
|
|
||||||
|
## Guidelines de contenu
|
||||||
|
|
||||||
|
### Choix du ring
|
||||||
|
|
||||||
|
- **Adopt** : Technologies recommandées et utilisées avec succès en production. Stables, éprouvées, peuvent être adoptées en toute confiance pour de nouveaux projets.
|
||||||
|
- **Trial** : Technologies à essayer. Prometteuses et testées avec succès dans certains contextes. À considérer pour de nouveaux projets.
|
||||||
|
- **Assess** : Technologies à évaluer. Prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester.
|
||||||
|
- **Hold** : Technologies à éviter ou à remplacer. Présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets.
|
||||||
|
|
||||||
|
**Important** : Les anciens rings (core, strategic, support, legacy) ne sont plus utilisés. Tous les blips doivent utiliser les rings standards (adopt, trial, assess, hold).
|
||||||
|
|
||||||
|
### Choix du quadrant
|
||||||
|
|
||||||
|
- **Technologies Différenciantes** : Créent un avantage concurrentiel et de la valeur différenciante
|
||||||
|
- **Technologies de Commodité** : Nécessaires mais non différenciantes, à optimiser pour réduire les coûts
|
||||||
|
- **Technologies à Risque** : Obsolètes, coûteuses, à migrer ou remplacer
|
||||||
|
- **Technologies Émergentes** : Opportunités futures, à évaluer et potentiellement adopter
|
||||||
|
|
||||||
|
### Tags
|
||||||
|
|
||||||
|
Utiliser les tags établis :
|
||||||
|
- architecture
|
||||||
|
- security
|
||||||
|
- devops
|
||||||
|
- frontend
|
||||||
|
- agile
|
||||||
|
- coding
|
||||||
|
- quality assurance
|
||||||
|
- ci/cd
|
||||||
|
- ux/ui
|
||||||
|
- documentation
|
||||||
|
- blockchain
|
||||||
|
- infrastructure
|
||||||
|
- dataviz
|
||||||
|
- mobile
|
||||||
|
|
||||||
|
Ajouter plusieurs tags si la technologie couvre plusieurs domaines.
|
||||||
|
|
||||||
|
### Qualité du contenu
|
||||||
|
|
||||||
|
- **Clarté** : Description claire et concise
|
||||||
|
- **Pertinence** : Focus sur l'utilisation dans l'écosystème Duniter/Ğ1
|
||||||
|
- **Objectivité** : Présenter les avantages et inconvénients
|
||||||
|
- **Concision** : Rester factuel et éviter les détails superflus
|
||||||
|
- **Métadonnées complètes** : Remplir toutes les métadonnées business
|
||||||
|
|
||||||
|
## Format des commits
|
||||||
|
|
||||||
|
Utiliser des messages de commit clairs :
|
||||||
|
|
||||||
|
```
|
||||||
|
feat: ajouter [technologie] au quadrant [quadrant]
|
||||||
|
fix: corriger la description de [technologie]
|
||||||
|
update: déplacer [technologie] de trial à adopt
|
||||||
|
docs: améliorer la documentation de [technologie]
|
||||||
|
feat(team): ajouter profil [pseudo]
|
||||||
|
fix(team): mettre à jour compétences de [pseudo]
|
||||||
|
```
|
||||||
|
|
||||||
|
## Créer une nouvelle release
|
||||||
|
|
||||||
|
Quand créer une nouvelle release :
|
||||||
|
|
||||||
|
1. **Périodicité** : Généralement tous les 3-6 mois
|
||||||
|
2. **Changements significatifs** : Plusieurs nouveaux blips ou changements majeurs
|
||||||
|
3. **Événements** : Après des évaluations importantes
|
||||||
|
|
||||||
|
### Processus de release
|
||||||
|
|
||||||
|
1. Créer un nouveau dossier avec la date :
|
||||||
|
```bash
|
||||||
|
mkdir radar-business/2025-07-15
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Copier les blips pertinents depuis la release précédente
|
||||||
|
|
||||||
|
3. Ajouter les nouveaux blips
|
||||||
|
|
||||||
|
4. Mettre à jour les blips existants si nécessaire (changement de ring, quadrant, description)
|
||||||
|
|
||||||
|
5. **Migrer les rings si nécessaire** : S'assurer que tous les blips utilisent les rings standards
|
||||||
|
|
||||||
|
6. Documenter les changements majeurs
|
||||||
|
|
||||||
|
## Migration des rings
|
||||||
|
|
||||||
|
Si vous avez des blips avec les anciens rings, utilisez ce mapping :
|
||||||
|
|
||||||
|
- **core** → **adopt** : Technologies fondamentales en production
|
||||||
|
- **strategic** → **assess** : Technologies prometteuses à évaluer
|
||||||
|
- **support** → **adopt** : Technologies utilisées en production
|
||||||
|
- **trial** → **trial** : Déjà correct
|
||||||
|
- **legacy** → **hold** : Technologies obsolètes à remplacer
|
||||||
|
|
||||||
|
Le script `scripts/migrate-rings.sh` peut être utilisé pour automatiser cette migration.
|
||||||
|
|
||||||
|
## Review process
|
||||||
|
|
||||||
|
Les contributions sont revues pour :
|
||||||
|
|
||||||
|
- **Exactitude** : Les informations sont correctes
|
||||||
|
- **Pertinence** : La technologie est pertinente pour l'écosystème
|
||||||
|
- **Format** : Le format Markdown est correct
|
||||||
|
- **Classification** : Le ring et quadrant sont appropriés
|
||||||
|
- **Rings standards** : Utilisation des rings standards (adopt, trial, assess, hold)
|
||||||
|
- **Métadonnées** : Toutes les métadonnées business sont remplies
|
||||||
|
- **Qualité** : Le contenu est clair et utile
|
||||||
|
|
||||||
|
## Questions fréquentes
|
||||||
|
|
||||||
|
### Puis-je ajouter une technologie que je n'ai pas encore utilisée ?
|
||||||
|
|
||||||
|
Non. Le radar ne contient que des technologies testées au moins une fois par l'équipe.
|
||||||
|
|
||||||
|
### Comment décider entre deux quadrants ?
|
||||||
|
|
||||||
|
Choisir le quadrant le plus approprié selon l'impact business. Si c'est ambigu, discuter avec l'équipe.
|
||||||
|
|
||||||
|
### Puis-je modifier un blip d'une release précédente ?
|
||||||
|
|
||||||
|
Généralement non. Les releases précédentes sont figées. Créer un nouveau blip dans la release actuelle si nécessaire.
|
||||||
|
|
||||||
|
### Comment gérer les technologies obsolètes ?
|
||||||
|
|
||||||
|
Les déplacer vers le ring "hold" avec une explication de pourquoi elles ne sont plus recommandées.
|
||||||
|
|
||||||
|
### Quels rings dois-je utiliser ?
|
||||||
|
|
||||||
|
Toujours utiliser les rings standards : **adopt**, **trial**, **assess**, **hold**. Les anciens rings (core, strategic, support, legacy) ne sont plus utilisés.
|
||||||
|
|
||||||
|
### Comment mettre à jour les données équipe ?
|
||||||
|
|
||||||
|
1. Modifier les fichiers dans `docs/data/team/*.md`
|
||||||
|
2. Régénérer les données : `node scripts/generate-team-visualization-data.js`
|
||||||
|
3. Commiter les deux fichiers (profils + données JSON)
|
||||||
|
|
||||||
|
## Ressources
|
||||||
|
|
||||||
|
- [Guide de développement](./developpement.md)
|
||||||
|
- [Configuration](./configuration.md)
|
||||||
|
- [Architecture](./architecture.md)
|
||||||
|
- [Format des blips](../radar-business/FORMAT-BLIP.md)
|
||||||
|
- [Guide page équipe](./guide-page-equipe.md)
|
||||||
|
- Framework source : https://github.com/AOEpeople/aoe_technology_radar
|
||||||
|
|
||||||
|
## Contact
|
||||||
|
|
||||||
|
Pour toute question sur les contributions, contacter l'équipe AJR ou ouvrir une issue sur le dépôt Git.
|
||||||
398
docs/app/deploiement.md
Normal file
398
docs/app/deploiement.md
Normal file
@@ -0,0 +1,398 @@
|
|||||||
|
# Guide de déploiement
|
||||||
|
|
||||||
|
## Vue d'ensemble
|
||||||
|
|
||||||
|
Le projet peut être déployé de plusieurs façons :
|
||||||
|
- Docker Compose (recommandé pour la production)
|
||||||
|
- Docker simple
|
||||||
|
- Build statique avec serveur web
|
||||||
|
- Portainer (pour le Radar Business)
|
||||||
|
|
||||||
|
## Déploiement avec Docker
|
||||||
|
|
||||||
|
### Configuration Docker
|
||||||
|
|
||||||
|
Le projet contient plusieurs configurations Docker :
|
||||||
|
|
||||||
|
- `docker/Dockerfile` : Dockerfile principal avec multi-stage build
|
||||||
|
- `docker/docker-compose.yml` : Configuration de base
|
||||||
|
- `docker/docker-compose.labels.yml` : Labels pour le reverse proxy
|
||||||
|
- `docker/docker-compose.local.yml` : Configuration pour développement local
|
||||||
|
- `Dockerfile` (racine) : Dockerfile alternatif
|
||||||
|
- `docker-compose.yml` (racine) : Docker Compose alternatif
|
||||||
|
- `Dockerfile.business` : Dockerfile spécifique pour le Radar Business
|
||||||
|
- `docker-compose.business.yml` : Docker Compose pour le Radar Business (Portainer)
|
||||||
|
|
||||||
|
### Build de l'image Docker
|
||||||
|
|
||||||
|
#### Avec le Dockerfile principal
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd docker
|
||||||
|
docker compose build
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Avec build args
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build \
|
||||||
|
--build-arg BASE_PATH="/techradar" \
|
||||||
|
--build-arg UID=1000 \
|
||||||
|
--build-arg GID=1000 \
|
||||||
|
-f docker/Dockerfile \
|
||||||
|
-t techradar:latest \
|
||||||
|
.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variables d'environnement
|
||||||
|
|
||||||
|
- **BASE_PATH** : Chemin de base pour l'application (défaut: `/`)
|
||||||
|
- **UID** : User ID pour l'utilisateur dans le conteneur (défaut: 1000)
|
||||||
|
- **GID** : Group ID pour l'utilisateur dans le conteneur (défaut: 1000)
|
||||||
|
|
||||||
|
### Démarrage avec Docker Compose
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd docker
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
L'application sera accessible sur le port 3000.
|
||||||
|
|
||||||
|
### Configuration du basePath
|
||||||
|
|
||||||
|
Le script `docker-entrypoint.sh` modifie dynamiquement le `basePath` dans `config.json` au démarrage du conteneur en utilisant la variable d'environnement `BASE_PATH`.
|
||||||
|
|
||||||
|
## Déploiement du Radar Technologique Laplank avec Portainer
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est déployé via Portainer en utilisant une stack Docker Compose.
|
||||||
|
|
||||||
|
### Configuration Portainer
|
||||||
|
|
||||||
|
1. **Créer une nouvelle stack** dans Portainer
|
||||||
|
2. **Nom de la stack** : `laplank-radar-technologique` (ou autre nom)
|
||||||
|
3. **Méthode** : Git Repository
|
||||||
|
4. **Repository URL** : `https://git.open.us.org/AJR/TechradarDev.git`
|
||||||
|
5. **Reference** : `refs/heads/dev-tech` (branche actuelle)
|
||||||
|
6. **Compose path** : `docker-compose.business.yml`
|
||||||
|
|
||||||
|
**Note** : Si le dépôt est privé, utiliser un Personal Access Token dans l'URL :
|
||||||
|
- `https://<token>@git.open.us.org/AJR/TechradarDev.git`
|
||||||
|
|
||||||
|
### Configuration Docker Compose Laplank
|
||||||
|
|
||||||
|
Le fichier `docker-compose.business.yml` configure :
|
||||||
|
- **Port** : `3006:3000` (port 3006 de l'hôte mappé vers le port 3000 du conteneur)
|
||||||
|
- **Container name** : `laplank-radar-business`
|
||||||
|
- **Image** : Construite depuis `Dockerfile.business` lors du déploiement
|
||||||
|
- **Environnement** : `NODE_ENV=production`
|
||||||
|
- **Restart policy** : `unless-stopped` (redémarre automatiquement en cas d'arrêt)
|
||||||
|
|
||||||
|
**Accès à l'application :**
|
||||||
|
- URL : `http://<votre-serveur>:3006`
|
||||||
|
- Mot de passe : `laplank-radar`
|
||||||
|
|
||||||
|
### Dockerfile Business
|
||||||
|
|
||||||
|
Le `Dockerfile.business` effectue les opérations suivantes :
|
||||||
|
|
||||||
|
1. **Installation des dépendances** :
|
||||||
|
- Node.js 20 Alpine
|
||||||
|
- Git et Python3 pour les scripts
|
||||||
|
- Variables d'environnement pour désactiver Husky
|
||||||
|
|
||||||
|
2. **Préparation du framework** :
|
||||||
|
- Copie de `node_modules/aoe_technology_radar` vers `.techradar/`
|
||||||
|
- Patch du package pour inclure `gray-matter` et `postcss`
|
||||||
|
|
||||||
|
3. **Configuration des données** :
|
||||||
|
- Purge des données de démo : `rm -rf .techradar/data/radar/*`
|
||||||
|
- Copie des blips business : `radar-business/2025-01-15/*` → `.techradar/data/radar/2025-01-15/`
|
||||||
|
- Copie de la config : `radar-business/config-business.json` → `.techradar/data/config.json`
|
||||||
|
|
||||||
|
4. **Modifications personnalisees** :
|
||||||
|
- Creation de `.techradar/src/pages/team.tsx` (page Next.js vide pour `/team`)
|
||||||
|
- Modification de `.techradar/src/pages/_document.tsx` via script Python :
|
||||||
|
- Ajout du chargement de `team-block-script.js` avec `strategy="beforeInteractive"`
|
||||||
|
- Modification de `.techradar/src/components/Navigation/Navigation.tsx` via script Python :
|
||||||
|
- Suppression de tous les liens Equipe existants (evite les doublons)
|
||||||
|
- Ajout d'un seul lien "Equipe" apres le lien "Vue d'ensemble"
|
||||||
|
|
||||||
|
5. **Build Next.js** :
|
||||||
|
- `npm run build:data` : Génère les données du radar
|
||||||
|
- `npm run build` : Build de l'application Next.js
|
||||||
|
|
||||||
|
6. **Copie des fichiers publics** :
|
||||||
|
- Copie de `public/team-block-script.js` et `public/team-visualization-data.json` vers `.techradar/public/`
|
||||||
|
- Les fichiers sont ensuite copies dans `out/` apres le build
|
||||||
|
|
||||||
|
7. **Demarrage** :
|
||||||
|
- Execution de `scripts/start-business.sh` qui :
|
||||||
|
- Verifie que `team-visualization-data.json` est dans `out/`
|
||||||
|
- Le copie depuis `public/` si necessaire
|
||||||
|
- Demarre le serveur statique `serve` sur le port 3000 (sans `--single`)
|
||||||
|
|
||||||
|
### Scripts Python pour les modifications
|
||||||
|
|
||||||
|
#### Script pour Navigation.tsx
|
||||||
|
|
||||||
|
Le script `docker/add_team_link.py` :
|
||||||
|
|
||||||
|
1. **Verifie l'existence du fichier** : `.techradar/src/components/Navigation/Navigation.tsx`
|
||||||
|
2. **Supprime tous les liens Equipe existants** : Evite les doublons meme si le script s'execute plusieurs fois
|
||||||
|
3. **Ajoute un seul lien Equipe** : Apres le lien "Vue d'ensemble"
|
||||||
|
4. **Verifie le resultat** : S'assure qu'il n'y a qu'un seul lien apres l'operation
|
||||||
|
|
||||||
|
Le script shell `docker/add_team_link.sh` orchestre l'execution et verifie le resultat.
|
||||||
|
|
||||||
|
#### Script pour _document.tsx
|
||||||
|
|
||||||
|
Le script `docker/patch_document.py` :
|
||||||
|
|
||||||
|
1. **Ajoute l'import de Script** : Si pas deja present dans le fichier
|
||||||
|
2. **Modifie le composant Head** : Ajoute le chargement de `team-block-script.js`
|
||||||
|
3. **Strategie beforeInteractive** : Le script est charge avant le rendu Next.js
|
||||||
|
|
||||||
|
### Authentification Git pour Portainer
|
||||||
|
|
||||||
|
Si le dépôt est privé, utiliser un **Personal Access Token** (Gitea) :
|
||||||
|
1. Créer un token dans Gitea avec les permissions de lecture
|
||||||
|
2. Utiliser l'URL avec le token : `https://<token>@git.open.us.org/AJR/TechradarDev.git`
|
||||||
|
3. Exemple : `https://glpat-xxxxxxxxxxxx@git.open.us.org/AJR/TechradarDev.git`
|
||||||
|
|
||||||
|
**Configuration complète pour dépôt privé :**
|
||||||
|
- **Repository URL** : `https://<token>@git.open.us.org/AJR/TechradarDev.git`
|
||||||
|
- **Reference** : `refs/heads/dev-tech`
|
||||||
|
- **Compose path** : `docker-compose.business.yml`
|
||||||
|
|
||||||
|
### Mise à jour
|
||||||
|
|
||||||
|
Pour mettre à jour le Radar Technologique Laplank dans Portainer :
|
||||||
|
|
||||||
|
**⚠️ IMPORTANT : Pour que les mises à jour soient effectives, il faut forcer le rebuild sans cache !**
|
||||||
|
|
||||||
|
**Option 1 : Rebuild avec --no-cache (RECOMMANDÉ)**
|
||||||
|
1. Aller dans **Stacks** → Sélectionner la stack `laplank-radar-technologique`
|
||||||
|
2. Cliquer sur **Editor**
|
||||||
|
3. **Cocher la case "Always pull image"** (si disponible)
|
||||||
|
4. **Cocher la case "Rebuild"** ou utiliser l'option "Rebuild the stack"
|
||||||
|
5. **Dans les options avancées, cocher "No cache"** ou utiliser `--no-cache` dans les build args
|
||||||
|
6. Cliquer sur **Update the stack**
|
||||||
|
7. Portainer va reconstruire l'image complètement sans utiliser le cache
|
||||||
|
|
||||||
|
**Option 2 : Rebuild manuel via l'interface**
|
||||||
|
1. Aller dans **Stacks** → Sélectionner la stack `laplank-radar-technologique`
|
||||||
|
2. Cliquer sur **Editor**
|
||||||
|
3. Cliquer sur **Update the stack**
|
||||||
|
4. **Avant de confirmer**, dans les options de build, ajouter `--no-cache` ou cocher "No cache"
|
||||||
|
5. Confirmer la mise à jour
|
||||||
|
|
||||||
|
**Option 3 : Supprimer l'image et rebuild (si les options ci-dessus ne fonctionnent pas)**
|
||||||
|
1. Aller dans **Containers** → Sélectionner `laplank-radar-technolologique`
|
||||||
|
2. Cliquer sur **Stop** pour arrêter le conteneur
|
||||||
|
3. Aller dans **Images** → Trouver l'image de la stack
|
||||||
|
4. Cliquer sur **Remove** pour supprimer l'image
|
||||||
|
5. Retourner dans **Stacks** → Sélectionner la stack
|
||||||
|
6. Cliquer sur **Editor** → **Update the stack**
|
||||||
|
7. L'image sera reconstruite depuis zéro
|
||||||
|
|
||||||
|
**Vérification après mise à jour :**
|
||||||
|
- Vérifier les logs : **Containers** → `laplank-radar-technolologique` → **Logs**
|
||||||
|
- Tester l'application : `http://<votre-serveur>:3006`
|
||||||
|
- Vérifier que les changements sont visibles (par exemple, le contenu de `about.md` ou `custom.css`)
|
||||||
|
- Vérifier qu'il n'y a qu'un seul lien "Équipe" dans la navigation
|
||||||
|
|
||||||
|
**Pourquoi le cache pose problème ?**
|
||||||
|
Docker utilise un système de cache par couches. Si les fichiers copiés n'ont pas changé selon l'algorithme de détection de Docker, il réutilise les couches en cache. C'est pourquoi il faut forcer un rebuild complet avec `--no-cache` pour garantir que tous les fichiers sont bien copiés et que l'application est reconstruite avec les dernières modifications.
|
||||||
|
|
||||||
|
## Déploiement statique
|
||||||
|
|
||||||
|
### Build des fichiers statiques
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Les fichiers sont générés dans le répertoire `build/`.
|
||||||
|
|
||||||
|
### Servir avec un serveur web
|
||||||
|
|
||||||
|
#### Nginx
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name coeurbox.syoul.fr;
|
||||||
|
root /chemin/vers/build;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Apache
|
||||||
|
|
||||||
|
```apache
|
||||||
|
<VirtualHost *:80>
|
||||||
|
ServerName coeurbox.syoul.fr
|
||||||
|
DocumentRoot /chemin/vers/build
|
||||||
|
|
||||||
|
<Directory /chemin/vers/build>
|
||||||
|
Options Indexes FollowSymLinks
|
||||||
|
AllowOverride All
|
||||||
|
Require all granted
|
||||||
|
</Directory>
|
||||||
|
</VirtualHost>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Déploiement avec Drone CI
|
||||||
|
|
||||||
|
Le projet est configuré pour le déploiement automatique via Drone CI (`.drone.yml`).
|
||||||
|
|
||||||
|
### Pipeline de déploiement
|
||||||
|
|
||||||
|
1. **Build** : Construction de l'image Docker
|
||||||
|
2. **Déploiement** : Lancement du conteneur avec Docker Compose
|
||||||
|
3. **Notification** : Envoi d'une notification Telegram
|
||||||
|
|
||||||
|
### Configuration Drone
|
||||||
|
|
||||||
|
Le pipeline utilise :
|
||||||
|
- Variables d'environnement dynamiques basées sur le dépôt Git
|
||||||
|
- Labels pour le reverse proxy (Traefik)
|
||||||
|
- Notifications Telegram en cas de succès/échec
|
||||||
|
|
||||||
|
### Variables d'environnement Drone
|
||||||
|
|
||||||
|
- `DRONE_REPO_OWNER` : Propriétaire du dépôt
|
||||||
|
- `DRONE_REPO_NAME` : Nom du dépôt
|
||||||
|
- `DRONE_COMMIT_BRANCH` : Branche du commit
|
||||||
|
|
||||||
|
Ces variables sont utilisées pour générer le `BASE_PATH` dynamiquement.
|
||||||
|
|
||||||
|
## Déploiement en production
|
||||||
|
|
||||||
|
### Étapes recommandées
|
||||||
|
|
||||||
|
1. **Préparer l'environnement**
|
||||||
|
```bash
|
||||||
|
git clone https://git.open.us.org/AJR/TechradarDev.git
|
||||||
|
cd TechradarDev
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Configurer les variables**
|
||||||
|
- Définir `BASE_PATH` selon votre configuration
|
||||||
|
- Ajuster les ports si nécessaire
|
||||||
|
|
||||||
|
3. **Build et démarrage**
|
||||||
|
```bash
|
||||||
|
cd docker
|
||||||
|
docker compose -f docker-compose.yml -f docker-compose.labels.yml up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Vérifier le déploiement**
|
||||||
|
- Accéder à l'URL configurée
|
||||||
|
- Vérifier les logs : `docker compose logs -f`
|
||||||
|
|
||||||
|
### Reverse proxy
|
||||||
|
|
||||||
|
Le projet est configuré pour fonctionner derrière un reverse proxy (Traefik) via les labels dans `docker-compose.labels.yml`.
|
||||||
|
|
||||||
|
### Sécurité
|
||||||
|
|
||||||
|
- Utiliser HTTPS en production
|
||||||
|
- Configurer les headers de sécurité appropriés
|
||||||
|
- Limiter l'accès si nécessaire
|
||||||
|
- Surveiller les logs
|
||||||
|
- Le Radar Business est protégé par un mot de passe client-side
|
||||||
|
|
||||||
|
## Mise à jour
|
||||||
|
|
||||||
|
### Mettre à jour le contenu
|
||||||
|
|
||||||
|
1. Modifier les fichiers dans `radar-business/2025-01-15/`
|
||||||
|
2. Rebuild l'image :
|
||||||
|
```bash
|
||||||
|
docker compose build --no-cache
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mettre à jour les dépendances
|
||||||
|
|
||||||
|
1. Modifier `package.json` si nécessaire
|
||||||
|
2. Rebuild l'image complète avec `--no-cache`
|
||||||
|
|
||||||
|
### Mettre à jour les profils équipe
|
||||||
|
|
||||||
|
1. Modifier les fichiers dans `docs/data/team/*.md`
|
||||||
|
2. Régénérer les données :
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
3. Rebuild l'image Docker
|
||||||
|
|
||||||
|
## Monitoring
|
||||||
|
|
||||||
|
### Logs Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Voir les logs
|
||||||
|
docker compose logs -f
|
||||||
|
|
||||||
|
# Logs du dernier démarrage
|
||||||
|
docker compose logs --tail=100
|
||||||
|
```
|
||||||
|
|
||||||
|
### Santé de l'application
|
||||||
|
|
||||||
|
**Radar Principal** : Expose le port 3000. Vérifier avec :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl http://localhost:3000/techradar
|
||||||
|
```
|
||||||
|
|
||||||
|
**Radar Technologique Laplank** : Expose le port 3006 (mappé depuis 3000). Vérifier avec :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl http://localhost:3006/
|
||||||
|
```
|
||||||
|
|
||||||
|
Note : Le Radar Technologique Laplank est protégé par un mot de passe, donc la réponse peut être l'écran d'authentification.
|
||||||
|
|
||||||
|
### Vérifications post-déploiement
|
||||||
|
|
||||||
|
1. **Vérifier la navigation** :
|
||||||
|
- Le lien "👥 Équipe" doit apparaître une seule fois
|
||||||
|
- Tous les liens doivent fonctionner
|
||||||
|
|
||||||
|
2. **Vérifier les données** :
|
||||||
|
- Tous les blips doivent être affichés (38 blips)
|
||||||
|
- Les rings doivent être corrects (adopt, trial, assess, hold)
|
||||||
|
|
||||||
|
3. **Vérifier la page équipe** :
|
||||||
|
- `/team` doit être accessible
|
||||||
|
- Les visualisations doivent se charger
|
||||||
|
- Les données doivent être présentes
|
||||||
|
|
||||||
|
## Rollback
|
||||||
|
|
||||||
|
En cas de problème, revenir à une version précédente :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Arrêter le conteneur actuel
|
||||||
|
docker compose down
|
||||||
|
|
||||||
|
# Checkout une version précédente
|
||||||
|
git checkout <commit-hash>
|
||||||
|
|
||||||
|
# Rebuild et redémarrer
|
||||||
|
docker compose build --no-cache
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
Voir [troubleshooting.md](./troubleshooting.md) pour les problèmes courants et leurs solutions.
|
||||||
373
docs/app/developpement.md
Normal file
373
docs/app/developpement.md
Normal file
@@ -0,0 +1,373 @@
|
|||||||
|
# Guide de développement
|
||||||
|
|
||||||
|
## Prérequis
|
||||||
|
|
||||||
|
- **Node.js** : Version 20 ou supérieure
|
||||||
|
- **npm** : Gestionnaire de paquets Node.js
|
||||||
|
- **Git** : Pour cloner et gérer le dépôt
|
||||||
|
- **Python 3** : Pour les scripts de modification (optionnel, utilisé dans Docker)
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Cloner le dépôt
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://git.open.us.org/AJR/TechradarDev.git
|
||||||
|
cd TechradarDev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Installer les dépendances
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Cette commande installe le framework `aoe_technology_radar` depuis GitHub.
|
||||||
|
|
||||||
|
## Développement local
|
||||||
|
|
||||||
|
### Démarrer le serveur de développement (Radar Principal)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Le serveur démarre sur http://localhost:3000/techradar
|
||||||
|
|
||||||
|
### Démarrer le serveur de développement (Radar Business)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run serve-business
|
||||||
|
```
|
||||||
|
|
||||||
|
Le serveur démarre sur http://localhost:3006
|
||||||
|
|
||||||
|
**Note importante** : Le script `serve-business.sh` :
|
||||||
|
- Sauvegarde temporairement `config.json` et le dossier `radar/`
|
||||||
|
- Copie `radar-business/config-business.json` vers `config.json`
|
||||||
|
- Copie `radar-business/2025-01-15/` vers `radar/`
|
||||||
|
- Restaure la configuration originale à la sortie (Ctrl+C)
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est protégé par un mot de passe : `laplank-radar`
|
||||||
|
|
||||||
|
### Build de production
|
||||||
|
|
||||||
|
Pour générer les fichiers statiques :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Les fichiers générés sont créés dans le répertoire `build/` (généré par le framework).
|
||||||
|
|
||||||
|
## Structure des fichiers radar
|
||||||
|
|
||||||
|
### Créer un nouveau blip
|
||||||
|
|
||||||
|
1. Créer un nouveau fichier Markdown dans le dossier de release approprié :
|
||||||
|
```
|
||||||
|
radar-business/2025-01-15/nom-technologie.md
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Utiliser le format suivant :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: "Nom de la technologie"
|
||||||
|
ring: adopt|trial|assess|hold
|
||||||
|
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
|
||||||
|
tags: [tag1, tag2]
|
||||||
|
businessImpact: high|medium|low
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 1
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
Description de la technologie en Markdown.
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
Description de l'impact sur le business.
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€
|
||||||
|
- Coût de maintenance annuel : 0€
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 1
|
||||||
|
- Membres de l'équipe : pseudo
|
||||||
|
- Niveau moyen : beginner
|
||||||
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
Recommandations stratégiques pour cette technologie.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Format des métadonnées
|
||||||
|
|
||||||
|
- **title** (obligatoire) : Nom de la technologie
|
||||||
|
- **ring** (obligatoire) : `adopt`, `trial`, `assess`, ou `hold` (voir [configuration.md](./configuration.md))
|
||||||
|
- **quadrant** (obligatoire) : Un des quatre quadrants définis dans `radar-business/config-business.json`
|
||||||
|
- **tags** (optionnel) : Tableau de tags pour le filtrage
|
||||||
|
- **Métadonnées business** : Voir `radar-business/FORMAT-BLIP.md` pour la liste complète
|
||||||
|
|
||||||
|
**Important** : Tous les blips doivent utiliser les rings standards (adopt, trial, assess, hold). Les anciens rings (core, strategic, support) ne sont plus utilisés.
|
||||||
|
|
||||||
|
### Exemple complet
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: "Docker"
|
||||||
|
ring: adopt
|
||||||
|
quadrant: technologies-commodite
|
||||||
|
tags: [devops, ci/cd, infrastructure]
|
||||||
|
businessImpact: medium
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: low
|
||||||
|
competencyLevel: intermediate
|
||||||
|
maintenanceCost: 5000
|
||||||
|
differentiation: low
|
||||||
|
teamCoverage: 3
|
||||||
|
skillGap: low
|
||||||
|
---
|
||||||
|
|
||||||
|
Docker est une plateforme de conteneurisation qui permet de packager des applications avec leurs dépendances.
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
Technologie essentielle pour le déploiement et la gestion des environnements.
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€ (pas de remplacement prévu)
|
||||||
|
- Coût de maintenance annuel : 5 000€ (licences, support)
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 3
|
||||||
|
- Membres de l'équipe : pseudo1, pseudo2, pseudo3
|
||||||
|
- Niveau moyen : intermediate
|
||||||
|
- Risque de compétence manquante : low
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
Continuer à utiliser Docker pour tous les nouveaux projets. Standardiser les pratiques de conteneurisation.
|
||||||
|
```
|
||||||
|
|
||||||
|
## Modifier un blip existant
|
||||||
|
|
||||||
|
1. Localiser le fichier dans `radar-business/2025-01-15/`
|
||||||
|
2. Modifier le contenu Markdown
|
||||||
|
3. Si nécessaire, modifier les métadonnées (ring, quadrant, tags)
|
||||||
|
4. Tester localement avec `npm run serve-business`
|
||||||
|
|
||||||
|
## Créer une nouvelle release
|
||||||
|
|
||||||
|
1. Créer un nouveau dossier avec la date au format `YYYY-MM-DD` :
|
||||||
|
```bash
|
||||||
|
mkdir radar-business/2025-07-15
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Copier les blips pertinents depuis la release précédente ou créer de nouveaux blips
|
||||||
|
|
||||||
|
3. Mettre à jour les blips existants si nécessaire (changement de ring, quadrant, description)
|
||||||
|
|
||||||
|
## Gestion des profils équipe
|
||||||
|
|
||||||
|
### Créer un profil équipe
|
||||||
|
|
||||||
|
1. Créer un fichier Markdown dans `docs/data/team/` :
|
||||||
|
```
|
||||||
|
docs/data/team/pseudo.md
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Utiliser le format suivant :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
name: "pseudo"
|
||||||
|
fullName: "Nom complet"
|
||||||
|
role: "Rôle"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2016-01"
|
||||||
|
interests: ["Mobile", "Infrastructure"]
|
||||||
|
skills:
|
||||||
|
- name: "Flutter"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Python"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Autonomie"
|
||||||
|
- "Pédagogie"
|
||||||
|
projects:
|
||||||
|
- "Projet1"
|
||||||
|
- "Projet2"
|
||||||
|
---
|
||||||
|
|
||||||
|
Description du membre de l'équipe.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Générer les données de visualisation
|
||||||
|
|
||||||
|
Après avoir modifié les profils équipe ou les technologies, régénérer les données :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Ce script génère `public/team-visualization-data.json` utilisé par la page `/team`.
|
||||||
|
|
||||||
|
## Ajouter des images
|
||||||
|
|
||||||
|
1. Placer les images dans `public/images/`
|
||||||
|
2. Référencer dans les fichiers Markdown :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|

|
||||||
|
```
|
||||||
|
|
||||||
|
## Personnalisation CSS
|
||||||
|
|
||||||
|
Le fichier `custom.css` permet d'ajouter des styles personnalisés. Les styles sont appliqués globalement à l'application.
|
||||||
|
|
||||||
|
## Scripts disponibles
|
||||||
|
|
||||||
|
### Extraction des technologies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run extract-tech
|
||||||
|
# ou
|
||||||
|
node scripts/extract-technologies.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Extrait les technologies depuis `docs/data/technologies-duniter.md` et génère les blips dans `radar-business/2025-01-15/`.
|
||||||
|
|
||||||
|
### Analyse des métriques business
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run analyze-business
|
||||||
|
# ou
|
||||||
|
node scripts/analyze-business-metrics.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Analyse les métriques business et génère un rapport dans `docs/data/analyse-strategique.md`.
|
||||||
|
|
||||||
|
### Génération des données équipe
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Génère `public/team-visualization-data.json` à partir des profils équipe et des technologies.
|
||||||
|
|
||||||
|
## Débogage
|
||||||
|
|
||||||
|
### Vérifier les erreurs de format
|
||||||
|
|
||||||
|
Le framework valide les fichiers Markdown. En cas d'erreur :
|
||||||
|
- Vérifier la syntaxe YAML front matter
|
||||||
|
- Vérifier que les valeurs de `ring` et `quadrant` correspondent aux valeurs définies dans `radar-business/config-business.json`
|
||||||
|
- Vérifier la syntaxe Markdown
|
||||||
|
|
||||||
|
### Problèmes courants
|
||||||
|
|
||||||
|
1. **Erreur de parsing YAML** : Vérifier les guillemets et l'indentation
|
||||||
|
2. **Blip non affiché** : Vérifier que le quadrant et le ring sont corrects (adopt, trial, assess, hold)
|
||||||
|
3. **Images non chargées** : Vérifier le chemin relatif depuis `public/`
|
||||||
|
4. **Rings invalides** : Vérifier que tous les blips utilisent les rings standards
|
||||||
|
|
||||||
|
### Vérifier les rings utilisés
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd radar-business/2025-01-15
|
||||||
|
grep -h "^ring:" *.md | sort | uniq -c
|
||||||
|
```
|
||||||
|
|
||||||
|
Doit retourner uniquement : adopt, trial, assess, hold
|
||||||
|
|
||||||
|
## Workflow recommandé
|
||||||
|
|
||||||
|
1. Créer une branche Git pour vos modifications
|
||||||
|
2. Ajouter/modifier les fichiers radar dans `radar-business/2025-01-15/`
|
||||||
|
3. Modifier les profils équipe dans `docs/data/team/` si nécessaire
|
||||||
|
4. Régénérer les données équipe : `node scripts/generate-team-visualization-data.js`
|
||||||
|
5. Tester localement avec `npm run serve-business`
|
||||||
|
6. Vérifier l'affichage et le formatage
|
||||||
|
7. Commiter et pousser les changements
|
||||||
|
8. Créer une pull request si applicable
|
||||||
|
|
||||||
|
## Commandes utiles
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Installer les dépendances
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Démarrer le serveur de développement (business)
|
||||||
|
npm run serve-business
|
||||||
|
|
||||||
|
# Build de production
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Extraire les technologies
|
||||||
|
npm run extract-tech
|
||||||
|
|
||||||
|
# Analyser les métriques
|
||||||
|
npm run analyze-business
|
||||||
|
|
||||||
|
# Générer les données équipe
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
|
||||||
|
# Vérifier les fichiers modifiés
|
||||||
|
git status
|
||||||
|
|
||||||
|
# Voir les différences
|
||||||
|
git diff
|
||||||
|
```
|
||||||
|
|
||||||
|
## Intégration continue
|
||||||
|
|
||||||
|
Le projet utilise Drone CI pour l'intégration continue. Voir `.drone.yml` pour la configuration.
|
||||||
|
|
||||||
|
Les builds automatiques :
|
||||||
|
- Construisent l'image Docker
|
||||||
|
- Déploient sur l'environnement de test
|
||||||
|
- Envoient des notifications Telegram
|
||||||
|
|
||||||
|
## Tests locaux avant déploiement
|
||||||
|
|
||||||
|
Avant de déployer, vérifier :
|
||||||
|
|
||||||
|
1. **Tous les blips utilisent les rings standards** :
|
||||||
|
```bash
|
||||||
|
cd radar-business/2025-01-15
|
||||||
|
grep -h "^ring:" *.md | sort | uniq
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Les données équipe sont à jour** :
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **La page équipe fonctionne** :
|
||||||
|
- Démarrer `npm run serve-business`
|
||||||
|
- Accéder à http://localhost:3006/team
|
||||||
|
- Vérifier que les visualisations se chargent
|
||||||
|
|
||||||
|
4. **La navigation est correcte** :
|
||||||
|
- Vérifier qu'il n'y a qu'un seul lien "Équipe"
|
||||||
|
- Vérifier que tous les liens fonctionnent
|
||||||
403
docs/app/guide-page-equipe.md
Normal file
403
docs/app/guide-page-equipe.md
Normal file
@@ -0,0 +1,403 @@
|
|||||||
|
# Guide de la Page Equipe & Technologies
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
La page **Equipe & Technologies** (`/team`) est une interface de visualisation interactive qui permet d'analyser les competences de l'equipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une equipe de genese pour un MVP.
|
||||||
|
|
||||||
|
Cette page est accessible depuis le radar via le lien **"Equipe"** dans le header de navigation.
|
||||||
|
|
||||||
|
## Architecture Technique
|
||||||
|
|
||||||
|
La page utilise une architecture basee sur l'injection de contenu cote client :
|
||||||
|
|
||||||
|
- **Script principal** : `public/team-block-script.js` charge par Next.js via `_document.tsx`
|
||||||
|
- **Remplacement DOM** : Le script detecte la route `/team` et remplace le contenu du body
|
||||||
|
- **Chargement dynamique** : Cytoscape.js et ECharts sont charges depuis CDN
|
||||||
|
- **Donnees JSON** : `public/team-visualization-data.json` genere par script Node.js
|
||||||
|
- **Navigation** : Lien integre dans `Navigation.tsx` (modifie par script Python lors du build)
|
||||||
|
|
||||||
|
Cette approche evite les conflits SSR tout en permettant des visualisations interactives riches.
|
||||||
|
|
||||||
|
### Fichiers impliques
|
||||||
|
|
||||||
|
- **Script principal** : `public/team-block-script.js` (injection du contenu et visualisations)
|
||||||
|
- **Page Next.js** : `.techradar/src/pages/team.tsx` (page vide, le script remplace le contenu)
|
||||||
|
- **Donnees JSON** : `public/team-visualization-data.json` (genere par `scripts/generate-team-visualization-data.js`)
|
||||||
|
- **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiee par script Python)
|
||||||
|
- **Document modifie** : `.techradar/src/pages/_document.tsx` (modifie pour charger le script)
|
||||||
|
|
||||||
|
## Acces
|
||||||
|
|
||||||
|
- **URL** : `/team` ou `/team/`
|
||||||
|
- **Lien de navigation** : Disponible dans le header du radar (bouton "Equipe")
|
||||||
|
- **Authentification** : Meme protection que le radar (mot de passe `laplank-radar`)
|
||||||
|
|
||||||
|
## Fonctionnalites
|
||||||
|
|
||||||
|
La page propose trois visualisations complementaires accessibles via des onglets :
|
||||||
|
|
||||||
|
### 1. Graphe Reseau
|
||||||
|
|
||||||
|
**Objectif** : Visualiser les connexions entre technologies et membres de l'equipe.
|
||||||
|
|
||||||
|
**Fonctionnalites** :
|
||||||
|
- **Noeuds technologies** :
|
||||||
|
- Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge)
|
||||||
|
- Taille proportionnelle au nombre de personnes maitrisant la technologie
|
||||||
|
- Label avec le nom de la technologie
|
||||||
|
- **Noeuds membres** :
|
||||||
|
- Couleur verte
|
||||||
|
- Taille proportionnelle a la disponibilite
|
||||||
|
- Label avec le nom du membre
|
||||||
|
- **Liens** :
|
||||||
|
- Connectent les technologies aux membres qui les maitrisent
|
||||||
|
- Epaisseur selon le niveau de competence
|
||||||
|
|
||||||
|
**Utilisation** :
|
||||||
|
- Zoom : Molette de la souris ou pincement sur mobile
|
||||||
|
- Pan : Clic gauche + glisser
|
||||||
|
- Animation : Le graphe s'organise automatiquement au chargement
|
||||||
|
|
||||||
|
**Technologie** : Cytoscape.js avec le layout CoSE (integre)
|
||||||
|
|
||||||
|
### 2. Matrice de Congestion
|
||||||
|
|
||||||
|
**Objectif** : Identifier les technologies avec faible couverture d'equipe (congestions).
|
||||||
|
|
||||||
|
**Fonctionnalites** :
|
||||||
|
- **Axe X** : Membres de l'equipe
|
||||||
|
- **Axe Y** : Technologies (uniquement les technologies "adopt")
|
||||||
|
- **Points verts** : Indiquent qu'un membre maitrise une technologie
|
||||||
|
- **Taille des points** : Proportionnelle a la disponibilite du membre
|
||||||
|
|
||||||
|
**Utilisation** :
|
||||||
|
- Survoler un point pour voir les details (membre, technologie, disponibilite)
|
||||||
|
- Identifier visuellement les technologies avec peu de personnes (peu de points sur une ligne)
|
||||||
|
|
||||||
|
**Note** : Seules les technologies avec `ring: adopt` sont affichees dans la matrice, car ce sont les technologies fondamentales en production.
|
||||||
|
|
||||||
|
**Technologie** : ECharts (scatter plot)
|
||||||
|
|
||||||
|
### 3. Equipe de Genese MVP
|
||||||
|
|
||||||
|
**Objectif** : Composer automatiquement une equipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.
|
||||||
|
|
||||||
|
**Fonctionnalites** :
|
||||||
|
- **Selection automatique** : Algorithme qui selectionne les membres selon :
|
||||||
|
- Disponibilite >= 50%
|
||||||
|
- Couverture maximale des technologies critiques (technologies avec `ring: adopt`)
|
||||||
|
- Equilibre des competences
|
||||||
|
- **Statistiques** :
|
||||||
|
- Nombre de membres selectionnes
|
||||||
|
- Capacite totale (somme des disponibilites)
|
||||||
|
- Disponibilite moyenne
|
||||||
|
- Technologies couvertes / total
|
||||||
|
- **Cartes membres** :
|
||||||
|
- Nom et role
|
||||||
|
- Niveau de seniorite
|
||||||
|
- Disponibilite
|
||||||
|
- Technologies maitrisees
|
||||||
|
- **Alertes** :
|
||||||
|
- Technologies critiques non couvertes (en rouge)
|
||||||
|
- Impact business et skill gap pour chaque technologie manquante
|
||||||
|
|
||||||
|
**Technologie** : HTML/CSS genere dynamiquement par JavaScript
|
||||||
|
|
||||||
|
## Donnees
|
||||||
|
|
||||||
|
### Sources de donnees
|
||||||
|
|
||||||
|
1. **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
|
||||||
|
2. **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
|
||||||
|
|
||||||
|
### Generation des donnees
|
||||||
|
|
||||||
|
Le script `scripts/generate-team-visualization-data.js` :
|
||||||
|
|
||||||
|
1. **Lit les profils equipe** depuis `docs/data/team/*.md`
|
||||||
|
2. **Lit les technologies** depuis `radar-business/2025-01-15/*.md`
|
||||||
|
3. **Genere** `public/team-visualization-data.json` avec :
|
||||||
|
- `network` : Donnees reseau (nodes/edges) pour Cytoscape.js
|
||||||
|
- `congestionMatrix` : Matrice de congestion pour ECharts
|
||||||
|
- `genesisTeam` : Equipe de genese MVP avec statistiques
|
||||||
|
- `technologies` : Liste des technologies avec metadonnees
|
||||||
|
- `members` : Liste des membres avec competences
|
||||||
|
- `generatedAt` : Date de generation
|
||||||
|
|
||||||
|
### Executer la generation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
**Important** : Regenerer les donnees apres chaque modification des profils equipe ou des technologies.
|
||||||
|
|
||||||
|
## Structure des profils equipe
|
||||||
|
|
||||||
|
Les profils sont stockes dans `docs/data/team/*.md` avec le format suivant :
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
name: "pseudo"
|
||||||
|
fullName: "Nom complet"
|
||||||
|
role: "Role"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2016-01"
|
||||||
|
interests: ["Mobile", "Infrastructure"]
|
||||||
|
skills:
|
||||||
|
- name: "Flutter"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Python"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Autonomie"
|
||||||
|
- "Pedagogie"
|
||||||
|
projects:
|
||||||
|
- "Projet1"
|
||||||
|
- "Projet2"
|
||||||
|
---
|
||||||
|
|
||||||
|
Description du membre de l'equipe.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Metadonnees
|
||||||
|
|
||||||
|
- **name** : Pseudo unique (utilise comme identifiant)
|
||||||
|
- **fullName** : Nom complet
|
||||||
|
- **role** : Role dans l'equipe
|
||||||
|
- **availability** : Disponibilite en pourcentage (0-100)
|
||||||
|
- **seniorityLevel** : Niveau de seniorite (junior, intermediate, senior, expert)
|
||||||
|
- **yearsExperience** : Annees d'experience totales
|
||||||
|
- **joinDate** : Date d'arrivee (format YYYY-MM)
|
||||||
|
- **interests** : Centres d'interet
|
||||||
|
- **skills** : Liste des competences techniques avec niveau, annees et derniere utilisation
|
||||||
|
- **softSkills** : Competences comportementales
|
||||||
|
- **projects** : Projets sur lesquels le membre a travaille
|
||||||
|
|
||||||
|
## Processus de build
|
||||||
|
|
||||||
|
### Dans le Dockerfile
|
||||||
|
|
||||||
|
1. **Copie des fichiers publics** : `public/team-block-script.js` et `public/team-visualization-data.json` vers `.techradar/public/`
|
||||||
|
2. **Creation de la page Next.js** : Genere `.techradar/src/pages/team.tsx` (page vide)
|
||||||
|
3. **Modification de _document.tsx** : Ajoute le chargement de `team-block-script.js` avec `strategy="beforeInteractive"`
|
||||||
|
4. **Modification de Navigation** : Ajoute le lien "Equipe" dans `Navigation.tsx` via script Python
|
||||||
|
5. **Build Next.js** : Genere les fichiers statiques dans `out/`
|
||||||
|
6. **Copie finale** : S'assure que les fichiers team sont dans `out/`
|
||||||
|
|
||||||
|
### Script Python pour Navigation.tsx
|
||||||
|
|
||||||
|
Le script `docker/add_team_link.py` :
|
||||||
|
|
||||||
|
1. **Supprime tous les liens Equipe existants** : Evite les doublons
|
||||||
|
2. **Ajoute un seul lien Equipe** : Apres le lien "Vue d'ensemble"
|
||||||
|
3. **Verifie le resultat** : S'assure qu'il n'y a qu'un seul lien
|
||||||
|
|
||||||
|
### Script Python pour _document.tsx
|
||||||
|
|
||||||
|
Le script `docker/patch_document.py` :
|
||||||
|
|
||||||
|
1. **Ajoute l'import de Script** : Si pas deja present
|
||||||
|
2. **Ajoute le chargement du script** : `team-block-script.js` avec `strategy="beforeInteractive"`
|
||||||
|
|
||||||
|
## Technologies utilisees
|
||||||
|
|
||||||
|
### Bibliotheques JavaScript (chargees depuis CDN)
|
||||||
|
|
||||||
|
- **Cytoscape.js** : Graphique reseau interactif (v3.26.0)
|
||||||
|
- **ECharts** : Matrice de congestion scatter plot (v5.4.3)
|
||||||
|
|
||||||
|
### Layout du graphe
|
||||||
|
|
||||||
|
Le graphe reseau utilise le layout **CoSE** (Compound Spring Embedder) integre a Cytoscape.js. Ce layout :
|
||||||
|
- Organise les noeuds avec un algorithme force-directed
|
||||||
|
- Prend en compte les labels pour eviter les chevauchements
|
||||||
|
- S'anime lors du chargement initial
|
||||||
|
|
||||||
|
### Chargement des donnees
|
||||||
|
|
||||||
|
Les donnees sont chargees depuis `/team-visualization-data.json` via `fetch()` au chargement de la page.
|
||||||
|
|
||||||
|
## Fonctionnement du script
|
||||||
|
|
||||||
|
Le script `team-block-script.js` fonctionne ainsi :
|
||||||
|
|
||||||
|
1. **Detection de la route** : Verifie si le chemin commence par `/team`
|
||||||
|
2. **Remplacement du DOM** : Injecte le HTML de la page (header, onglets, containers)
|
||||||
|
3. **Injection du CSS** : Ajoute les styles pour la page
|
||||||
|
4. **Chargement des bibliotheques** : Charge Cytoscape et ECharts depuis CDN
|
||||||
|
5. **Chargement des donnees** : Fetch `/team-visualization-data.json`
|
||||||
|
6. **Initialisation des visualisations** : Cree le graphe, la matrice et l'equipe de genese
|
||||||
|
7. **Gestion des onglets** : Permet de basculer entre les trois visualisations
|
||||||
|
|
||||||
|
## Utilisation
|
||||||
|
|
||||||
|
### Visualiser les competences
|
||||||
|
|
||||||
|
1. Ouvrir l'onglet **"Graphe Reseau"**
|
||||||
|
2. Explorer les connexions entre technologies et membres
|
||||||
|
3. Identifier les technologies avec beaucoup de personnes (gros noeuds)
|
||||||
|
4. Identifier les technologies avec peu de personnes (petits noeuds = congestions)
|
||||||
|
|
||||||
|
### Identifier les congestions
|
||||||
|
|
||||||
|
1. Ouvrir l'onglet **"Matrice Congestion"**
|
||||||
|
2. Reperer les lignes (technologies) avec peu de points verts
|
||||||
|
3. Ces technologies ont une faible couverture d'equipe
|
||||||
|
4. Actions recommandees :
|
||||||
|
- Former l'equipe
|
||||||
|
- Recruter
|
||||||
|
- Documenter
|
||||||
|
|
||||||
|
### Composer une Equipe pour un Projet
|
||||||
|
|
||||||
|
1. Ouvrir l'onglet **"Equipe Genese MVP"**
|
||||||
|
2. L'equipe est automatiquement selectionnee selon :
|
||||||
|
- Disponibilite >= 50%
|
||||||
|
- Couverture maximale des technologies
|
||||||
|
3. Consulter les statistiques et les cartes membres
|
||||||
|
4. Verifier les technologies non couvertes (en rouge)
|
||||||
|
|
||||||
|
## Personnalisation
|
||||||
|
|
||||||
|
### Modifier le seuil de disponibilite
|
||||||
|
|
||||||
|
Pour l'equipe de genese MVP, le seuil est fixe a **50%**. Pour le modifier :
|
||||||
|
|
||||||
|
1. Ouvrir `scripts/generate-team-visualization-data.js`
|
||||||
|
2. Modifier le filtre `m.availability >= 50` dans les fonctions `generateCongestionMatrix()` et `generateGenesisTeam()`
|
||||||
|
3. Regenerer les donnees : `node scripts/generate-team-visualization-data.js`
|
||||||
|
|
||||||
|
**Note** : Les technologies critiques utilisees pour la selection sont celles avec `ring: adopt`. Pour modifier ce critere, changer le filtre `t.ring === 'adopt'` dans `generateGenesisTeam()`.
|
||||||
|
|
||||||
|
### Modifier le layout du graphe
|
||||||
|
|
||||||
|
Le layout est configure dans `public/team-block-script.js` dans la fonction `initNetwork()` :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layout: {
|
||||||
|
name: 'cose',
|
||||||
|
nodeDimensionsIncludeLabels: true,
|
||||||
|
idealEdgeLength: 100,
|
||||||
|
nodeRepulsion: 4500,
|
||||||
|
gravity: 0.25,
|
||||||
|
numIter: 1000,
|
||||||
|
animate: true,
|
||||||
|
animationDuration: 800
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Parametres disponibles :
|
||||||
|
- `nodeRepulsion` : Force de repulsion entre noeuds (plus eleve = plus espaces)
|
||||||
|
- `gravity` : Force de gravite vers le centre
|
||||||
|
- `numIter` : Nombre d'iterations de l'algorithme
|
||||||
|
- `animationDuration` : Duree de l'animation en ms
|
||||||
|
|
||||||
|
## Maintenance
|
||||||
|
|
||||||
|
### Mettre a jour les profils equipe
|
||||||
|
|
||||||
|
1. Modifier les fichiers dans `docs/data/team/*.md`
|
||||||
|
2. Regenerer les donnees : `node scripts/generate-team-visualization-data.js`
|
||||||
|
3. Commiter les deux fichiers (profils + donnees JSON)
|
||||||
|
4. Rebuild Docker pour deployer
|
||||||
|
|
||||||
|
### Ajouter un nouveau membre
|
||||||
|
|
||||||
|
1. Creer un fichier `docs/data/team/pseudo.md`
|
||||||
|
2. Remplir toutes les metadonnees (voir format ci-dessus)
|
||||||
|
3. Regenerer les donnees
|
||||||
|
4. Verifier que le membre apparait dans les visualisations
|
||||||
|
|
||||||
|
### Mettre a jour les competences
|
||||||
|
|
||||||
|
1. Modifier la section `skills` dans le profil equipe
|
||||||
|
2. Regenerer les donnees
|
||||||
|
3. Verifier que les connexions sont mises a jour dans le graphe
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Le lien "Equipe" n'apparait pas dans le header
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le script Python n'a pas ete execute
|
||||||
|
- Le fichier Navigation.tsx n'a pas ete trouve
|
||||||
|
- Erreur dans le script Python
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Verifier les logs Docker lors du build
|
||||||
|
2. Verifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe
|
||||||
|
3. Rebuild avec `--no-cache` pour forcer l'execution du script
|
||||||
|
|
||||||
|
### La page `/team` affiche le radar au lieu des visualisations
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le script `team-block-script.js` n'est pas charge
|
||||||
|
- Le script n'est pas modifie dans `_document.tsx`
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Verifier la console du navigateur (F12) pour les erreurs
|
||||||
|
2. Verifier que le script `patch_document.py` a ete execute lors du build
|
||||||
|
3. Rebuild avec `--no-cache`
|
||||||
|
|
||||||
|
### Les visualisations sont vides ou affichent une erreur
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le fichier `team-visualization-data.json` n'a pas ete genere
|
||||||
|
- Le fichier n'est pas accessible depuis le navigateur
|
||||||
|
- Erreur dans les donnees
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Generer les donnees : `node scripts/generate-team-visualization-data.js`
|
||||||
|
2. Verifier que le fichier existe dans `public/team-visualization-data.json`
|
||||||
|
3. Verifier la console du navigateur pour les erreurs JavaScript
|
||||||
|
4. Tester l'acces direct : `http://localhost:3006/team-visualization-data.json`
|
||||||
|
|
||||||
|
### Le graphe ne s'affiche pas
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Cytoscape.js n'a pas pu etre charge depuis CDN
|
||||||
|
- Erreur dans la configuration du layout
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Verifier la connexion internet (CDN)
|
||||||
|
2. Verifier la console pour les erreurs de chargement
|
||||||
|
3. Verifier que le layout `cose` est bien utilise (pas `cose-bilkent`)
|
||||||
|
|
||||||
|
### Les donnees ne sont pas a jour
|
||||||
|
|
||||||
|
**Solution** : Regenerer les donnees apres chaque modification :
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Puis rebuild Docker :
|
||||||
|
```bash
|
||||||
|
docker compose -f docker-compose.business.yml build --no-cache
|
||||||
|
docker compose -f docker-compose.business.yml up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fichiers associes
|
||||||
|
|
||||||
|
- **Script principal** : `public/team-block-script.js` (injection et visualisations)
|
||||||
|
- **Page Next.js** : `docker/team-page.tsx` (page vide copiee vers `.techradar/src/pages/team.tsx`)
|
||||||
|
- **Donnees JSON** : `public/team-visualization-data.json` (genere)
|
||||||
|
- **Script de generation** : `scripts/generate-team-visualization-data.js`
|
||||||
|
- **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
|
||||||
|
- **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
|
||||||
|
- **Script Navigation** : `docker/add_team_link.py` (ajoute le lien dans Navigation.tsx)
|
||||||
|
- **Script Document** : `docker/patch_document.py` (ajoute le chargement du script)
|
||||||
|
|
||||||
|
## Ressources
|
||||||
|
|
||||||
|
- [Guide de developpement](./developpement.md)
|
||||||
|
- [Guide de deploiement](./deploiement.md)
|
||||||
|
- [Guide de depannage](./troubleshooting.md)
|
||||||
|
- Documentation Cytoscape.js : https://js.cytoscape.org/
|
||||||
|
- Documentation ECharts : https://echarts.apache.org/
|
||||||
278
docs/app/guide-radar-business.md
Normal file
278
docs/app/guide-radar-business.md
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
# Guide d'Utilisation du Radar Technologique Laplank
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est un tech radar classique pour suivre l'évolution des technologies de l'écosystème Laplank/Duniter/Ğ1. Il permet de suivre l'adoption des technologies au fil du temps avec un historique par release.
|
||||||
|
|
||||||
|
## Accès
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est accessible sur le **port 3006** et est protégé par un **mot de passe** : `laplank-radar`
|
||||||
|
|
||||||
|
L'authentification est gérée côté client via `localStorage` (session valide jusqu'à fermeture du navigateur).
|
||||||
|
|
||||||
|
## Structure du Radar
|
||||||
|
|
||||||
|
### Quadrants
|
||||||
|
|
||||||
|
Le radar est organisé en 4 quadrants business :
|
||||||
|
|
||||||
|
1. **Technologies Différenciantes** : Créent un avantage concurrentiel
|
||||||
|
2. **Technologies de Commodité** : Nécessaires mais non différenciantes
|
||||||
|
3. **Technologies à Risque** : Obsolètes, coûteuses, à migrer
|
||||||
|
4. **Technologies Émergentes** : Opportunités futures
|
||||||
|
|
||||||
|
### Anneaux (Rings)
|
||||||
|
|
||||||
|
Chaque technologie est classée dans un des 4 anneaux classiques :
|
||||||
|
|
||||||
|
1. **Adopt** : Technologies recommandées et utilisées avec succès en production. Stables, éprouvées, peuvent être adoptées en toute confiance pour de nouveaux projets.
|
||||||
|
2. **Trial** : Technologies à essayer. Prometteuses et testées avec succès dans certains contextes. À considérer pour de nouveaux projets.
|
||||||
|
3. **Assess** : Technologies à évaluer. Prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester.
|
||||||
|
4. **Hold** : Technologies à éviter ou à remplacer. Présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets.
|
||||||
|
|
||||||
|
**Important** : Tous les blips doivent utiliser ces rings standards (adopt, trial, assess, hold). Les anciens rings (core, strategic, support, legacy) ne sont plus utilisés.
|
||||||
|
|
||||||
|
## Historique des Technologies
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank suit l'évolution des technologies au fil du temps avec un système d'historique par release.
|
||||||
|
|
||||||
|
### Structure par Release
|
||||||
|
|
||||||
|
Les technologies sont organisées par date de release dans des dossiers :
|
||||||
|
- `radar-business/2025-01-15/` : Release de janvier 2025
|
||||||
|
- `radar-business/2025-04-15/` : Release d'avril 2025 (exemple)
|
||||||
|
- etc.
|
||||||
|
|
||||||
|
### Suivi de l'Évolution
|
||||||
|
|
||||||
|
Chaque technologie peut évoluer entre les releases :
|
||||||
|
- **Nouveau** : Technologie ajoutée dans cette release
|
||||||
|
- **Modifié** : Technologie déplacée (ring ou quadrant) ou description mise à jour
|
||||||
|
- **Inchangé** : Technologie stable, pas de changement
|
||||||
|
|
||||||
|
### Créer une Nouvelle Release
|
||||||
|
|
||||||
|
Pour créer une nouvelle release :
|
||||||
|
|
||||||
|
1. Créer un nouveau dossier avec la date au format `YYYY-MM-DD` :
|
||||||
|
```bash
|
||||||
|
mkdir radar-business/2025-04-15
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Copier les blips pertinents depuis la release précédente
|
||||||
|
|
||||||
|
3. Mettre à jour les blips existants si nécessaire (changement de ring, quadrant, description)
|
||||||
|
|
||||||
|
4. **Migrer les rings si nécessaire** : S'assurer que tous les blips utilisent les rings standards (adopt, trial, assess, hold)
|
||||||
|
|
||||||
|
5. Ajouter les nouveaux blips pour les technologies nouvellement évaluées
|
||||||
|
|
||||||
|
## Métadonnées Business
|
||||||
|
|
||||||
|
Chaque technologie (blip) contient des métadonnées business :
|
||||||
|
|
||||||
|
### Métadonnées Standard
|
||||||
|
|
||||||
|
- **title** : Nom de la technologie
|
||||||
|
- **ring** : Anneau (adopt, trial, assess, hold) - **IMPORTANT** : Utiliser uniquement ces rings standards
|
||||||
|
- **quadrant** : Quadrant business
|
||||||
|
- **tags** : Tags pour le filtrage
|
||||||
|
|
||||||
|
### Métadonnées Business
|
||||||
|
|
||||||
|
- **businessImpact** : Impact sur le business (high, medium, low)
|
||||||
|
- **costToReplace** : Coût estimé de remplacement en euros
|
||||||
|
- **revenueImpact** : Impact sur les revenus (direct, indirect, none)
|
||||||
|
- **riskLevel** : Niveau de risque (high, medium, low)
|
||||||
|
- **maintenanceCost** : Coût annuel de maintenance en euros
|
||||||
|
- **differentiation** : Capacité de différenciation (high, medium, low)
|
||||||
|
|
||||||
|
### Métadonnées Compétences
|
||||||
|
|
||||||
|
- **competencyLevel** : Niveau moyen de compétence (expert, intermediate, beginner)
|
||||||
|
- **teamCoverage** : Nombre de personnes maîtrisant la technologie
|
||||||
|
- **skillGap** : Risque de compétence manquante (high, medium, low)
|
||||||
|
|
||||||
|
## Pages de Stratégie
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank inclut trois pages de stratégie accessibles depuis le header :
|
||||||
|
|
||||||
|
1. **Stratégie Technique** : Vision et roadmap technique pour l'évolution du stack
|
||||||
|
2. **Business** : Analyse stratégique business autour de la dataviz et des flux économiques
|
||||||
|
3. **DataViz Expert** : Opportunités supplémentaires en dataviz (Smart Cities, Green Tech, KM, Cybersecurity)
|
||||||
|
|
||||||
|
Ces pages sont générées dynamiquement via `public/strategie-script.js` qui convertit le contenu Markdown en HTML.
|
||||||
|
|
||||||
|
**Note** : Les fonctions d'ajout de liens dans le header ont été désactivées pour éviter les doublons. Tous les liens sont maintenant gérés par `Navigation.tsx`.
|
||||||
|
|
||||||
|
### Contenu des Pages
|
||||||
|
|
||||||
|
Le contenu des pages de stratégie est intégré directement dans `public/strategie-script.js` :
|
||||||
|
- `docs/data/strategie-evolution-technique.md` : Stratégie d'évolution technique
|
||||||
|
- `docs/data/strategie-business.md` : Analyse business et opportunités
|
||||||
|
- `docs/data/opportunites-dataviz.md` et `docs/data/opportunites-dataviz-details.md` : Opportunités DataViz
|
||||||
|
|
||||||
|
Pour modifier le contenu, éditer directement `public/strategie-script.js` (sections `markdownContent`) ou les fichiers sources dans `docs/data/`.
|
||||||
|
|
||||||
|
## Navigation
|
||||||
|
|
||||||
|
Le header de navigation contient les liens suivants :
|
||||||
|
- **Comment utiliser le Radar Technologique ?** : Page d'aide
|
||||||
|
- **Vue d'ensemble des technologies** : Vue d'ensemble
|
||||||
|
- **👥 Équipe** : Page de visualisation équipe/technologies
|
||||||
|
|
||||||
|
**Important** : Tous les liens sont gérés par `Navigation.tsx`. Les scripts JavaScript qui ajoutaient des liens ont été désactivés pour éviter les doublons.
|
||||||
|
|
||||||
|
## Utilisation
|
||||||
|
|
||||||
|
### Ajouter une Nouvelle Technologie
|
||||||
|
|
||||||
|
1. Créer un fichier Markdown dans `radar-business/2025-01-15/`
|
||||||
|
2. Utiliser le format défini dans `radar-business/FORMAT-BLIP.md`
|
||||||
|
3. **Utiliser les rings standards** : adopt, trial, assess, hold
|
||||||
|
4. Remplir toutes les métadonnées
|
||||||
|
5. Ajouter la description et les sections recommandées
|
||||||
|
|
||||||
|
### Modifier une Technologie Existante
|
||||||
|
|
||||||
|
1. Ouvrir le fichier Markdown correspondant
|
||||||
|
2. Modifier les métadonnées ou le contenu
|
||||||
|
3. **Vérifier que le ring est standard** : adopt, trial, assess, hold
|
||||||
|
4. Mettre à jour la date si changement significatif
|
||||||
|
|
||||||
|
### Analyser le Radar
|
||||||
|
|
||||||
|
1. Exécuter le script d'analyse :
|
||||||
|
```bash
|
||||||
|
node scripts/analyze-business-metrics.js
|
||||||
|
```
|
||||||
|
2. Consulter le rapport généré dans `docs/data/analyse-strategique.md`
|
||||||
|
|
||||||
|
### Générer les Blips
|
||||||
|
|
||||||
|
Pour régénérer les blips depuis `docs/data/technologies-duniter.md` :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/extract-technologies.js
|
||||||
|
```
|
||||||
|
|
||||||
|
## Migration des Rings
|
||||||
|
|
||||||
|
Si vous avez des blips avec les anciens rings, utilisez ce mapping :
|
||||||
|
|
||||||
|
- **core** → **adopt** : Technologies fondamentales en production
|
||||||
|
- **strategic** → **assess** : Technologies prometteuses à évaluer
|
||||||
|
- **support** → **adopt** : Technologies utilisées en production
|
||||||
|
- **trial** → **trial** : Déjà correct
|
||||||
|
- **legacy** → **hold** : Technologies obsolètes à remplacer
|
||||||
|
|
||||||
|
Le script `scripts/migrate-rings.sh` peut être utilisé pour automatiser cette migration.
|
||||||
|
|
||||||
|
## Interprétation des Résultats
|
||||||
|
|
||||||
|
### Technologies Critiques
|
||||||
|
|
||||||
|
Les technologies en ring "adopt" avec businessImpact "high" sont critiques. Elles nécessitent :
|
||||||
|
- Maintenance proactive
|
||||||
|
- Formation continue
|
||||||
|
- Documentation exhaustive
|
||||||
|
- Plans de continuité
|
||||||
|
|
||||||
|
### Technologies à Risque
|
||||||
|
|
||||||
|
Les technologies avec riskLevel "high" ou skillGap "high" présentent des risques. Actions recommandées :
|
||||||
|
- Formation ou recrutement
|
||||||
|
- Documentation
|
||||||
|
- Plan de migration si nécessaire
|
||||||
|
|
||||||
|
### Opportunités d'Innovation
|
||||||
|
|
||||||
|
Les technologies émergentes avec differentiation "high" sont des opportunités. Actions :
|
||||||
|
- POC (Proof of Concept)
|
||||||
|
- Évaluation de l'impact
|
||||||
|
- Adoption progressive
|
||||||
|
|
||||||
|
### Optimisation des Coûts
|
||||||
|
|
||||||
|
Les technologies de commodité avec maintenanceCost élevé peuvent être optimisées :
|
||||||
|
- Standardisation
|
||||||
|
- Automatisation
|
||||||
|
- Réduction des coûts
|
||||||
|
|
||||||
|
## Méthodologie d'Analyse
|
||||||
|
|
||||||
|
### 1. Collecte des Données
|
||||||
|
|
||||||
|
- Inventorier toutes les technologies
|
||||||
|
- Collecter les métadonnées business
|
||||||
|
- Analyser les compétences de l'équipe
|
||||||
|
|
||||||
|
### 2. Classification
|
||||||
|
|
||||||
|
- Classer par quadrant business
|
||||||
|
- Classer par ring (adopt, trial, assess, hold) - **utiliser uniquement ces rings**
|
||||||
|
- Évaluer les métadonnées
|
||||||
|
|
||||||
|
### 3. Analyse
|
||||||
|
|
||||||
|
- Identifier les patterns
|
||||||
|
- Calculer les métriques
|
||||||
|
- Identifier les risques et opportunités
|
||||||
|
|
||||||
|
### 4. Recommandations
|
||||||
|
|
||||||
|
- Prioriser les actions
|
||||||
|
- Définir la roadmap
|
||||||
|
- Planifier les investissements
|
||||||
|
|
||||||
|
## Templates
|
||||||
|
|
||||||
|
### Template de Blip
|
||||||
|
|
||||||
|
Voir `radar-business/FORMAT-BLIP.md` pour le template complet avec toutes les métadonnées.
|
||||||
|
|
||||||
|
### Template d'Analyse
|
||||||
|
|
||||||
|
Le script `analyze-business-metrics.js` génère automatiquement un rapport d'analyse.
|
||||||
|
|
||||||
|
## Maintenance
|
||||||
|
|
||||||
|
### Mise à Jour Régulière
|
||||||
|
|
||||||
|
- Mettre à jour les métadonnées trimestriellement
|
||||||
|
- Réviser les classifications annuellement
|
||||||
|
- Mettre à jour les coûts et risques
|
||||||
|
- **Vérifier que tous les blips utilisent les rings standards**
|
||||||
|
|
||||||
|
### Révision Stratégique
|
||||||
|
|
||||||
|
- Révision annuelle de la stratégie
|
||||||
|
- Ajustement des priorités
|
||||||
|
- Mise à jour de la roadmap
|
||||||
|
|
||||||
|
## Déploiement
|
||||||
|
|
||||||
|
Le Radar Technologique Laplank est déployé via Docker et Portainer :
|
||||||
|
|
||||||
|
- **Dockerfile** : `Dockerfile.business`
|
||||||
|
- **Docker Compose** : `docker-compose.business.yml`
|
||||||
|
- **Port** : 3006 (mappé depuis le port 3000 du conteneur)
|
||||||
|
- **Base path** : `/` (racine, pas de sous-chemin)
|
||||||
|
|
||||||
|
Voir [deploiement.md](./deploiement.md) pour les détails complets.
|
||||||
|
|
||||||
|
## Ressources
|
||||||
|
|
||||||
|
- **Format des blips** : `radar-business/FORMAT-BLIP.md`
|
||||||
|
- **Configuration** : `radar-business/config-business.json`
|
||||||
|
- **Script de stratégie** : `public/strategie-script.js`
|
||||||
|
- **Analyse stratégique** : `docs/data/analyse-strategique.md`
|
||||||
|
- **Stratégie d'évolution** : `docs/data/strategie-evolution-technique.md`
|
||||||
|
- **Stratégie business** : `docs/data/strategie-business.md`
|
||||||
|
- **Opportunités DataViz** : `docs/data/opportunites-dataviz.md` et `docs/data/opportunites-dataviz-details.md`
|
||||||
|
- **Technologies Duniter** : `docs/data/technologies-duniter.md`
|
||||||
|
- **Profils Team** : `docs/data/team/*.md` (fichiers individuels)
|
||||||
|
|
||||||
|
## Support
|
||||||
|
|
||||||
|
Pour toute question ou contribution, consulter la documentation ou contacter l'équipe technique.
|
||||||
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*
|
||||||
|
|
||||||
470
docs/app/roadmap-code-source.md
Normal file
470
docs/app/roadmap-code-source.md
Normal file
@@ -0,0 +1,470 @@
|
|||||||
|
# Roadmap basée sur le code source
|
||||||
|
|
||||||
|
**Date de création** : 2025-12-09
|
||||||
|
**Basé sur** : Analyse du code source actuel (version 4.3.0)
|
||||||
|
|
||||||
|
## Vue d'ensemble
|
||||||
|
|
||||||
|
Ce document présente la roadmap de développement basée sur l'analyse du code source existant. Les priorités sont établies en fonction des fonctionnalités déjà implémentées, des scripts disponibles, et des opportunités d'amélioration identifiées dans le code.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## État actuel du système
|
||||||
|
|
||||||
|
### Architecture existante
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ APPLICATION STATIQUE │
|
||||||
|
│ (Next.js export - 100% client-side) │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
┌───────────────┼───────────────┐
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────────┐ ┌──────────────┐ ┌──────────────┐
|
||||||
|
│ Radar │ │ Strategie │ │ Team │
|
||||||
|
│ Tech │ │ (Markdown) │ │ Visualisation│
|
||||||
|
└──────────┘ └──────────────┘ └──────────────┘
|
||||||
|
│
|
||||||
|
┌───────────────┼───────────────┐
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
||||||
|
│ Scripts │ │ Docker │ │ Data/JSON │
|
||||||
|
│ Generation │ │ Deploy │ │ Static │
|
||||||
|
└──────────────┘ └──────────────┘ └──────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Fonctionnalités implémentées
|
||||||
|
|
||||||
|
#### ✅ Core Application
|
||||||
|
- **Radar technologique** : Visualisation interactive des technologies par quadrant/ring
|
||||||
|
- **Pages stratégie** : 4 pages markdown intégrées (`strategie`, `business`, `dataviz`, `dataviz-details`)
|
||||||
|
- **Page équipe** : Visualisation des compétences avec 3 vues (graphe réseau, matrice congestion, équipe genèse)
|
||||||
|
- **Cartes de profil membres** : Modal cliquable depuis toutes les visualisations
|
||||||
|
- **Authentification simple** : Protection par mot de passe (`laplank-radar`) pour pages stratégie
|
||||||
|
|
||||||
|
#### ✅ Scripts d'automatisation
|
||||||
|
| Script | Fonction | Status |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| `generate-team-visualization-data.js` | Génère `team-visualization-data.json` avec profils complets | ✅ Actif |
|
||||||
|
| `analyze-business-metrics.js` | Analyse métriques business et génère rapport | ✅ Actif |
|
||||||
|
| `extract-technologies.js` | Extrait technologies depuis markdown | ✅ Actif |
|
||||||
|
| `verify-blips.js` | Vérifie la cohérence des blips | ✅ Actif |
|
||||||
|
| `migrate-rings.sh` | Migration entre versions de rings | ✅ Actif |
|
||||||
|
| `patch-navigation.sh` | Ajoute liens navigation | ✅ Actif |
|
||||||
|
|
||||||
|
#### ✅ Infrastructure
|
||||||
|
- **Docker Compose** : Déploiement containerisé (business + local)
|
||||||
|
- **Build automatisé** : Scripts npm pour build/serve
|
||||||
|
- **CI/CD ready** : Structure prête pour intégration GitLab/GitHub
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Roadmap par priorité
|
||||||
|
|
||||||
|
### 🔴 Priorité 1 : Consolidation & Robustesse (Court terme - 1-3 mois)
|
||||||
|
|
||||||
|
#### 1.1 Améliorer la gestion des données (2 semaines)
|
||||||
|
|
||||||
|
**Problèmes identifiés dans le code :**
|
||||||
|
- Parsing YAML manuel fragile dans `generate-team-visualization-data.js`
|
||||||
|
- Pas de validation des schémas de données
|
||||||
|
- Extraction de compétences basée sur regex (peut échouer)
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
```javascript
|
||||||
|
// TODO: Remplacer parsing YAML manuel par librairie
|
||||||
|
// Fichier: scripts/generate-team-visualization-data.js
|
||||||
|
// Ligne ~12-16: extractYaml() fonction basique
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] Intégrer `js-yaml` pour parsing robuste
|
||||||
|
- [ ] Ajouter validation JSON Schema pour profils membres
|
||||||
|
- [ ] Créer script `validate-data.js` pour vérifier cohérence avant build
|
||||||
|
- [ ] Tests unitaires pour fonctions d'extraction
|
||||||
|
|
||||||
|
**Impact** : Réduit les erreurs de build, améliore la maintenabilité
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 1.2 Améliorer la détection navigation SPA (1 semaine)
|
||||||
|
|
||||||
|
**État actuel :**
|
||||||
|
- `team-block-script.js` utilise `MutationObserver` pour détecter changements d'URL
|
||||||
|
- Solution fonctionnelle mais peut avoir des latences
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Implémenter détection via `popstate` event (plus fiable)
|
||||||
|
- [ ] Ajouter debounce pour éviter multiples initialisations
|
||||||
|
- [ ] Tester navigation Next.js sur différentes versions
|
||||||
|
|
||||||
|
**Fichiers concernés :**
|
||||||
|
- `public/team-block-script.js` (lignes 342-350)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 1.3 Optimiser les performances des visualisations (2 semaines)
|
||||||
|
|
||||||
|
**Problèmes identifiés :**
|
||||||
|
- Graphe Cytoscape peut ralentir avec 50+ nœuds
|
||||||
|
- Pas de lazy loading des données
|
||||||
|
- Pas de cache côté client
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Implémenter pagination/filtrage pour graphe réseau
|
||||||
|
- [ ] Ajouter cache localStorage pour `team-visualization-data.json`
|
||||||
|
- [ ] Optimiser layout Cytoscape (réduire `numIter` pour perf)
|
||||||
|
- [ ] Code splitting pour bibliothèques externes (Cytoscape, ECharts)
|
||||||
|
|
||||||
|
**Fichiers concernés :**
|
||||||
|
- `public/team-block-script.js` (initNetwork, initCongestion)
|
||||||
|
- `scripts/generate-team-visualization-data.js`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🟠 Priorité 2 : Fonctionnalités métier (Moyen terme - 3-6 mois)
|
||||||
|
|
||||||
|
#### 2.1 Edition via NetlifyCMS + Gitea (1 mois)
|
||||||
|
|
||||||
|
**Plan détaillé disponible :** `docs/app/plan-edition-cms.md`
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Créer `public/admin/index.html` et `config.yml`
|
||||||
|
- [ ] Configurer OAuth Gitea
|
||||||
|
- [ ] Ajouter bouton "Éditer" dans cartes de profil
|
||||||
|
- [ ] Intégrer régénération dans CI/CD
|
||||||
|
- [ ] Gérer CORS si nécessaire (proxy OAuth)
|
||||||
|
|
||||||
|
**Fichiers à créer/modifier :**
|
||||||
|
- `public/admin/index.html`
|
||||||
|
- `public/admin/config.yml`
|
||||||
|
- `public/team-block-script.js` (ajout lien édition)
|
||||||
|
- `.gitlab-ci.yml` (étape régénération)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2.2 Export/Import de données (2 semaines)
|
||||||
|
|
||||||
|
**Opportunité identifiée :**
|
||||||
|
- Scripts d'extraction existants mais pas d'export structuré
|
||||||
|
- Pas de format d'échange standard
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Créer script `export-team-data.js` (CSV/JSON/Excel)
|
||||||
|
- [ ] Ajouter import depuis CSV pour profils membres
|
||||||
|
- [ ] Générer rapports PDF automatiques
|
||||||
|
- [ ] API REST simple pour export (si besoin backend)
|
||||||
|
|
||||||
|
**Scripts à créer :**
|
||||||
|
- `scripts/export-team-data.js`
|
||||||
|
- `scripts/import-profiles.js`
|
||||||
|
- `scripts/generate-pdf-report.js`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2.3 Analytics et métriques avancées (3 semaines)
|
||||||
|
|
||||||
|
**Fonctionnalités existantes à étendre :**
|
||||||
|
- `analyze-business-metrics.js` existe mais limité
|
||||||
|
- Pas de visualisation des métriques dans l'UI
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Ajouter dashboard de métriques dans page équipe
|
||||||
|
- [ ] Graphiques d'évolution temporelle (si historique disponible)
|
||||||
|
- [ ] Alertes automatiques sur gaps critiques
|
||||||
|
- [ ] Export des métriques en format standardisé
|
||||||
|
|
||||||
|
**Fichiers à créer/modifier :**
|
||||||
|
- `scripts/generate-metrics-dashboard.js`
|
||||||
|
- `public/team-block-script.js` (nouveau onglet métriques)
|
||||||
|
- `scripts/analyze-business-metrics.js` (enrichir)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🟡 Priorité 3 : Expérience utilisateur (Moyen terme - 6-9 mois)
|
||||||
|
|
||||||
|
#### 3.1 Recherche et filtrage avancés (2 semaines)
|
||||||
|
|
||||||
|
**Fonctionnalité manquante identifiée :**
|
||||||
|
- Pas de recherche dans les profils membres
|
||||||
|
- Pas de filtrage dans les visualisations
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Ajouter barre de recherche dans page équipe
|
||||||
|
- [ ] Filtres par compétence, disponibilité, séniorité
|
||||||
|
- [ ] Recherche full-text dans descriptions
|
||||||
|
- [ ] Sauvegarder filtres dans URL (partageable)
|
||||||
|
|
||||||
|
**Fichiers à modifier :**
|
||||||
|
- `public/team-block-script.js`
|
||||||
|
- `scripts/generate-team-visualization-data.js` (index de recherche)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3.2 Responsive design et accessibilité (3 semaines)
|
||||||
|
|
||||||
|
**Problèmes identifiés :**
|
||||||
|
- Visualisations Cytoscape/ECharts peuvent être difficiles sur mobile
|
||||||
|
- Pas de support clavier pour navigation
|
||||||
|
- Couleurs peuvent poser problème (daltonisme)
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Adapter layouts pour petits écrans
|
||||||
|
- [ ] Ajouter navigation clavier (Tab, Enter, Escape)
|
||||||
|
- [ ] Palette de couleurs accessible (WCAG AA)
|
||||||
|
- [ ] Mode sombre/clair
|
||||||
|
- [ ] Support lecteur d'écran (ARIA labels)
|
||||||
|
|
||||||
|
**Fichiers concernés :**
|
||||||
|
- `public/team-block-script.js` (CSS et interactions)
|
||||||
|
- `custom.css`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3.3 Notifications et alertes temps réel (4 semaines)
|
||||||
|
|
||||||
|
**Opportunité :**
|
||||||
|
- Détecter automatiquement les changements critiques
|
||||||
|
- Alerter sur gaps de compétences
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Système de webhooks pour changements Git
|
||||||
|
- [ ] Notifications push (si service worker)
|
||||||
|
- [ ] Dashboard d'alertes
|
||||||
|
- [ ] Email automatique sur seuils critiques
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🟢 Priorité 4 : Innovation et différenciation (Long terme - 9-12 mois)
|
||||||
|
|
||||||
|
#### 4.1 IA pour recommandations d'équipe (2 mois)
|
||||||
|
|
||||||
|
**Opportunité identifiée dans stratégie :**
|
||||||
|
- Section "Knowledge Management + Private AI" dans stratégie
|
||||||
|
- Graph RAG mentionné dans `strategie-script.js`
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Analyser profils avec LLM local (Mistral, Llama)
|
||||||
|
- [ ] Recommandations automatiques pour équipe genèse
|
||||||
|
- [ ] Détection de patterns dans compétences
|
||||||
|
- [ ] Prédiction de gaps futurs
|
||||||
|
|
||||||
|
**Prérequis :**
|
||||||
|
- Infrastructure ThreeFold pour IA privée
|
||||||
|
- Modèles LLM open source
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4.2 Visualisation avancée : Web of Trust (3 mois)
|
||||||
|
|
||||||
|
**Mentionné dans stratégie :**
|
||||||
|
- Cytoscape.js déjà intégré
|
||||||
|
- Web of Trust visualisé dans roadmap
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Intégrer données Duniter/Ğ1 (si API disponible)
|
||||||
|
- [ ] Graphe de confiance interactif
|
||||||
|
- [ ] Analyse de clusters
|
||||||
|
- [ ] Export pour analyses externes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4.3 API REST complète (2 mois)
|
||||||
|
|
||||||
|
**Évolution naturelle :**
|
||||||
|
- Passer d'app statique à hybride
|
||||||
|
- Exposer données via API
|
||||||
|
|
||||||
|
**Actions :**
|
||||||
|
- [ ] Backend Node.js/Express ou Rust
|
||||||
|
- [ ] Endpoints REST pour données radar/équipe
|
||||||
|
- [ ] GraphQL optionnel
|
||||||
|
- [ ] Documentation OpenAPI/Swagger
|
||||||
|
- [ ] Rate limiting et authentification
|
||||||
|
|
||||||
|
**Architecture proposée :**
|
||||||
|
```
|
||||||
|
Frontend (Next.js) ←→ API REST ←→ Base de données
|
||||||
|
↓
|
||||||
|
Scripts generation
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dépendances techniques
|
||||||
|
|
||||||
|
### Bibliothèques externes actuelles
|
||||||
|
|
||||||
|
| Bibliothèque | Usage | Version | Maintenance |
|
||||||
|
|--------------|-------|---------|-------------|
|
||||||
|
| Cytoscape.js | Graphe réseau équipe | 3.26.0 (CDN) | ✅ Active |
|
||||||
|
| ECharts | Matrice congestion | 5.4.3 (CDN) | ✅ Active |
|
||||||
|
| Next.js | Framework principal | 14.2.4 | ✅ Active |
|
||||||
|
| aoe_technology_radar | Base du radar | 4.4.0 | ✅ Active |
|
||||||
|
|
||||||
|
### Opportunités de migration
|
||||||
|
|
||||||
|
- [ ] **Cytoscape** : Considérer migration vers version locale (npm) pour meilleur contrôle
|
||||||
|
- [ ] **ECharts** : Déjà bien intégré, pas de migration nécessaire
|
||||||
|
- [ ] **Next.js** : Évaluer migration vers App Router (v13+) pour meilleures perfs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Métriques et KPIs techniques
|
||||||
|
|
||||||
|
### Métriques à suivre (basées sur code actuel)
|
||||||
|
|
||||||
|
| Métrique | Cible | Mesure actuelle |
|
||||||
|
|----------|-------|-----------------|
|
||||||
|
| Temps de build | < 2 min | ~35-40s (OK) |
|
||||||
|
| Taille bundle JS | < 200 KB | ~100 KB (OK) |
|
||||||
|
| Temps chargement page team | < 2s | ~1-2s (OK) |
|
||||||
|
| Couverture tests | > 80% | 0% (⚠️ À ajouter) |
|
||||||
|
| Nombre de scripts | 9 | 9 scripts (OK) |
|
||||||
|
|
||||||
|
### Actions pour améliorer métriques
|
||||||
|
|
||||||
|
- [ ] Ajouter tests unitaires (Jest/Vitest)
|
||||||
|
- [ ] Tests E2E pour visualisations (Playwright)
|
||||||
|
- [ ] Monitoring performances (Web Vitals)
|
||||||
|
- [ ] Analyse de bundle (webpack-bundle-analyzer)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Fichiers critiques à maintenir
|
||||||
|
|
||||||
|
### Scripts de génération (priorité haute)
|
||||||
|
|
||||||
|
1. **`scripts/generate-team-visualization-data.js`**
|
||||||
|
- Génère toutes les données de visualisation
|
||||||
|
- Dépendance : Structure YAML des profils
|
||||||
|
- Risque : Changements de format cassent la génération
|
||||||
|
|
||||||
|
2. **`scripts/analyze-business-metrics.js`**
|
||||||
|
- Génère rapports stratégiques
|
||||||
|
- Dépendance : Format des blips radar-business
|
||||||
|
|
||||||
|
3. **`public/team-block-script.js`**
|
||||||
|
- Logique principale page équipe
|
||||||
|
- Complexité élevée (500+ lignes)
|
||||||
|
- Risque : Bugs navigation SPA
|
||||||
|
|
||||||
|
### Scripts d'infrastructure
|
||||||
|
|
||||||
|
- `docker-compose.business.yml` : Configuration déploiement
|
||||||
|
- `Dockerfile.business` : Build containerisé
|
||||||
|
- `.gitlab-ci.yml` : CI/CD (si configuré)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Points d'attention identifiés dans le code
|
||||||
|
|
||||||
|
### 1. Parsing YAML manuel (risque élevé)
|
||||||
|
|
||||||
|
**Fichier :** `scripts/generate-team-visualization-data.js`
|
||||||
|
**Lignes :** 12-96
|
||||||
|
**Problème :** Regex fragiles, peuvent échouer sur formats non standards
|
||||||
|
|
||||||
|
**Solution recommandée :** Intégrer `js-yaml` ou `gray-matter` (déjà en dépendance)
|
||||||
|
|
||||||
|
### 2. Protection mot de passe en clair
|
||||||
|
|
||||||
|
**Fichier :** `public/strategie-script.js`
|
||||||
|
**Ligne :** 101
|
||||||
|
**Problème :** Mot de passe hardcodé dans code client
|
||||||
|
|
||||||
|
**Solution recommandée :** Hash côté serveur ou authentification OAuth
|
||||||
|
|
||||||
|
### 3. Gestion navigation SPA complexe
|
||||||
|
|
||||||
|
**Fichier :** `public/team-block-script.js`
|
||||||
|
**Lignes :** 342-350
|
||||||
|
**Problème :** MutationObserver peut avoir des latences
|
||||||
|
|
||||||
|
**Solution recommandée :** Utiliser router Next.js ou événements natifs plus fiables
|
||||||
|
|
||||||
|
### 4. Pas de gestion d'erreurs robuste
|
||||||
|
|
||||||
|
**Fichiers :** Tous les scripts
|
||||||
|
**Problème :** Try/catch basiques, pas de logging structuré
|
||||||
|
|
||||||
|
**Solution recommandée :** Intégrer logger (Winston, Pino) et gestion d'erreurs centralisée
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Évolution architecture proposée
|
||||||
|
|
||||||
|
### Étape 1 : Amélioration progressive (0-6 mois)
|
||||||
|
```
|
||||||
|
Application Statique
|
||||||
|
↓
|
||||||
|
+ Validation données
|
||||||
|
+ Tests automatiques
|
||||||
|
+ Monitoring
|
||||||
|
```
|
||||||
|
|
||||||
|
### Étape 2 : Hybridation (6-12 mois)
|
||||||
|
```
|
||||||
|
Application Statique
|
||||||
|
↓
|
||||||
|
+ API REST simple (Node.js)
|
||||||
|
+ NetlifyCMS pour édition
|
||||||
|
+ Webhooks CI/CD
|
||||||
|
```
|
||||||
|
|
||||||
|
### Étape 3 : Plateforme complète (12+ mois)
|
||||||
|
```
|
||||||
|
Frontend (Next.js)
|
||||||
|
↓
|
||||||
|
API Gateway (Rust/Node)
|
||||||
|
↓
|
||||||
|
Services: Data | Analytics | IA
|
||||||
|
↓
|
||||||
|
ThreeFold Infrastructure
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Plan d'action immédiat (prochaines 4 semaines)
|
||||||
|
|
||||||
|
### Semaine 1-2 : Consolidation
|
||||||
|
- [ ] Migrer parsing YAML vers librairie
|
||||||
|
- [ ] Ajouter validation JSON Schema
|
||||||
|
- [ ] Créer script de tests basiques
|
||||||
|
|
||||||
|
### Semaine 3-4 : Amélioration UX
|
||||||
|
- [ ] Recherche dans profils
|
||||||
|
- [ ] Filtres dans visualisations
|
||||||
|
- [ ] Optimisation performances
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estimation des efforts
|
||||||
|
|
||||||
|
| Priorité | Épics | Effort estimé | Complexité |
|
||||||
|
|----------|-------|---------------|------------|
|
||||||
|
| P1 | Consolidation | 4-6 semaines | Moyenne |
|
||||||
|
| P2 | Fonctionnalités métier | 8-12 semaines | Élevée |
|
||||||
|
| P3 | UX/UI | 6-9 semaines | Moyenne |
|
||||||
|
| P4 | Innovation | 12-16 semaines | Très élevée |
|
||||||
|
|
||||||
|
**Total estimé :** 30-43 semaines (~7-10 mois de développement)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Conclusion
|
||||||
|
|
||||||
|
La roadmap est basée sur l'analyse du code source existant et identifie des améliorations réalistes et prioritaires. Les fonctionnalités core sont solides, mais il existe des opportunités d'amélioration significatives dans :
|
||||||
|
|
||||||
|
1. **Robustesse** : Validation, tests, gestion d'erreurs
|
||||||
|
2. **Fonctionnalités** : Édition, export/import, analytics
|
||||||
|
3. **UX** : Recherche, filtres, accessibilité
|
||||||
|
4. **Innovation** : IA, visualisations avancées, API
|
||||||
|
|
||||||
|
L'architecture actuelle permet une évolution progressive sans refonte majeure.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Document généré le 2025-12-09*
|
||||||
|
*Prochaine révision recommandée : Après implémentation P1*
|
||||||
|
|
||||||
303
docs/app/troubleshooting.md
Normal file
303
docs/app/troubleshooting.md
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
# Guide de dépannage
|
||||||
|
|
||||||
|
## Problèmes courants et solutions
|
||||||
|
|
||||||
|
### Navigation et liens
|
||||||
|
|
||||||
|
#### Doublons de liens dans la navigation
|
||||||
|
|
||||||
|
**Symptôme** : Plusieurs liens "Équipe" ou autres liens apparaissent en double dans le header.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le script Python a ajouté le lien plusieurs fois
|
||||||
|
- Les scripts JavaScript ajoutent encore des liens (fonctions non désactivées)
|
||||||
|
- Le fichier Navigation.tsx contient déjà des liens dupliqués
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Vérifier que les fonctions JavaScript sont bien désactivées :
|
||||||
|
- `public/strategie-script.js` : `addLinksToHeader()` doit être commentée
|
||||||
|
- `public/strategie-link.js` : `addStrategyLinkToHeader()` doit être commentée
|
||||||
|
2. Rebuild l'image Docker avec `--no-cache` pour forcer l'exécution du script Python de nettoyage
|
||||||
|
3. Vérifier dans les logs Docker que le script Python a bien supprimé les doublons
|
||||||
|
|
||||||
|
**Vérification** :
|
||||||
|
```bash
|
||||||
|
# Dans le conteneur
|
||||||
|
grep -c 'href="/team"' .techradar/src/components/Navigation/Navigation.tsx
|
||||||
|
# Doit retourner 1 (un seul lien)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Lien "Équipe" n'apparaît pas
|
||||||
|
|
||||||
|
**Symptôme** : Le lien "👥 Équipe" n'est pas visible dans la navigation.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le script Python n'a pas été exécuté
|
||||||
|
- Le fichier Navigation.tsx n'a pas été trouvé
|
||||||
|
- Erreur dans le script Python
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Vérifier les logs Docker lors du build pour voir si le script Python s'est exécuté
|
||||||
|
2. Vérifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe
|
||||||
|
3. Vérifier que le script Python a bien trouvé l'emplacement pour insérer le lien
|
||||||
|
4. Rebuild avec `--no-cache` pour forcer l'exécution
|
||||||
|
|
||||||
|
**Vérification** :
|
||||||
|
```bash
|
||||||
|
# Dans le conteneur
|
||||||
|
grep 'href="/team"' .techradar/src/components/Navigation/Navigation.tsx
|
||||||
|
# Doit retourner le lien
|
||||||
|
```
|
||||||
|
|
||||||
|
### Données du radar
|
||||||
|
|
||||||
|
#### Seulement 2 blips affichés (Ansible et OpenTofu)
|
||||||
|
|
||||||
|
**Symptôme** : Le radar n'affiche que quelques blips au lieu de tous.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Les blips utilisent des rings non définis dans la config (core, strategic, support au lieu de adopt, trial, assess, hold)
|
||||||
|
- Les données business n'ont pas été copiées correctement
|
||||||
|
- La config business n'est pas utilisée
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Vérifier que tous les blips utilisent les rings standards : `adopt`, `trial`, `assess`, `hold`
|
||||||
|
2. Vérifier que `radar-business/config-business.json` contient bien les rings standards
|
||||||
|
3. Vérifier dans les logs Docker que les données ont été copiées :
|
||||||
|
```bash
|
||||||
|
# Dans le conteneur
|
||||||
|
find .techradar/data/radar -name "*.md" | wc -l
|
||||||
|
# Doit retourner ~38 fichiers
|
||||||
|
```
|
||||||
|
4. Vérifier que `config-business.json` a été copié vers `.techradar/data/config.json`
|
||||||
|
|
||||||
|
**Migration des rings** :
|
||||||
|
```bash
|
||||||
|
# Migrer tous les blips vers les rings standards
|
||||||
|
cd radar-business/2025-01-15
|
||||||
|
find . -name "*.md" -exec sed -i 's/^ring: core$/ring: adopt/' {} \;
|
||||||
|
find . -name "*.md" -exec sed -i 's/^ring: strategic$/ring: assess/' {} \;
|
||||||
|
find . -name "*.md" -exec sed -i 's/^ring: support$/ring: adopt/' {} \;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Erreur "invalid ring"
|
||||||
|
|
||||||
|
**Symptôme** : Des erreurs "invalid ring" apparaissent dans les logs.
|
||||||
|
|
||||||
|
**Cause** : Les blips utilisent des rings qui ne sont pas définis dans la configuration.
|
||||||
|
|
||||||
|
**Solution** : Vérifier que tous les rings utilisés dans les blips sont bien définis dans `config-business.json`.
|
||||||
|
|
||||||
|
### Page Equipe
|
||||||
|
|
||||||
|
#### Page `/team` affiche le radar au lieu des visualisations
|
||||||
|
|
||||||
|
**Symptome** : La page `/team` affiche le contenu du radar au lieu des visualisations equipe.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le script `team-block-script.js` n'est pas charge
|
||||||
|
- Le script `patch_document.py` n'a pas modifie `_document.tsx`
|
||||||
|
- Le script n'a pas pu remplacer le DOM
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Verifier la console du navigateur (F12) pour les erreurs JavaScript
|
||||||
|
2. Verifier que le script `team-block-script.js` est inclus dans le HTML :
|
||||||
|
```bash
|
||||||
|
curl -s http://localhost:3006/team/ | grep team-block-script
|
||||||
|
```
|
||||||
|
3. Rebuild avec `--no-cache` pour forcer l'execution des scripts Python
|
||||||
|
|
||||||
|
**Verification** :
|
||||||
|
```bash
|
||||||
|
# Dans le conteneur
|
||||||
|
ls -l .techradar/public/team-block-script.js
|
||||||
|
grep "team-block-script" .techradar/src/pages/_document.tsx
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Page `/team` retourne 404
|
||||||
|
|
||||||
|
**Symptome** : La page `/team` n'est pas accessible ou retourne une erreur 404.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- La page Next.js `team.tsx` n'a pas ete creee
|
||||||
|
- Le serveur utilise `--single` qui redirige vers index.html
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Verifier que le Dockerfile a bien cree `.techradar/src/pages/team.tsx`
|
||||||
|
2. Verifier que `scripts/start-business.sh` ne contient pas l'option `--single`
|
||||||
|
3. Verifier les logs du build Docker
|
||||||
|
|
||||||
|
**Verification** :
|
||||||
|
```bash
|
||||||
|
# Dans le conteneur
|
||||||
|
ls -l .techradar/src/pages/team.tsx
|
||||||
|
ls -l out/team/index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Donnees de visualisation manquantes ou erreur de chargement
|
||||||
|
|
||||||
|
**Symptome** : Les visualisations de la page equipe sont vides ou affichent une erreur.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le fichier `team-visualization-data.json` n'a pas ete genere
|
||||||
|
- Le fichier n'est pas accessible depuis le navigateur
|
||||||
|
- Erreur dans le chargement des bibliotheques (Cytoscape, ECharts)
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Generer les donnees :
|
||||||
|
```bash
|
||||||
|
node scripts/generate-team-visualization-data.js
|
||||||
|
```
|
||||||
|
2. Verifier que le fichier existe dans `public/team-visualization-data.json`
|
||||||
|
3. Verifier l'acces direct : `http://localhost:3006/team-visualization-data.json`
|
||||||
|
4. Verifier la console du navigateur pour les erreurs JavaScript
|
||||||
|
5. Verifier la connexion internet (les bibliotheques sont chargees depuis CDN)
|
||||||
|
|
||||||
|
### Build Docker
|
||||||
|
|
||||||
|
#### Erreur "dockerfile parse error"
|
||||||
|
|
||||||
|
**Symptôme** : Erreur de syntaxe dans le Dockerfile.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Commandes shell mal formatées dans les instructions RUN
|
||||||
|
- Variables mal échappées
|
||||||
|
- Heredocs mal fermés
|
||||||
|
|
||||||
|
**Solution** : Vérifier la syntaxe du Dockerfile, notamment :
|
||||||
|
- Les instructions RUN doivent être sur une seule ligne ou utiliser `\` pour continuer
|
||||||
|
- Les heredocs doivent être correctement fermés
|
||||||
|
- Les variables shell doivent être échappées avec `$$`
|
||||||
|
|
||||||
|
#### Build utilise le cache alors que les fichiers ont changé
|
||||||
|
|
||||||
|
**Symptôme** : Les modifications ne sont pas prises en compte après un rebuild.
|
||||||
|
|
||||||
|
**Cause** : Docker utilise le cache des couches précédentes.
|
||||||
|
|
||||||
|
**Solution** : Rebuild avec `--no-cache` :
|
||||||
|
```bash
|
||||||
|
docker build --no-cache -f Dockerfile.business -t laplank-techradar-radar-business .
|
||||||
|
```
|
||||||
|
|
||||||
|
Dans Portainer, cocher l'option "No cache" lors du rebuild de la stack.
|
||||||
|
|
||||||
|
#### Script Python échoue avec exit code 2
|
||||||
|
|
||||||
|
**Symptôme** : Le script Python pour modifier Navigation.tsx échoue.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Le fichier Navigation.tsx n'existe pas encore
|
||||||
|
- Problème de fin de ligne
|
||||||
|
- Erreur de syntaxe Python
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Vérifier que le fichier existe avant d'exécuter le script
|
||||||
|
2. Vérifier les logs pour voir l'erreur exacte
|
||||||
|
3. Le script devrait afficher des messages de débogage
|
||||||
|
|
||||||
|
### Déploiement
|
||||||
|
|
||||||
|
#### Les modifications ne sont pas visibles après déploiement
|
||||||
|
|
||||||
|
**Symptôme** : Après un déploiement, les changements ne sont pas visibles.
|
||||||
|
|
||||||
|
**Causes possibles** :
|
||||||
|
- Cache du navigateur
|
||||||
|
- Cache Docker
|
||||||
|
- Fichiers non copiés correctement
|
||||||
|
|
||||||
|
**Solutions** :
|
||||||
|
1. Vider le cache du navigateur (Ctrl+Shift+R ou Cmd+Shift+R)
|
||||||
|
2. Rebuild Docker avec `--no-cache`
|
||||||
|
3. Vérifier les logs pour confirmer que les fichiers ont été copiés
|
||||||
|
|
||||||
|
#### Erreur de permissions dans le conteneur
|
||||||
|
|
||||||
|
**Symptôme** : Erreurs de permissions lors de l'exécution.
|
||||||
|
|
||||||
|
**Cause** : Problème de permissions sur les fichiers ou répertoires.
|
||||||
|
|
||||||
|
**Solution** : Vérifier les permissions dans le Dockerfile et s'assurer que les fichiers sont accessibles.
|
||||||
|
|
||||||
|
### Scripts
|
||||||
|
|
||||||
|
#### Script generate-team-visualization-data.js ne trouve pas les fichiers
|
||||||
|
|
||||||
|
**Symptôme** : Le script ne peut pas lire les fichiers de profils ou de technologies.
|
||||||
|
|
||||||
|
**Cause** : Chemins incorrects ou fichiers manquants.
|
||||||
|
|
||||||
|
**Solution** :
|
||||||
|
1. Vérifier que les fichiers existent :
|
||||||
|
- `docs/data/team/*.md`
|
||||||
|
- `radar-business/2025-01-15/*.md`
|
||||||
|
2. Exécuter le script depuis la racine du projet
|
||||||
|
3. Vérifier les chemins dans le script
|
||||||
|
|
||||||
|
## Commandes utiles pour le débogage
|
||||||
|
|
||||||
|
### Verifier les fichiers dans le conteneur
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Se connecter au conteneur
|
||||||
|
docker exec -it <container-name> /bin/sh
|
||||||
|
|
||||||
|
# Verifier les fichiers de la page equipe
|
||||||
|
ls -la .techradar/src/pages/team.tsx
|
||||||
|
ls -la .techradar/public/team-block-script.js
|
||||||
|
ls -la out/team-block-script.js
|
||||||
|
ls -la out/team-visualization-data.json
|
||||||
|
|
||||||
|
# Verifier les modifications
|
||||||
|
grep "team-block-script" .techradar/src/pages/_document.tsx
|
||||||
|
ls -la .techradar/src/components/Navigation/Navigation.tsx
|
||||||
|
|
||||||
|
# Compter les blips
|
||||||
|
find .techradar/data/radar -name "*.md" | wc -l
|
||||||
|
|
||||||
|
# Verifier la config
|
||||||
|
head -60 .techradar/data/config.json
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vérifier les logs
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Logs du conteneur
|
||||||
|
docker logs <container-name>
|
||||||
|
|
||||||
|
# Logs en temps réel
|
||||||
|
docker logs -f <container-name>
|
||||||
|
|
||||||
|
# Dernières lignes
|
||||||
|
docker logs --tail=100 <container-name>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vérifier les rings dans les blips
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Lister tous les rings utilisés
|
||||||
|
cd radar-business/2025-01-15
|
||||||
|
grep -h "^ring:" *.md | sort | uniq -c
|
||||||
|
|
||||||
|
# Doit retourner uniquement : adopt, trial, assess, hold
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vérifier les liens dans Navigation.tsx
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Compter les liens Équipe
|
||||||
|
grep -c 'href="/team"' .techradar/src/components/Navigation/Navigation.tsx
|
||||||
|
|
||||||
|
# Voir le contexte autour du lien
|
||||||
|
grep -A 3 -B 3 'href="/team"' .techradar/src/components/Navigation/Navigation.tsx
|
||||||
|
```
|
||||||
|
|
||||||
|
## Obtenir de l'aide
|
||||||
|
|
||||||
|
Si le problème persiste :
|
||||||
|
1. Vérifier les logs Docker complets
|
||||||
|
2. Vérifier la documentation dans `docs/app/`
|
||||||
|
3. Vérifier les issues sur le dépôt Git
|
||||||
|
4. Contacter l'équipe technique
|
||||||
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
# Architecture du projet
|
|
||||||
|
|
||||||
## Vue d'ensemble
|
|
||||||
|
|
||||||
Le projet AJR Technology Radar est une application web statique construite avec le framework `aoe_technology_radar`. L'application génère un site web interactif à partir de fichiers Markdown organisés par dates de release.
|
|
||||||
|
|
||||||
## Structure des répertoires
|
|
||||||
|
|
||||||
```
|
|
||||||
TechradarDev/
|
|
||||||
├── radar/ # Contenu du radar principal organisé par dates
|
|
||||||
│ ├── 2017-03-01/ # Release de mars 2017
|
|
||||||
│ ├── 2018-03-01/ # Release de mars 2018
|
|
||||||
│ ├── 2019-11-01/ # Release de novembre 2019
|
|
||||||
│ ├── 2021-07-01/ # Release de juillet 2021
|
|
||||||
│ ├── 2022-03-28/ # Release de mars 2022
|
|
||||||
│ ├── 2023-02-23/ # Release de février 2023
|
|
||||||
│ ├── 2023-11-01/ # Release de novembre 2023
|
|
||||||
│ ├── 2024-07-10/ # Release de juillet 2024
|
|
||||||
│ └── 2025-04-10/ # Release d'avril 2025 (actuelle)
|
|
||||||
├── radar-business/ # Contenu du radar business
|
|
||||||
│ ├── 2025-01-15/ # Release business de janvier 2025
|
|
||||||
│ ├── config-business.json # Configuration du radar business
|
|
||||||
│ ├── FORMAT-BLIP.md # Format des blips business
|
|
||||||
│ └── README.md # Documentation du radar business
|
|
||||||
├── public/ # Fichiers statiques publics
|
|
||||||
│ ├── images/ # Images utilisées dans les descriptions
|
|
||||||
│ ├── logo.svg # Logo AJR
|
|
||||||
│ ├── favicon.ico # Icône du site
|
|
||||||
│ ├── robots.txt # Configuration pour les robots
|
|
||||||
│ └── strategie-script.js # Script pour les pages de stratégie dynamiques
|
|
||||||
├── scripts/ # Scripts utilitaires
|
|
||||||
│ ├── serve-business.sh # Script pour servir le radar business en local
|
|
||||||
│ ├── start-business.sh # Script de démarrage pour Docker
|
|
||||||
│ ├── extract-technologies.js # Extraction des technologies depuis la doc
|
|
||||||
│ └── analyze-business-metrics.js # Analyse des métriques business
|
|
||||||
├── docker/ # Configuration Docker pour le déploiement
|
|
||||||
│ ├── Dockerfile # Image Docker de production
|
|
||||||
│ ├── docker-compose.yml # Configuration Docker Compose
|
|
||||||
│ ├── docker-compose.labels.yml # Labels pour le déploiement
|
|
||||||
│ └── docker-compose.local.yml # Configuration locale
|
|
||||||
├── docs/ # Documentation du projet
|
|
||||||
├── config.json # Configuration principale du radar
|
|
||||||
├── config.json.backup # Backup de la config (généré par serve-business.sh)
|
|
||||||
├── custom.css # Styles personnalisés
|
|
||||||
├── about.md # Page "À propos" du radar
|
|
||||||
├── package.json # Dépendances Node.js
|
|
||||||
├── Dockerfile # Dockerfile alternatif (racine)
|
|
||||||
├── Dockerfile.business # Dockerfile pour le radar business
|
|
||||||
├── docker-compose.yml # Docker Compose alternatif (racine)
|
|
||||||
├── docker-compose.business.yml # Docker Compose pour le radar business
|
|
||||||
├── docker-entrypoint.sh # Script d'entrée Docker
|
|
||||||
└── .drone.yml # Configuration CI/CD Drone
|
|
||||||
```
|
|
||||||
|
|
||||||
## Format des fichiers radar
|
|
||||||
|
|
||||||
Chaque technologie (blip) est définie dans un fichier Markdown avec un en-tête YAML front matter :
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
---
|
|
||||||
title: "Nom de la technologie"
|
|
||||||
ring: adopt|trial|assess|hold
|
|
||||||
quadrant: languages-and-frameworks|methods-and-patterns|platforms-and-aoe-services|tools
|
|
||||||
tags: [tag1, tag2]
|
|
||||||
---
|
|
||||||
|
|
||||||
Description de la technologie en Markdown.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Métadonnées
|
|
||||||
|
|
||||||
- **title** : Nom de la technologie
|
|
||||||
- **ring** : Anneau du radar (adopt, trial, assess, hold)
|
|
||||||
- **quadrant** : Quadrant du radar
|
|
||||||
- **tags** : Tags pour le filtrage (optionnel)
|
|
||||||
|
|
||||||
## Flux de traitement
|
|
||||||
|
|
||||||
1. **Lecture des fichiers** : Le framework lit tous les fichiers `.md` dans les dossiers `radar/`
|
|
||||||
2. **Parsing** : Extraction des métadonnées YAML et du contenu Markdown
|
|
||||||
3. **Génération** : Création d'une application React statique
|
|
||||||
4. **Build** : Compilation en fichiers HTML/CSS/JS statiques
|
|
||||||
5. **Serve** : Service via un serveur web statique
|
|
||||||
|
|
||||||
## Dépendances principales
|
|
||||||
|
|
||||||
- **aoe_technology_radar** : Framework principal (dépendance GitHub)
|
|
||||||
- **Node.js** : Runtime JavaScript (version 20+)
|
|
||||||
- **npm** : Gestionnaire de paquets
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
La configuration principale se trouve dans `config.json` et définit :
|
|
||||||
- Les quadrants et leurs descriptions
|
|
||||||
- Les anneaux (rings) et leurs significations
|
|
||||||
- Les couleurs et le style
|
|
||||||
- Les options d'affichage
|
|
||||||
- Les métadonnées du site
|
|
||||||
|
|
||||||
Voir [configuration.md](./configuration.md) pour plus de détails.
|
|
||||||
|
|
||||||
## Radar Business
|
|
||||||
|
|
||||||
Le Radar Business est une variante du radar principal avec :
|
|
||||||
|
|
||||||
- **Configuration spécifique** : `radar-business/config-business.json`
|
|
||||||
- **Quadrants business** : Technologies Différenciantes, Commodité, Risque, Émergentes
|
|
||||||
- **Anneaux stratégiques** : Core, Strategic, Support, Legacy
|
|
||||||
- **Pages de stratégie** : Pages dynamiques générées via `public/strategie-script.js`
|
|
||||||
- **Protection par mot de passe** : Authentification client-side (mot de passe : `laplank-radar`)
|
|
||||||
- **Base path** : `/` (racine, pas de sous-chemin)
|
|
||||||
|
|
||||||
### Scripts de stratégie
|
|
||||||
|
|
||||||
Le fichier `public/strategie-script.js` contient :
|
|
||||||
- La logique de protection par mot de passe
|
|
||||||
- La conversion Markdown vers HTML pour les pages de stratégie
|
|
||||||
- La gestion de la navigation dans le header
|
|
||||||
- Le contenu des trois pages de stratégie :
|
|
||||||
- Stratégie d'Évolution Technique
|
|
||||||
- Stratégie Business
|
|
||||||
- Opportunités DataViz Expert
|
|
||||||
|
|
||||||
## Build et déploiement
|
|
||||||
|
|
||||||
Le projet utilise plusieurs commandes :
|
|
||||||
- `npm run build` : Génère les fichiers statiques du radar principal
|
|
||||||
- `npm run serve` : Lance un serveur de développement du radar principal (port 3000)
|
|
||||||
- `npm run serve-business` : Lance un serveur de développement du radar business (port 3004)
|
|
||||||
|
|
||||||
Le déploiement se fait via Docker avec plusieurs configurations selon l'environnement :
|
|
||||||
- **Radar principal** : Via `docker/Dockerfile` ou `Dockerfile`
|
|
||||||
- **Radar business** : Via `Dockerfile.business` et `docker-compose.business.yml` (Portainer)
|
|
||||||
|
|
||||||
Voir [deploiement.md](./deploiement.md) pour plus de détails.
|
|
||||||
|
|
||||||
@@ -1,196 +0,0 @@
|
|||||||
# Configuration
|
|
||||||
|
|
||||||
## Fichier config.json
|
|
||||||
|
|
||||||
Le fichier `config.json` contient toute la configuration du radar. Il définit l'apparence, le comportement et la structure du radar.
|
|
||||||
|
|
||||||
## Structure de configuration
|
|
||||||
|
|
||||||
### Paramètres de base
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"basePath": "",
|
|
||||||
"baseUrl": "",
|
|
||||||
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar/{release}/{id}.md",
|
|
||||||
"logoFile": "logo.svg",
|
|
||||||
"jsFile": "strategie-script.js"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- **basePath** : Chemin de base pour l'application (vide `""` pour servir à la racine `/`)
|
|
||||||
- **baseUrl** : URL de base du site
|
|
||||||
- **editUrl** : Template d'URL pour éditer les fichiers (utilise {release} et {id})
|
|
||||||
- **logoFile** : Nom du fichier logo dans `public/`
|
|
||||||
- **jsFile** : Fichier JavaScript personnalisé à charger (optionnel, utilisé pour le radar business)
|
|
||||||
|
|
||||||
### Options d'affichage (toggles)
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"toggles": {
|
|
||||||
"showChart": true,
|
|
||||||
"showTagFilter": true,
|
|
||||||
"showQuadrantList": true,
|
|
||||||
"showEmptyRings": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- **showChart** : Affiche le graphique radar interactif
|
|
||||||
- **showTagFilter** : Active le filtre par tags
|
|
||||||
- **showQuadrantList** : Affiche la liste des quadrants
|
|
||||||
- **showEmptyRings** : Affiche les anneaux vides
|
|
||||||
|
|
||||||
### Sections
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"sections": ["radar", "tags", "list"]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Définit l'ordre des sections dans l'interface.
|
|
||||||
|
|
||||||
### Couleurs
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"colors": {
|
|
||||||
"foreground": "#fff",
|
|
||||||
"background": "#173d7a",
|
|
||||||
"highlight": "#029df7",
|
|
||||||
"content": "#fff",
|
|
||||||
"text": "#575757",
|
|
||||||
"link": "#029df7",
|
|
||||||
"border": "rgba(255, 255, 255, 0.1)",
|
|
||||||
"tag": "rgba(255, 255, 255, 0.1)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Personnalisation des couleurs de l'interface.
|
|
||||||
|
|
||||||
### Quadrants
|
|
||||||
|
|
||||||
Les quadrants définissent les quatre catégories principales :
|
|
||||||
|
|
||||||
1. **Languages & Frameworks** : Langages et frameworks de développement
|
|
||||||
2. **Methods & Patterns** : Méthodes et patterns de développement
|
|
||||||
3. **Platforms & Operations** : Plateformes et opérations
|
|
||||||
4. **Tools** : Outils de développement
|
|
||||||
|
|
||||||
Chaque quadrant a :
|
|
||||||
- **id** : Identifiant unique
|
|
||||||
- **title** : Titre affiché
|
|
||||||
- **description** : Description du quadrant
|
|
||||||
- **color** : Couleur associée
|
|
||||||
|
|
||||||
### Anneaux (Rings)
|
|
||||||
|
|
||||||
Les anneaux classifient les technologies selon leur niveau d'adoption :
|
|
||||||
|
|
||||||
1. **Adopt** : Recommandé, utilisé avec succès
|
|
||||||
2. **Trial** : À essayer, prometteur
|
|
||||||
3. **Assess** : À évaluer, à surveiller
|
|
||||||
4. **Hold** : À éviter, à remplacer
|
|
||||||
|
|
||||||
Chaque anneau a :
|
|
||||||
- **id** : Identifiant unique
|
|
||||||
- **title** : Titre affiché
|
|
||||||
- **description** : Description de l'anneau
|
|
||||||
- **color** : Couleur associée
|
|
||||||
- **radius** : Rayon dans le graphique (0-1)
|
|
||||||
- **strokeWidth** : Épaisseur du trait
|
|
||||||
|
|
||||||
### Flags (Drapeaux)
|
|
||||||
|
|
||||||
Les flags marquent les changements entre versions :
|
|
||||||
|
|
||||||
- **new** : Nouveau dans cette version
|
|
||||||
- **changed** : Modifié récemment
|
|
||||||
- **default** : Inchangé
|
|
||||||
|
|
||||||
### Graphique
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"chart": {
|
|
||||||
"size": 800,
|
|
||||||
"blipSize": 12
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- **size** : Taille du graphique en pixels
|
|
||||||
- **blipSize** : Taille des points (blips) sur le graphique
|
|
||||||
|
|
||||||
### Labels (Textes)
|
|
||||||
|
|
||||||
Les labels permettent de personnaliser tous les textes de l'interface, notamment :
|
|
||||||
- Titre du site
|
|
||||||
- Textes des pages
|
|
||||||
- Messages d'erreur
|
|
||||||
- Placeholders
|
|
||||||
- Footer
|
|
||||||
|
|
||||||
## Personnalisation
|
|
||||||
|
|
||||||
### Modifier les couleurs
|
|
||||||
|
|
||||||
Éditez la section `colors` dans `config.json` avec les codes hexadécimaux souhaités.
|
|
||||||
|
|
||||||
### Ajouter un quadrant
|
|
||||||
|
|
||||||
Ajoutez un nouvel objet dans le tableau `quadrants` avec les propriétés requises.
|
|
||||||
|
|
||||||
### Modifier les descriptions
|
|
||||||
|
|
||||||
Les descriptions des quadrants et anneaux peuvent être modifiées directement dans `config.json`.
|
|
||||||
|
|
||||||
### Styles personnalisés
|
|
||||||
|
|
||||||
Le fichier `custom.css` permet d'ajouter des styles CSS personnalisés qui seront appliqués à l'application.
|
|
||||||
|
|
||||||
## Configuration du Radar Business
|
|
||||||
|
|
||||||
Le Radar Business utilise une configuration spécifique dans `radar-business/config-business.json` :
|
|
||||||
|
|
||||||
### Différences principales
|
|
||||||
|
|
||||||
- **basePath** : `""` (vide) pour servir à la racine
|
|
||||||
- **jsFile** : `"strategie-script.js"` pour charger le script de stratégie
|
|
||||||
- **Quadrants business** : Technologies Différenciantes, Commodité, Risque, Émergentes
|
|
||||||
- **Anneaux stratégiques** : Core, Strategic, Support, Legacy
|
|
||||||
- **Couleurs** : Thème vert (`#1a4d3a` pour le background, `#2ecc71` pour les accents)
|
|
||||||
|
|
||||||
### Script de stratégie
|
|
||||||
|
|
||||||
Le fichier `public/strategie-script.js` est chargé automatiquement et fournit :
|
|
||||||
- Protection par mot de passe (authentification client-side)
|
|
||||||
- Pages de stratégie dynamiques (Markdown converti en HTML)
|
|
||||||
- Navigation dans le header
|
|
||||||
|
|
||||||
## Variables d'environnement
|
|
||||||
|
|
||||||
En Docker, la variable `BASE_PATH` peut être utilisée pour modifier dynamiquement le `basePath` dans `config.json`. Le script `docker-entrypoint.sh` effectue cette modification au démarrage.
|
|
||||||
|
|
||||||
Pour le Radar Business, le `basePath` est fixé à `""` (vide) dans `config-business.json` pour servir l'application à la racine.
|
|
||||||
|
|
||||||
## Tags disponibles
|
|
||||||
|
|
||||||
Les tags suivants sont établis pour classifier les technologies :
|
|
||||||
|
|
||||||
- architecture
|
|
||||||
- security
|
|
||||||
- devops
|
|
||||||
- frontend
|
|
||||||
- agile
|
|
||||||
- coding
|
|
||||||
- quality assurance
|
|
||||||
- ci/cd
|
|
||||||
- ux/ui
|
|
||||||
- documentation
|
|
||||||
|
|
||||||
Les tags sont utilisés dans les fichiers Markdown des blips et permettent le filtrage dans l'interface.
|
|
||||||
|
|
||||||
@@ -1,200 +0,0 @@
|
|||||||
# Guide de contribution
|
|
||||||
|
|
||||||
## Vue d'ensemble
|
|
||||||
|
|
||||||
Ce guide explique comment contribuer au Technology Radar AJR en ajoutant, modifiant ou supprimant des technologies (blips).
|
|
||||||
|
|
||||||
## Processus de contribution
|
|
||||||
|
|
||||||
### 1. Préparer l'environnement
|
|
||||||
|
|
||||||
Voir le [guide de développement](./developpement.md) pour l'installation et la configuration de l'environnement local.
|
|
||||||
|
|
||||||
### 2. Créer une branche
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git checkout -b feature/nom-de-la-technologie
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Ajouter ou modifier un blip
|
|
||||||
|
|
||||||
#### Ajouter un nouveau blip
|
|
||||||
|
|
||||||
1. Créer un fichier Markdown dans le dossier de release approprié :
|
|
||||||
```
|
|
||||||
radar/2025-04-10/nom-technologie.md
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Utiliser le format standard :
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
---
|
|
||||||
title: "Nom de la technologie"
|
|
||||||
ring: adopt|trial|assess|hold
|
|
||||||
quadrant: languages-and-frameworks|methods-and-patterns|platforms-and-aoe-services|tools
|
|
||||||
tags: [tag1, tag2]
|
|
||||||
---
|
|
||||||
|
|
||||||
Description de la technologie.
|
|
||||||
|
|
||||||
## Avantages
|
|
||||||
|
|
||||||
- Point 1
|
|
||||||
- Point 2
|
|
||||||
|
|
||||||
## Cas d'usage AJR
|
|
||||||
|
|
||||||
Description de l'utilisation chez AJR.
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Modifier un blip existant
|
|
||||||
|
|
||||||
1. Localiser le fichier dans le dossier de release
|
|
||||||
2. Modifier le contenu ou les métadonnées
|
|
||||||
3. Si vous changez le ring ou le quadrant, documenter la raison
|
|
||||||
|
|
||||||
#### Supprimer un blip
|
|
||||||
|
|
||||||
Si une technologie doit être retirée du radar :
|
|
||||||
- La déplacer vers le ring "hold" plutôt que de la supprimer
|
|
||||||
- Ou la supprimer complètement si elle n'est plus pertinente
|
|
||||||
|
|
||||||
### 4. Tester localement
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run serve
|
|
||||||
```
|
|
||||||
|
|
||||||
Vérifier :
|
|
||||||
- L'affichage correct du blip
|
|
||||||
- Le positionnement dans le bon quadrant et ring
|
|
||||||
- La lisibilité du contenu
|
|
||||||
- Le fonctionnement des tags
|
|
||||||
|
|
||||||
### 5. Commiter les changements
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git add radar/2025-04-10/nom-technologie.md
|
|
||||||
git commit -m "feat: ajouter [technologie] au quadrant [quadrant]"
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. Pousser et créer une pull request
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git push origin feature/nom-de-la-technologie
|
|
||||||
```
|
|
||||||
|
|
||||||
Créer une pull request sur le dépôt Git.
|
|
||||||
|
|
||||||
## Guidelines de contenu
|
|
||||||
|
|
||||||
### Choix du ring
|
|
||||||
|
|
||||||
- **Adopt** : Technologie utilisée avec succès dans plusieurs projets, stable et recommandée
|
|
||||||
- **Trial** : Technologie testée avec succès, à considérer pour de nouveaux projets
|
|
||||||
- **Assess** : Technologie prometteuse, à évaluer selon les besoins
|
|
||||||
- **Hold** : Technologie à éviter ou à remplacer, mais peut être maintenue dans les projets existants
|
|
||||||
|
|
||||||
### Choix du quadrant
|
|
||||||
|
|
||||||
- **Languages & Frameworks** : Langages de programmation et frameworks de développement
|
|
||||||
- **Methods & Patterns** : Méthodologies, patterns architecturaux, pratiques de développement
|
|
||||||
- **Platforms & Operations** : Plateformes cloud, infrastructure, services opérationnels
|
|
||||||
- **Tools** : Outils de développement, utilitaires, logiciels
|
|
||||||
|
|
||||||
### Tags
|
|
||||||
|
|
||||||
Utiliser les tags établis :
|
|
||||||
- architecture
|
|
||||||
- security
|
|
||||||
- devops
|
|
||||||
- frontend
|
|
||||||
- agile
|
|
||||||
- coding
|
|
||||||
- quality assurance
|
|
||||||
- ci/cd
|
|
||||||
- ux/ui
|
|
||||||
- documentation
|
|
||||||
|
|
||||||
Ajouter plusieurs tags si la technologie couvre plusieurs domaines.
|
|
||||||
|
|
||||||
### Qualité du contenu
|
|
||||||
|
|
||||||
- **Clarté** : Description claire et concise
|
|
||||||
- **Pertinence** : Focus sur l'utilisation chez AJR
|
|
||||||
- **Objectivité** : Présenter les avantages et inconvénients
|
|
||||||
- **Concision** : Rester factuel et éviter les détails superflus
|
|
||||||
|
|
||||||
## Format des commits
|
|
||||||
|
|
||||||
Utiliser des messages de commit clairs :
|
|
||||||
|
|
||||||
```
|
|
||||||
feat: ajouter [technologie] au quadrant [quadrant]
|
|
||||||
fix: corriger la description de [technologie]
|
|
||||||
update: déplacer [technologie] de trial à adopt
|
|
||||||
docs: améliorer la documentation de [technologie]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Créer une nouvelle release
|
|
||||||
|
|
||||||
Quand créer une nouvelle release :
|
|
||||||
|
|
||||||
1. **Périodicité** : Généralement tous les 3-6 mois
|
|
||||||
2. **Changements significatifs** : Plusieurs nouveaux blips ou changements majeurs
|
|
||||||
3. **Événements** : Après des évaluations importantes
|
|
||||||
|
|
||||||
### Processus de release
|
|
||||||
|
|
||||||
1. Créer un nouveau dossier avec la date :
|
|
||||||
```bash
|
|
||||||
mkdir radar/2025-07-15
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Copier les blips pertinents depuis la release précédente
|
|
||||||
|
|
||||||
3. Ajouter les nouveaux blips
|
|
||||||
|
|
||||||
4. Mettre à jour les blips existants si nécessaire
|
|
||||||
|
|
||||||
5. Documenter les changements majeurs
|
|
||||||
|
|
||||||
## Review process
|
|
||||||
|
|
||||||
Les contributions sont revues pour :
|
|
||||||
|
|
||||||
- **Exactitude** : Les informations sont correctes
|
|
||||||
- **Pertinence** : La technologie est pertinente pour AJR
|
|
||||||
- **Format** : Le format Markdown est correct
|
|
||||||
- **Classification** : Le ring et quadrant sont appropriés
|
|
||||||
- **Qualité** : Le contenu est clair et utile
|
|
||||||
|
|
||||||
## Questions fréquentes
|
|
||||||
|
|
||||||
### Puis-je ajouter une technologie que je n'ai pas encore utilisée ?
|
|
||||||
|
|
||||||
Non. Le radar ne contient que des technologies testées au moins une fois par l'équipe.
|
|
||||||
|
|
||||||
### Comment décider entre deux quadrants ?
|
|
||||||
|
|
||||||
Choisir le quadrant le plus approprié. Si c'est ambigu, discuter avec l'équipe.
|
|
||||||
|
|
||||||
### Puis-je modifier un blip d'une release précédente ?
|
|
||||||
|
|
||||||
Généralement non. Les releases précédentes sont figées. Créer un nouveau blip dans la release actuelle si nécessaire.
|
|
||||||
|
|
||||||
### Comment gérer les technologies obsolètes ?
|
|
||||||
|
|
||||||
Les déplacer vers le ring "hold" avec une explication de pourquoi elles ne sont plus recommandées.
|
|
||||||
|
|
||||||
## Ressources
|
|
||||||
|
|
||||||
- [Guide de développement](./developpement.md)
|
|
||||||
- [Configuration](./configuration.md)
|
|
||||||
- [Architecture](./architecture.md)
|
|
||||||
- Framework source : https://github.com/AOEpeople/aoe_technology_radar
|
|
||||||
|
|
||||||
## Contact
|
|
||||||
|
|
||||||
Pour toute question sur les contributions, contacter l'équipe AJR ou ouvrir une issue sur le dépôt Git.
|
|
||||||
|
|
||||||
15
docs/data/README.md
Normal file
15
docs/data/README.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# Données du Radar Technologique Laplank
|
||||||
|
|
||||||
|
Ce dossier contient les données utilisées par l'application Radar Technologique Laplank.
|
||||||
|
|
||||||
|
## Contenu
|
||||||
|
|
||||||
|
- **technologies-duniter.md** : Liste des technologies de l'écosystème Duniter/Ğ1
|
||||||
|
- **profil-team.md** : Profils et compétences des membres de l'équipe
|
||||||
|
- **strategie-evolution-technique.md** : Vision et roadmap technique
|
||||||
|
- **strategie-business.md** : Analyse stratégique business
|
||||||
|
- **opportunites-dataviz.md** : Opportunités en dataviz
|
||||||
|
- **opportunites-dataviz-details.md** : Détails des opportunités dataviz
|
||||||
|
- **analyse-strategique.md** : Rapport d'analyse généré automatiquement
|
||||||
|
|
||||||
|
Ces fichiers sont utilisés par les scripts et l'application pour générer le contenu du radar.
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
poka
|
# poka
|
||||||
|
|
||||||
Je suis contributeur actif sur le projet Duniter depuis 2016 aux RML7 de Laval.
|
Je suis contributeur actif sur le projet Duniter depuis 2016 aux RML7 de Laval.
|
||||||
|
|
||||||
@@ -6,12 +6,8 @@ Je code Ğecko en Flutter/Dart. Je maintiens aussi l’infra Axiom-Team, soit 2
|
|||||||
|
|
||||||
J’ai aussi codé Ğ1-stats en bash. Et jaklis en python. J’ai aussi codé py-g1-migrator
|
J’ai aussi codé Ğ1-stats en bash. Et jaklis en python. J’ai aussi codé py-g1-migrator
|
||||||
|
|
||||||
J’aime la soupe au poireaux.
|
|
||||||
|
|
||||||
edit important: J’aime aussi les tartes aux légumes. Je préfère parler de tarte plutôt que de quiche aux légumes, même si j’aime beaucoup les quiches aussi. Je n’ai aucune animosité particulière vie-à-vis des gens qui préfèrent parler de quiche aux légumes plutôt que de tartes, même si je les considères comme éloignés de moi (au niveau de la race je veux dire hein, pas de malentendu).
|
# ManUtopiK
|
||||||
|
|
||||||
Je n’aime pas le cresson.
|
|
||||||
ManUtopiK
|
|
||||||
|
|
||||||
Diplomé dans le domaine des énergies renouvelables, mon côté “web enthousiaste” m’a finalement amené à faire du développement web depuis + de 12 ans.
|
Diplomé dans le domaine des énergies renouvelables, mon côté “web enthousiaste” m’a finalement amené à faire du développement web depuis + de 12 ans.
|
||||||
|
|
||||||
@@ -32,29 +28,31 @@ En cours
|
|||||||
Extension web g1Compagnon
|
Extension web g1Compagnon
|
||||||
Interface web pour g1Billet
|
Interface web pour g1Billet
|
||||||
|
|
||||||
Hugo Trentesaux
|
# Hugo Trentesaux
|
||||||
|
|
||||||
Je m’intéresse à la Ğ1 depuis 2017 et pense que l’association Axiom Team constitue une base juridique utile car nécessaire pour de nombreuses interactions avec le monde €.
|
Je m’intéresse à la Ğ1 depuis 2017 et pense que l’association Axiom Team constitue une base juridique utile car nécessaire pour de nombreuses interactions avec le monde €.
|
||||||
|
|
||||||
J’ai travaillé sur le dossier de financement de Ǧecko auprès de l’ADEME avec succès. À l’avenir, je compte participer au fonctionnement d’Axiom Team, et à la partie rédactionnelle des dossiers de financement.
|
J’ai travaillé sur le dossier de financement de Ǧecko auprès de l’ADEME avec succès. À l’avenir, je compte participer au fonctionnement d’Axiom Team, et à la partie rédactionnelle des dossiers de financement.
|
||||||
aya
|
|
||||||
|
# aya
|
||||||
|
|
||||||
Je participe à la vulgarisation des logiciels libres depuis ma première installation de linux debian potato en 2001.
|
Je participe à la vulgarisation des logiciels libres depuis ma première installation de linux debian potato en 2001.
|
||||||
|
|
||||||
J’ai découvert la monnaie libre à travers mes recherches concernant les systèmes de fichiers. Travaillant principalement sur des infrastructures d’hébergement distribué, j’ai utilisé différents systèmes de réplication de fichiers comme glusterfs, cephfs, pour en arriver à ipfs. C’est en cherchant une alternative à filecoin, la crypto proposée par ipfs pour mettre en commun son espace de stockage, que je découvre la monnaie libre, on est en 2021.
|
J’ai découvert la monnaie libre à travers mes recherches concernant les systèmes de fichiers. Travaillant principalement sur des infrastructures d’hébergement distribué, j’ai utilisé différents systèmes de réplication de fichiers comme glusterfs, cephfs, pour en arriver à ipfs. C’est en cherchant une alternative à filecoin, la crypto proposée par ipfs pour mettre en commun son espace de stockage, que je découvre la monnaie libre, on est en 2021.
|
||||||
|
|
||||||
Je rejoins Axiom-Team pour participer à la vulgarisation de la monnaie libre.
|
Je rejoins Axiom-Team pour participer à la vulgarisation de la monnaie libre.
|
||||||
Syoul
|
|
||||||
|
|
||||||
Actuellement secrétaire d’Axiom-Team
|
# Syoul
|
||||||
|
|
||||||
Artisan bidouilleur Libriste, formé à la bidouille (résilience numérique, énergétique, domotique). Artisan laser numérique sur le causse du Querçy (46)
|
Artisan bidouilleur Libriste, formé à la bidouille (résilience numérique, énergétique, domotique). Artisan laser numérique sur le causse du Querçy (46)
|
||||||
|
|
||||||
J’ai découvert la June en 2018. Depuis, j’anime avec des groupes locaux, des conférences et Ğmarchés autour de la monnaie libre G1.
|
J’ai découvert la June en 2018. Depuis, j’anime avec des groupes locaux, des conférences et Ğmarchés autour de la monnaie libre G1.
|
||||||
Eloïs
|
|
||||||
|
# Eloïs
|
||||||
|
|
||||||
A appris les technologies blockchain en autodidact, travaillé sur la “rustification” (passage en Rust) de Duniter v1, puis bossé chez MoonPay.
|
A appris les technologies blockchain en autodidact, travaillé sur la “rustification” (passage en Rust) de Duniter v1, puis bossé chez MoonPay.
|
||||||
Yvv
|
|
||||||
|
# Yvv
|
||||||
|
|
||||||
Vieux bouc dans le CA, je tire ma révérence en tant que secrétaire. Focus sur ce qui m’intéresse le plus, nouvelle forme de mobilisation.
|
Vieux bouc dans le CA, je tire ma révérence en tant que secrétaire. Focus sur ce qui m’intéresse le plus, nouvelle forme de mobilisation.
|
||||||
|
|
||||||
@@ -74,19 +72,22 @@ Pour ML :
|
|||||||
Lancer un événement structurant, le Librodrome.
|
Lancer un événement structurant, le Librodrome.
|
||||||
Lancer une expérience de production collective monnaie-libriste, probablement une conserverie éphémère mobile.
|
Lancer une expérience de production collective monnaie-libriste, probablement une conserverie éphémère mobile.
|
||||||
|
|
||||||
Fred
|
# Fred
|
||||||
|
|
||||||
A monté une boite (Linkeo) qui a bouffé une partie du marché de PagesJaunes début/milieu des années 2000. Très intéressé (et sachant) sur IPFS, Secure ScuttleButt, Nostr et TiddlyWiki. Il développe Astroport, un système d’information qui combine la Ğ1, IPFS et Nostr. Par le passé, il a aussi créé G1SMS (système de paiement par SMS en Ğ1) et G1billet (paper wallet pour la Ğ1).
|
A monté une boite (Linkeo) qui a bouffé une partie du marché de PagesJaunes début/milieu des années 2000. Très intéressé (et sachant) sur IPFS, Secure ScuttleButt, Nostr et TiddlyWiki. Il développe Astroport, un système d’information qui combine la Ğ1, IPFS et Nostr. Par le passé, il a aussi créé G1SMS (système de paiement par SMS en Ğ1) et G1billet (paper wallet pour la Ğ1).
|
||||||
Vivien
|
|
||||||
|
# Vivien
|
||||||
|
|
||||||
Se forme pour contribuer à certains logiciels de la Ğ1 (Cesium). Développe aussi en Godot. Passionné de jeux (cartes Magic notamment).
|
Se forme pour contribuer à certains logiciels de la Ğ1 (Cesium). Développe aussi en Godot. Passionné de jeux (cartes Magic notamment).
|
||||||
1000i100
|
|
||||||
|
# 1000i100
|
||||||
|
|
||||||
Développeur d’outils serverless, et plombier des pipeline Gitlab (CI/CD avec Docker). Enfin une monnaie mécaniquement redistributive ! Avec un soupçon de revenu de base, une bonne dose d’auto-gestion et une communauté adorable !Informaticien couteau suisse à dominante développeur web, photographe à ses heures, soutien psy informel, amateur de CNV et de modèles économiques expérimental et éthique !
|
Développeur d’outils serverless, et plombier des pipeline Gitlab (CI/CD avec Docker). Enfin une monnaie mécaniquement redistributive ! Avec un soupçon de revenu de base, une bonne dose d’auto-gestion et une communauté adorable !Informaticien couteau suisse à dominante développeur web, photographe à ses heures, soutien psy informel, amateur de CNV et de modèles économiques expérimental et éthique !
|
||||||
tuxmain
|
|
||||||
|
# tuxmain
|
||||||
|
|
||||||
Étudiant en math. Bien compétent sur la cryptographie, le chiffrage, les conversions de clef d’une base en une autre. Administrateur de serveur Minetest. Il bidouille aussi de l’électronique.
|
Étudiant en math. Bien compétent sur la cryptographie, le chiffrage, les conversions de clef d’une base en une autre. Administrateur de serveur Minetest. Il bidouille aussi de l’électronique.
|
||||||
|
|
||||||
boris
|
# boris
|
||||||
|
|
||||||
Il est assez dispersé, “jack of all trade, master of none”. Ces derniers temps, il passe beaucoup de temps à faire de la génération de musiques rigolotes (ou autre) avec les LLM et Suno. Il aime les langues étrangères (l’anglais surtout), la médecine traditionnelle chinoise, le Feng Shui (le tao en général). Il est communiste. Il a bossé sur l’UX/UI de Ğecko (via Figma). Grâce à Cursor, il développe une app de médecine chinoise basée sur les LLM. Dans la Ğ1, il a essayé de contribuer à l’onboarding (il a refait le site monnaie-libre.fr, Duniter | Accueil, et fait le site cesium.app). Il a aussi fait des clients Ğchange : Ğ1Quest (une projection des annonces Ğchange, notamment en “vue radar”), Ğrocéliande (un genre de skin pour Ğchange calqué sur l’interface d’Amazon, et qui ne prend que les annonces avec “envoi possible” dans la description), g1.business (qui permet de repérer les “routes commerciale”, de faire correspondre pour un produit l’offre d’un endroit et la demande à un endroit distant, et qui projette sur une carte les moyens de productions disponibles à la location en Ğ1). Il a aussi fait Ğ1Gate (qui permet de suivre les flux de monnaie en vue “treemap”), H2G2 “le guide du terraformeur terrien” (une vue à la recette MineCraft de choses qu’on peut produire “dans la vraie vie”), Ğ1 KDE Notifier (Un petit outil pour être notifié de mouvements sur un portefeuille Ğ1), un Simulateur RSA / Prime d’activité (Un simulateur RSA/prime d’activité plus très à jour au niveau des données, mais qui permet de se rendre compte à quel point le fonctionnement de la prime d’activité est complètement stupide, et incite à éviter de travailler de façon trop importante trop ponctuellement, si on ne veut pas risquer de perdre de l’argent en allant se casser le cul au boulot), Cerveau externe (Un truc fait avec Vis.js, pour projeter des mots, colorés suivant la rime, regroupés autour des consonnes, et liés s’ils appartiennent à un même thème. Dans l’idée de faire des impros de rap avec. Proto sans réelle interface utilisateur utilisable par les moldus. Faire F5 pour raffraîchir et ainsi avoir un autre graphe de mots.), NoBS Troll-Emploi (Un moteur de recherche d’emploi basé sur l’API Pôle-Emploi et qui permet d’avoir plus de filtres : mots-clefs à exclure, pas de tutoiement, pas de “digital”, etc… Idéal pour les gens qui, certes, acceptent d’être exploités lorsqu’ils développent du logiciel, mais veulent diminuer au maximum la quantité de bullshit dans leur job).
|
Il est assez dispersé, “jack of all trade, master of none”. Ces derniers temps, il passe beaucoup de temps à faire de la génération de musiques rigolotes (ou autre) avec les LLM et Suno. Il aime les langues étrangères (l’anglais surtout), la médecine traditionnelle chinoise, le Feng Shui (le tao en général). Il est communiste. Il a bossé sur l’UX/UI de Ğecko (via Figma). Grâce à Cursor, il développe une app de médecine chinoise basée sur les LLM. Dans la Ğ1, il a essayé de contribuer à l’onboarding (il a refait le site monnaie-libre.fr, Duniter | Accueil, et fait le site cesium.app). Il a aussi fait des clients Ğchange : Ğ1Quest (une projection des annonces Ğchange, notamment en “vue radar”), Ğrocéliande (un genre de skin pour Ğchange calqué sur l’interface d’Amazon, et qui ne prend que les annonces avec “envoi possible” dans la description), g1.business (qui permet de repérer les “routes commerciale”, de faire correspondre pour un produit l’offre d’un endroit et la demande à un endroit distant, et qui projette sur une carte les moyens de productions disponibles à la location en Ğ1). Il a aussi fait Ğ1Gate (qui permet de suivre les flux de monnaie en vue “treemap”), H2G2 “le guide du terraformeur terrien” (une vue à la recette MineCraft de choses qu’on peut produire “dans la vraie vie”), Ğ1 KDE Notifier (Un petit outil pour être notifié de mouvements sur un portefeuille Ğ1), un Simulateur RSA / Prime d’activité (Un simulateur RSA/prime d’activité plus très à jour au niveau des données, mais qui permet de se rendre compte à quel point le fonctionnement de la prime d’activité est complètement stupide, et incite à éviter de travailler de façon trop importante trop ponctuellement, si on ne veut pas risquer de perdre de l’argent en allant se casser le cul au boulot), Cerveau externe (Un truc fait avec Vis.js, pour projeter des mots, colorés suivant la rime, regroupés autour des consonnes, et liés s’ils appartiennent à un même thème. Dans l’idée de faire des impros de rap avec. Proto sans réelle interface utilisateur utilisable par les moldus. Faire F5 pour raffraîchir et ainsi avoir un autre graphe de mots.), NoBS Troll-Emploi (Un moteur de recherche d’emploi basé sur l’API Pôle-Emploi et qui permet d’avoir plus de filtres : mots-clefs à exclure, pas de tutoiement, pas de “digital”, etc… Idéal pour les gens qui, certes, acceptent d’être exploités lorsqu’ils développent du logiciel, mais veulent diminuer au maximum la quantité de bullshit dans leur job).
|
||||||
42
docs/data/team/1000i100.md
Normal file
42
docs/data/team/1000i100.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
---
|
||||||
|
name: "1000i100"
|
||||||
|
fullName: "1000i100"
|
||||||
|
role: "DevOps & Développeur Web"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 10
|
||||||
|
joinDate: "2018-01"
|
||||||
|
interests: ["Serverless", "CI/CD", "Docker", "Photographie", "CNV", "Modèles économiques"]
|
||||||
|
skills:
|
||||||
|
- name: "Serverless"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "GitLab"
|
||||||
|
level: expert
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "CI/CD"
|
||||||
|
level: expert
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Docker"
|
||||||
|
level: expert
|
||||||
|
years: 7
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "web"
|
||||||
|
level: expert
|
||||||
|
years: 10
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Polyvalence"
|
||||||
|
- "Photographie"
|
||||||
|
- "Soutien psychologique"
|
||||||
|
- "CNV (Communication Non Violente)"
|
||||||
|
projects:
|
||||||
|
- "Outils serverless"
|
||||||
|
- "Pipeline GitLab CI/CD"
|
||||||
|
---
|
||||||
|
|
||||||
|
Développeur d'outils serverless, et plombier des pipeline Gitlab (CI/CD avec Docker). Enfin une monnaie mécaniquement redistributive ! Avec un soupçon de revenu de base, une bonne dose d'auto-gestion et une communauté adorable ! Informaticien couteau suisse à dominante développeur web, photographe à ses heures, soutien psy informel, amateur de CNV et de modèles économiques expérimental et éthique !
|
||||||
|
|
||||||
52
docs/data/team/aya.md
Normal file
52
docs/data/team/aya.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
name: "aya"
|
||||||
|
fullName: "aya"
|
||||||
|
role: "Administrateur Système & Infrastructure Distribuée"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 23
|
||||||
|
joinDate: "2021-01"
|
||||||
|
interests: ["Logiciels libres", "Infrastructure distribuée", "Stockage distribué", "IPFS", "ThreeFold"]
|
||||||
|
skills:
|
||||||
|
- name: "Linux"
|
||||||
|
level: expert
|
||||||
|
years: 23
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "glusterfs"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2023-06"
|
||||||
|
- name: "cephfs"
|
||||||
|
level: intermediate
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2023-06"
|
||||||
|
- name: "ipfs"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "infrastructure"
|
||||||
|
level: expert
|
||||||
|
years: 15
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "systèmes distribués"
|
||||||
|
level: expert
|
||||||
|
years: 10
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "ThreeFold"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Vulgarisation"
|
||||||
|
- "Autonomie"
|
||||||
|
- "Recherche"
|
||||||
|
projects:
|
||||||
|
- "Infrastructure d'hébergement distribué"
|
||||||
|
---
|
||||||
|
|
||||||
|
Je participe à la vulgarisation des logiciels libres depuis ma première installation de linux debian potato en 2001.
|
||||||
|
|
||||||
|
J'ai découvert la monnaie libre à travers mes recherches concernant les systèmes de fichiers. Travaillant principalement sur des infrastructures d'hébergement distribué, j'ai utilisé différents systèmes de réplication de fichiers comme glusterfs, cephfs, pour en arriver à ipfs. C'est en cherchant une alternative à filecoin, la crypto proposée par ipfs pour mettre en commun son espace de stockage, que je découvre la monnaie libre, on est en 2021.
|
||||||
|
|
||||||
|
Je rejoins Axiom-Team pour participer à la vulgarisation de la monnaie libre.
|
||||||
|
|
||||||
66
docs/data/team/boris.md
Normal file
66
docs/data/team/boris.md
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
name: "boris"
|
||||||
|
fullName: "boris"
|
||||||
|
role: "UX/UI Designer & Développeur Full Stack"
|
||||||
|
availability: 40
|
||||||
|
seniorityLevel: intermediate
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2018-01"
|
||||||
|
interests: ["UX/UI", "LLM", "Langues étrangères", "Médecine traditionnelle chinoise", "Feng Shui", "Tao", "Musique"]
|
||||||
|
skills:
|
||||||
|
- name: "UX"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "UI"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Figma"
|
||||||
|
level: intermediate
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "LLM"
|
||||||
|
level: intermediate
|
||||||
|
years: 2
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "JavaScript"
|
||||||
|
level: intermediate
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "TypeScript"
|
||||||
|
level: intermediate
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "APIs"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Vis.js"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Polyvalence"
|
||||||
|
- "Créativité"
|
||||||
|
- "Curiosité"
|
||||||
|
- "Multiculturalisme"
|
||||||
|
projects:
|
||||||
|
- "UX/UI de Ğecko (Figma)"
|
||||||
|
- "App de médecine chinoise basée sur LLM"
|
||||||
|
- "Site monnaie-libre.fr"
|
||||||
|
- "Duniter | Accueil"
|
||||||
|
- "cesium.app"
|
||||||
|
- "Ğ1Quest (vue radar des annonces Ğchange)"
|
||||||
|
- "Ğrocéliande (skin Ğchange style Amazon)"
|
||||||
|
- "g1.business (routes commerciales)"
|
||||||
|
- "Ğ1Gate (flux de monnaie en treemap)"
|
||||||
|
- "H2G2 (guide du terraformeur terrien)"
|
||||||
|
- "Ğ1 KDE Notifier"
|
||||||
|
- "Simulateur RSA / Prime d'activité"
|
||||||
|
- "Cerveau externe (Vis.js pour impros rap)"
|
||||||
|
- "NoBS Troll-Emploi (moteur de recherche d'emploi)"
|
||||||
|
---
|
||||||
|
|
||||||
|
Il est assez dispersé, "jack of all trade, master of none". Ces derniers temps, il passe beaucoup de temps à faire de la génération de musiques rigolotes (ou autre) avec les LLM et Suno. Il aime les langues étrangères (l'anglais surtout), la médecine traditionnelle chinoise, le Feng Shui (le tao en général). Il est communiste. Il a bossé sur l'UX/UI de Ğecko (via Figma). Grâce à Cursor, il développe une app de médecine chinoise basée sur les LLM. Dans la Ğ1, il a essayé de contribuer à l'onboarding (il a refait le site monnaie-libre.fr, Duniter | Accueil, et fait le site cesium.app). Il a aussi fait des clients Ğchange : Ğ1Quest (une projection des annonces Ğchange, notamment en "vue radar"), Ğrocéliande (un genre de skin pour Ğchange calqué sur l'interface d'Amazon, et qui ne prend que les annonces avec "envoi possible" dans la description), g1.business (qui permet de repérer les "routes commerciale", de faire correspondre pour un produit l'offre d'un endroit et la demande à un endroit distant, et qui projette sur une carte les moyens de productions disponibles à la location en Ğ1). Il a aussi fait Ğ1Gate (qui permet de suivre les flux de monnaie en vue "treemap"), H2G2 "le guide du terraformeur terrien" (une vue à la recette MineCraft de choses qu'on peut produire "dans la vraie vie"), Ğ1 KDE Notifier (Un petit outil pour être notifié de mouvements sur un portefeuille Ğ1), un Simulateur RSA / Prime d'activité (Un simulateur RSA/prime d'activité plus très à jour au niveau des données, mais qui permet de se rendre compte à quel point le fonctionnement de la prime d'activité est complètement stupide, et incite à éviter de travailler de façon trop importante trop ponctuellement, si on ne veut pas risquer de perdre de l'argent en allant se casser le cul au boulot), Cerveau externe (Un truc fait avec Vis.js, pour projeter des mots, colorés suivant la rime, regroupés autour des consonnes, et liés s'ils appartiennent à un même thème. Dans l'idée de faire des impros de rap avec. Proto sans réelle interface utilisateur utilisable par les moldus. Faire F5 pour raffraîchir et ainsi avoir un autre graphe de mots.), NoBS Troll-Emploi (Un moteur de recherche d'emploi basé sur l'API Pôle-Emploi et qui permet d'avoir plus de filtres : mots-clefs à exclure, pas de tutoiement, pas de "digital", etc… Idéal pour les gens qui, certes, acceptent d'être exploités lorsqu'ils développent du logiciel, mais veulent diminuer au maximum la quantité de bullshit dans leur job).
|
||||||
|
|
||||||
37
docs/data/team/elois.md
Normal file
37
docs/data/team/elois.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
name: "elois"
|
||||||
|
fullName: "Eloïs"
|
||||||
|
role: "Développeur Blockchain"
|
||||||
|
availability: 25
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 5
|
||||||
|
joinDate: "2019-01"
|
||||||
|
interests: ["Blockchain", "Rust", "Migration", "Cryptographie"]
|
||||||
|
skills:
|
||||||
|
- name: "Rust"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "blockchain"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Substrate"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "migration"
|
||||||
|
level: expert
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Autodidactie"
|
||||||
|
- "Recherche"
|
||||||
|
- "Architecture"
|
||||||
|
projects:
|
||||||
|
- "Rustification de Duniter v1"
|
||||||
|
- "Duniter v2S"
|
||||||
|
---
|
||||||
|
|
||||||
|
A appris les technologies blockchain en autodidact, travaillé sur la "rustification" (passage en Rust) de Duniter v1, puis bossé chez MoonPay.
|
||||||
|
|
||||||
47
docs/data/team/fred.md
Normal file
47
docs/data/team/fred.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
name: "fred"
|
||||||
|
fullName: "Fred"
|
||||||
|
role: "Développeur & Architecte Systèmes Décentralisés"
|
||||||
|
availability: 40
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 20
|
||||||
|
joinDate: "2014-01"
|
||||||
|
interests: ["IPFS", "Secure ScuttleButt", "Nostr", "TiddlyWiki", "ThreeFold", "Systèmes décentralisés"]
|
||||||
|
skills:
|
||||||
|
- name: "IPFS"
|
||||||
|
level: expert
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Secure ScuttleButt"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
- name: "Nostr"
|
||||||
|
level: expert
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "TiddlyWiki"
|
||||||
|
level: expert
|
||||||
|
years: 8
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "développement"
|
||||||
|
level: expert
|
||||||
|
years: 20
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "ThreeFold"
|
||||||
|
level: intermediate
|
||||||
|
years: 2
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Architecture"
|
||||||
|
- "Entrepreneuriat"
|
||||||
|
- "Innovation"
|
||||||
|
projects:
|
||||||
|
- "Astroport (système d'information combinant Ğ1, IPFS et Nostr)"
|
||||||
|
- "G1SMS (système de paiement par SMS en Ğ1)"
|
||||||
|
- "G1billet (paper wallet pour la Ğ1)"
|
||||||
|
- "Linkeo (entreprise)"
|
||||||
|
---
|
||||||
|
|
||||||
|
A monté une boite (Linkeo) qui a bouffé une partie du marché de PagesJaunes début/milieu des années 2000. Très intéressé (et sachant) sur IPFS, Secure ScuttleButt, Nostr et TiddlyWiki. Il développe Astroport, un système d'information qui combine la Ğ1, IPFS et Nostr. Par le passé, il a aussi créé G1SMS (système de paiement par SMS en Ğ1) et G1billet (paper wallet pour la Ğ1).
|
||||||
|
|
||||||
34
docs/data/team/hugo.md
Normal file
34
docs/data/team/hugo.md
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
---
|
||||||
|
name: "hugo"
|
||||||
|
fullName: "Hugo Trentesaux"
|
||||||
|
role: "Financement & Gestion"
|
||||||
|
availability: 20
|
||||||
|
seniorityLevel: intermediate
|
||||||
|
yearsExperience: 5
|
||||||
|
joinDate: "2017-01"
|
||||||
|
interests: ["Financement", "Gestion", "Rédaction", "Administration"]
|
||||||
|
skills:
|
||||||
|
- name: "financement"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "rédaction"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "gestion"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Rédaction"
|
||||||
|
- "Administration"
|
||||||
|
- "Gestion de projet"
|
||||||
|
projects:
|
||||||
|
- "Dossier de financement Ğecko (ADEME)"
|
||||||
|
---
|
||||||
|
|
||||||
|
Je m'intéresse à la Ğ1 depuis 2017 et pense que l'association Axiom Team constitue une base juridique utile car nécessaire pour de nombreuses interactions avec le monde €.
|
||||||
|
|
||||||
|
J'ai travaillé sur le dossier de financement de Ǧecko auprès de l'ADEME avec succès. À l'avenir, je compte participer au fonctionnement d'Axiom Team, et à la partie rédactionnelle des dossiers de financement.
|
||||||
|
|
||||||
69
docs/data/team/manuTopik.md
Normal file
69
docs/data/team/manuTopik.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
---
|
||||||
|
name: "manuTopik"
|
||||||
|
fullName: "ManUtopiK"
|
||||||
|
role: "Développeur Web Full Stack"
|
||||||
|
availability: 40
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 12
|
||||||
|
joinDate: "2014-01"
|
||||||
|
interests: ["Web", "Alternatives", "Monnaie libre", "Solarpunk", "Intelligence collective"]
|
||||||
|
skills:
|
||||||
|
- name: "VueJS"
|
||||||
|
level: expert
|
||||||
|
years: 8
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Nuxt.js"
|
||||||
|
level: expert
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
- name: "JavaScript"
|
||||||
|
level: expert
|
||||||
|
years: 12
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "TypeScript"
|
||||||
|
level: intermediate
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "CMS"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "web"
|
||||||
|
level: expert
|
||||||
|
years: 12
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Communication"
|
||||||
|
- "Vulgarisation"
|
||||||
|
- "Créativité"
|
||||||
|
projects:
|
||||||
|
- "monnaie-libre.fr"
|
||||||
|
- "carte.monnaie-libre.fr"
|
||||||
|
- "Doc silkaj"
|
||||||
|
- "WotWizard-UI"
|
||||||
|
- "g1lib"
|
||||||
|
- "Duniter UI (nuxt - abandonné)"
|
||||||
|
- "Extension web g1Compagnon (en cours)"
|
||||||
|
- "Interface web pour g1Billet (en cours)"
|
||||||
|
---
|
||||||
|
|
||||||
|
Diplomé dans le domaine des énergies renouvelables, mon côté "web enthousiaste" m'a finalement amené à faire du développement web depuis + de 12 ans.
|
||||||
|
|
||||||
|
Passionné par tout ce qui est "alternatif" et qui rend libre, j'ai découvert le concept de la monnaie libre en 2014. L'économie actuelle est à mes yeux le principal facteur du bordel que l'on a mis sur cette planète depuis des générations. J'espère en un monde un peu plus libre, auto gouverné en intelligence collective, et avec du #solarpunk comme horizon. Profitons des crises pour tout changer !
|
||||||
|
|
||||||
|
À fond sur VueJS ; il a créé un CMS basé sur VueJS.
|
||||||
|
|
||||||
|
## Contributions
|
||||||
|
|
||||||
|
- Développement et rédaction du site monnaie-libre.fr (Dépôt du site, de l'api)
|
||||||
|
- Développement de la carte.monnaie-libre.fr (Dépôt)
|
||||||
|
- Doc silkaj
|
||||||
|
- WotWizard-UI
|
||||||
|
- g1lib
|
||||||
|
- Duniter UI avec nuxt (Abandonné)
|
||||||
|
|
||||||
|
## En cours
|
||||||
|
|
||||||
|
- Extension web g1Compagnon
|
||||||
|
- Interface web pour g1Billet
|
||||||
|
|
||||||
52
docs/data/team/poka.md
Normal file
52
docs/data/team/poka.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
name: "poka"
|
||||||
|
fullName: "Poka"
|
||||||
|
role: "Développeur Full Stack & Administrateur Système"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: expert
|
||||||
|
yearsExperience: 8
|
||||||
|
joinDate: "2016-01"
|
||||||
|
interests: ["Mobile", "Infrastructure", "Automatisation", "Blockchain"]
|
||||||
|
skills:
|
||||||
|
- name: "Flutter"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Dart"
|
||||||
|
level: expert
|
||||||
|
years: 4
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Python"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
- name: "bash"
|
||||||
|
level: expert
|
||||||
|
years: 8
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "ProxMox"
|
||||||
|
level: expert
|
||||||
|
years: 6
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "infrastructure"
|
||||||
|
level: expert
|
||||||
|
years: 8
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Autonomie"
|
||||||
|
- "Pédagogie"
|
||||||
|
- "Maintenance système"
|
||||||
|
projects:
|
||||||
|
- "Ğecko"
|
||||||
|
- "Ğ1-stats"
|
||||||
|
- "jaklis"
|
||||||
|
- "py-g1-migrator"
|
||||||
|
- "Infrastructure Axiom-Team"
|
||||||
|
---
|
||||||
|
|
||||||
|
Je suis contributeur actif sur le projet Duniter depuis 2016 aux RML7 de Laval.
|
||||||
|
|
||||||
|
Je code Ğecko en Flutter/Dart. Je maintiens aussi l'infra Axiom-Team, soit 2 serveurs ProxMox.
|
||||||
|
|
||||||
|
J'ai aussi codé Ğ1-stats en bash. Et jaklis en python. J'ai aussi codé py-g1-migrator
|
||||||
|
|
||||||
38
docs/data/team/syoul.md
Normal file
38
docs/data/team/syoul.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
name: "syoul"
|
||||||
|
fullName: "Syoul"
|
||||||
|
role: "Etudiant IPSSI - Alternance Admin Infrastructure Securisee chez AJR"
|
||||||
|
availability: 50
|
||||||
|
seniorityLevel: beginner
|
||||||
|
yearsExperience: 1
|
||||||
|
joinDate: "2024-06"
|
||||||
|
interests: ["Autohebergement", "Proxmox", "Docker", "Infrastructure", "Securite"]
|
||||||
|
skills:
|
||||||
|
- name: "Proxmox"
|
||||||
|
level: beginner
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Docker"
|
||||||
|
level: beginner
|
||||||
|
years: 1
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Linux"
|
||||||
|
level: beginner
|
||||||
|
years: 1
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "autohebergement"
|
||||||
|
level: beginner
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Apprentissage"
|
||||||
|
- "Curiosite"
|
||||||
|
- "Autonomie"
|
||||||
|
projects:
|
||||||
|
- "Autohebergement personnel (Proxmox + Docker)"
|
||||||
|
- "Alternance AJR - Administration Infrastructure"
|
||||||
|
---
|
||||||
|
|
||||||
|
Etudiant a l'IPSSI depuis 6 mois, en alternance Administrateur Infrastructure Securisee chez AJR.
|
||||||
|
|
||||||
|
Gere son infrastructure personnelle avec Proxmox et Docker pour l'autohebergement de services.
|
||||||
37
docs/data/team/tuxmain.md
Normal file
37
docs/data/team/tuxmain.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
name: "tuxmain"
|
||||||
|
fullName: "tuxmain"
|
||||||
|
role: "Étudiant Math & Cryptographie"
|
||||||
|
availability: 20
|
||||||
|
seniorityLevel: beginner
|
||||||
|
yearsExperience: 3
|
||||||
|
joinDate: "2022-01"
|
||||||
|
interests: ["Mathématiques", "Cryptographie", "Chiffrage", "Électronique", "Minetest"]
|
||||||
|
skills:
|
||||||
|
- name: "cryptographie"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "chiffrage"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "math"
|
||||||
|
level: expert
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "électronique"
|
||||||
|
level: beginner
|
||||||
|
years: 2
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Recherche"
|
||||||
|
- "Analyse"
|
||||||
|
- "Bidouille"
|
||||||
|
projects:
|
||||||
|
- "Administration serveur Minetest"
|
||||||
|
- "Bidouille électronique"
|
||||||
|
---
|
||||||
|
|
||||||
|
Étudiant en math. Bien compétent sur la cryptographie, le chiffrage, les conversions de clef d'une base en une autre. Administrateur de serveur Minetest. Il bidouille aussi de l'électronique.
|
||||||
|
|
||||||
28
docs/data/team/vivien.md
Normal file
28
docs/data/team/vivien.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
---
|
||||||
|
name: "vivien"
|
||||||
|
fullName: "Vivien"
|
||||||
|
role: "Développeur"
|
||||||
|
availability: 40
|
||||||
|
seniorityLevel: beginner
|
||||||
|
yearsExperience: 2
|
||||||
|
joinDate: "2023-01"
|
||||||
|
interests: ["Cesium", "Godot", "Jeux", "Cartes Magic"]
|
||||||
|
skills:
|
||||||
|
- name: "Cesium"
|
||||||
|
level: beginner
|
||||||
|
years: 2
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "Godot"
|
||||||
|
level: beginner
|
||||||
|
years: 2
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
softSkills:
|
||||||
|
- "Apprentissage"
|
||||||
|
- "Curiosité"
|
||||||
|
projects:
|
||||||
|
- "Contribution à Cesium"
|
||||||
|
- "Développement en Godot"
|
||||||
|
---
|
||||||
|
|
||||||
|
Se forme pour contribuer à certains logiciels de la Ğ1 (Cesium). Développe aussi en Godot. Passionné de jeux (cartes Magic notamment).
|
||||||
|
|
||||||
54
docs/data/team/yvv.md
Normal file
54
docs/data/team/yvv.md
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
name: "yvv"
|
||||||
|
fullName: "Yvv"
|
||||||
|
role: "Gestion & Mobilisation"
|
||||||
|
availability: 70
|
||||||
|
seniorityLevel: senior
|
||||||
|
yearsExperience: 10
|
||||||
|
joinDate: "2015-01"
|
||||||
|
interests: ["Gestion", "Mobilisation", "Économie du don", "Wiki", "Médiathèque"]
|
||||||
|
skills:
|
||||||
|
- name: "gestion"
|
||||||
|
level: expert
|
||||||
|
years: 10
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
- name: "médiathèque"
|
||||||
|
level: intermediate
|
||||||
|
years: 3
|
||||||
|
lastUsed: "2024-11"
|
||||||
|
- name: "wiki"
|
||||||
|
level: intermediate
|
||||||
|
years: 5
|
||||||
|
lastUsed: "2024-12"
|
||||||
|
softSkills:
|
||||||
|
- "Gestion"
|
||||||
|
- "Organisation"
|
||||||
|
- "Mobilisation"
|
||||||
|
- "Communication"
|
||||||
|
projects:
|
||||||
|
- "Tuyauterie autogestion des dons (UNL)"
|
||||||
|
- "WishBounty v2"
|
||||||
|
- "FAQs version wiki"
|
||||||
|
- "Médiathèque (nocodb)"
|
||||||
|
- "Librodrome"
|
||||||
|
- "Conserverie éphémère mobile"
|
||||||
|
---
|
||||||
|
|
||||||
|
Vieux bouc dans le CA, je tire ma révérence en tant que secrétaire. Focus sur ce qui m'intéresse le plus, nouvelle forme de mobilisation.
|
||||||
|
|
||||||
|
## Pour mission UNL
|
||||||
|
|
||||||
|
- Aboutir la tuyauterie autogestion des dons.
|
||||||
|
- L'élargir pour une v2 sur … un goût de paradis, le WishBounty.
|
||||||
|
|
||||||
|
## Pour mission fédération - services aux monnaie-libristes
|
||||||
|
|
||||||
|
- Bosser sur une FAQs version wiki, si un mediawiki ou autre voit le jour.
|
||||||
|
- Bosser sur une médiathèque, si un nocodb ou autre voit le jour.
|
||||||
|
|
||||||
|
## Pour ML
|
||||||
|
|
||||||
|
- Diffuser mon bouquin "une économie du don - enfin concevable" et m'en servir de support pour mener des ateliers éco et "passer la seconde".
|
||||||
|
- Lancer un événement structurant, le Librodrome.
|
||||||
|
- Lancer une expérience de production collective monnaie-libriste, probablement une conserverie éphémère mobile.
|
||||||
|
|
||||||
@@ -94,6 +94,53 @@ Ce document liste les technologies et compétences identifiées dans l'écosyst
|
|||||||
- **api-axiom-team-fr** : API pour le site Axiom
|
- **api-axiom-team-fr** : API pour le site Axiom
|
||||||
- **Compétences requises** : REST APIs, GraphQL, documentation d'API
|
- **Compétences requises** : REST APIs, GraphQL, documentation d'API
|
||||||
|
|
||||||
|
## Technologies d'Authentification et d'Identité
|
||||||
|
|
||||||
|
### Authentification et Autorisation
|
||||||
|
|
||||||
|
#### Microsoft Entra (concurrents)
|
||||||
|
- **Utilisation** : Solution d'identité et d'accès cloud de Microsoft
|
||||||
|
- **Description** : Plateforme d'identité en tant que service (IDaaS) qui fournit l'authentification unique (SSO), la gestion des identités et l'accès conditionnel. Alternative aux solutions d'authentification traditionnelles.
|
||||||
|
- **Compétences requises** : Gestion d'identité cloud, SSO, intégration d'identité, sécurité des accès
|
||||||
|
|
||||||
|
#### AUTHZ et AUTHN
|
||||||
|
- **Utilisation** : Concepts fondamentaux de sécurité
|
||||||
|
- **Description** :
|
||||||
|
- **AUTHN (Authentication)** : Vérification de l'identité d'un utilisateur (qui êtes-vous ?)
|
||||||
|
- **AUTHZ (Authorization)** : Vérification des permissions d'accès (que pouvez-vous faire ?)
|
||||||
|
- **Compétences requises** : Principes de sécurité, gestion des identités, contrôle d'accès, modèles de permissions
|
||||||
|
|
||||||
|
#### Better Auth
|
||||||
|
- **Utilisation** : Bibliothèque d'authentification moderne
|
||||||
|
- **Description** : Solution d'authentification open-source offrant une API simple et flexible pour gérer l'authentification dans les applications web. Supporte OAuth, email/password, et autres méthodes d'authentification.
|
||||||
|
- **Compétences requises** : Développement web, authentification, OAuth, sécurité des applications
|
||||||
|
|
||||||
|
### Identité Décentralisée
|
||||||
|
|
||||||
|
#### DID et UCAN
|
||||||
|
- **Utilisation** : Identifiants décentralisés et système d'autorisation
|
||||||
|
- **Description** :
|
||||||
|
- **DID (Decentralized Identifiers)** : Identifiants uniques décentralisés qui permettent aux utilisateurs de contrôler leur identité sans dépendre d'une autorité centrale
|
||||||
|
- **UCAN (User Controlled Authorization Networks)** : Système d'autorisation basé sur des capacités (capabilities) où les utilisateurs contrôlent leurs propres permissions
|
||||||
|
- **Compétences requises** : Identité décentralisée, Web3, cryptographie, systèmes d'autorisation basés sur les capacités
|
||||||
|
|
||||||
|
#### VC (Verifiable Credentials)
|
||||||
|
- **Utilisation** : Credentials vérifiables pour l'identité numérique
|
||||||
|
- **Description** : Standard W3C pour les credentials numériques qui peuvent être vérifiés cryptographiquement. Permet de créer des identités numériques portables et vérifiables sans dépendre d'une autorité centrale.
|
||||||
|
- **Compétences requises** : Standards W3C, identité numérique, cryptographie, vérification de credentials, blockchain (optionnel)
|
||||||
|
|
||||||
|
### Protocoles d'Authentification
|
||||||
|
|
||||||
|
#### OpenID Connect
|
||||||
|
- **Utilisation** : Protocole d'authentification et d'autorisation
|
||||||
|
- **Description** : Couche d'identité construite sur OAuth 2.0 qui permet aux clients de vérifier l'identité d'un utilisateur basée sur l'authentification effectuée par un serveur d'autorisation. Standard de l'industrie pour l'authentification fédérée.
|
||||||
|
- **Compétences requises** : OAuth 2.0, protocoles d'authentification, intégration SSO, sécurité web
|
||||||
|
|
||||||
|
#### SPIFFE
|
||||||
|
- **Utilisation** : Identité sécurisée pour les workloads en production
|
||||||
|
- **Description** : SPIFFE (Secure Production Identity Framework For Everyone) fournit un cadre pour identifier et authentifier les workloads dans des environnements hétérogènes et distribués. Utilise des identités basées sur des certificats X.509 ou JWT.
|
||||||
|
- **Compétences requises** : Sécurité des microservices, identité des workloads, mTLS, infrastructure distribuée, Kubernetes, service mesh
|
||||||
|
|
||||||
## Technologies d'Infrastructure Décentralisée
|
## Technologies d'Infrastructure Décentralisée
|
||||||
|
|
||||||
### ThreeFold
|
### ThreeFold
|
||||||
@@ -1,295 +0,0 @@
|
|||||||
# Guide de déploiement
|
|
||||||
|
|
||||||
## Vue d'ensemble
|
|
||||||
|
|
||||||
Le projet peut être déployé de plusieurs façons :
|
|
||||||
- Docker Compose (recommandé pour la production)
|
|
||||||
- Docker simple
|
|
||||||
- Build statique avec serveur web
|
|
||||||
- Portainer (pour le Radar Business)
|
|
||||||
|
|
||||||
## Déploiement avec Docker
|
|
||||||
|
|
||||||
### Configuration Docker
|
|
||||||
|
|
||||||
Le projet contient plusieurs configurations Docker :
|
|
||||||
|
|
||||||
- `docker/Dockerfile` : Dockerfile principal avec multi-stage build
|
|
||||||
- `docker/docker-compose.yml` : Configuration de base
|
|
||||||
- `docker/docker-compose.labels.yml` : Labels pour le reverse proxy
|
|
||||||
- `docker/docker-compose.local.yml` : Configuration pour développement local
|
|
||||||
- `Dockerfile` (racine) : Dockerfile alternatif
|
|
||||||
- `docker-compose.yml` (racine) : Docker Compose alternatif
|
|
||||||
- `Dockerfile.business` : Dockerfile spécifique pour le Radar Business
|
|
||||||
- `docker-compose.business.yml` : Docker Compose pour le Radar Business (Portainer)
|
|
||||||
|
|
||||||
### Build de l'image Docker
|
|
||||||
|
|
||||||
#### Avec le Dockerfile principal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd docker
|
|
||||||
docker compose build
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Avec build args
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker build \
|
|
||||||
--build-arg BASE_PATH="/techradar" \
|
|
||||||
--build-arg UID=1000 \
|
|
||||||
--build-arg GID=1000 \
|
|
||||||
-f docker/Dockerfile \
|
|
||||||
-t techradar:latest \
|
|
||||||
.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Variables d'environnement
|
|
||||||
|
|
||||||
- **BASE_PATH** : Chemin de base pour l'application (défaut: `/`)
|
|
||||||
- **UID** : User ID pour l'utilisateur dans le conteneur (défaut: 1000)
|
|
||||||
- **GID** : Group ID pour l'utilisateur dans le conteneur (défaut: 1000)
|
|
||||||
|
|
||||||
### Démarrage avec Docker Compose
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd docker
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
L'application sera accessible sur le port 3000.
|
|
||||||
|
|
||||||
### Configuration du basePath
|
|
||||||
|
|
||||||
Le script `docker-entrypoint.sh` modifie dynamiquement le `basePath` dans `config.json` au démarrage du conteneur en utilisant la variable d'environnement `BASE_PATH`.
|
|
||||||
|
|
||||||
## Déploiement statique
|
|
||||||
|
|
||||||
### Build des fichiers statiques
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Les fichiers sont générés dans le répertoire `build/`.
|
|
||||||
|
|
||||||
### Servir avec un serveur web
|
|
||||||
|
|
||||||
#### Nginx
|
|
||||||
|
|
||||||
```nginx
|
|
||||||
server {
|
|
||||||
listen 80;
|
|
||||||
server_name coeurbox.syoul.fr;
|
|
||||||
root /chemin/vers/build;
|
|
||||||
index index.html;
|
|
||||||
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ /index.html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Apache
|
|
||||||
|
|
||||||
```apache
|
|
||||||
<VirtualHost *:80>
|
|
||||||
ServerName coeurbox.syoul.fr
|
|
||||||
DocumentRoot /chemin/vers/build
|
|
||||||
|
|
||||||
<Directory /chemin/vers/build>
|
|
||||||
Options Indexes FollowSymLinks
|
|
||||||
AllowOverride All
|
|
||||||
Require all granted
|
|
||||||
</Directory>
|
|
||||||
</VirtualHost>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Déploiement du Radar Business avec Portainer
|
|
||||||
|
|
||||||
Le Radar Business est déployé via Portainer en utilisant une stack Docker Compose.
|
|
||||||
|
|
||||||
### Configuration Portainer
|
|
||||||
|
|
||||||
1. **Créer une nouvelle stack** dans Portainer
|
|
||||||
2. **Nom de la stack** : `laplank-radar-business` (ou autre nom)
|
|
||||||
3. **Méthode** : Git Repository
|
|
||||||
4. **Repository URL** : URL du dépôt Git (ex: `https://git.open.us.org/AJR/TechradarDev.git`)
|
|
||||||
5. **Branch** : `dev-biz` (ou la branche appropriée)
|
|
||||||
6. **Compose path** : `docker-compose.business.yml`
|
|
||||||
|
|
||||||
### Configuration Docker Compose Business
|
|
||||||
|
|
||||||
Le fichier `docker-compose.business.yml` configure :
|
|
||||||
- **Port** : 3004 (mappé depuis le port 3000 du conteneur)
|
|
||||||
- **Image** : Construite depuis `Dockerfile.business`
|
|
||||||
- **Environnement** : `NODE_ENV=production`
|
|
||||||
- **Restart policy** : `unless-stopped`
|
|
||||||
|
|
||||||
### Dockerfile Business
|
|
||||||
|
|
||||||
Le `Dockerfile.business` :
|
|
||||||
- Utilise Node.js 20 Alpine
|
|
||||||
- Configure les variables d'environnement pour désactiver Husky
|
|
||||||
- Installe les dépendances avec `--ignore-scripts`
|
|
||||||
- Patche le package `aoe_technology_radar` pour inclure `gray-matter`
|
|
||||||
- Pré-installe `.techradar` pendant le build
|
|
||||||
- Applique la configuration business (`config-business.json`)
|
|
||||||
- Expose le port 3000
|
|
||||||
- Démarre via `scripts/start-business.sh`
|
|
||||||
|
|
||||||
### Authentification Git pour Portainer
|
|
||||||
|
|
||||||
Si le dépôt est privé, utiliser un **Personal Access Token** (Gitea) :
|
|
||||||
1. Créer un token dans Gitea avec les permissions de lecture
|
|
||||||
2. Utiliser l'URL : `https://<token>@git.open.us.org/AJR/TechradarDev.git`
|
|
||||||
|
|
||||||
### Mise à jour
|
|
||||||
|
|
||||||
Pour mettre à jour le Radar Business dans Portainer :
|
|
||||||
1. **Pull latest image** : Dans Portainer, utiliser "Pull latest image"
|
|
||||||
2. **Rebuild** : Ou reconstruire la stack depuis Git
|
|
||||||
|
|
||||||
## Déploiement avec Drone CI
|
|
||||||
|
|
||||||
Le projet est configuré pour le déploiement automatique via Drone CI (`.drone.yml`).
|
|
||||||
|
|
||||||
### Pipeline de déploiement
|
|
||||||
|
|
||||||
1. **Build** : Construction de l'image Docker
|
|
||||||
2. **Déploiement** : Lancement du conteneur avec Docker Compose
|
|
||||||
3. **Notification** : Envoi d'une notification Telegram
|
|
||||||
|
|
||||||
### Configuration Drone
|
|
||||||
|
|
||||||
Le pipeline utilise :
|
|
||||||
- Variables d'environnement dynamiques basées sur le dépôt Git
|
|
||||||
- Labels pour le reverse proxy (Traefik)
|
|
||||||
- Notifications Telegram en cas de succès/échec
|
|
||||||
|
|
||||||
### Variables d'environnement Drone
|
|
||||||
|
|
||||||
- `DRONE_REPO_OWNER` : Propriétaire du dépôt
|
|
||||||
- `DRONE_REPO_NAME` : Nom du dépôt
|
|
||||||
- `DRONE_COMMIT_BRANCH` : Branche du commit
|
|
||||||
|
|
||||||
Ces variables sont utilisées pour générer le `BASE_PATH` dynamiquement.
|
|
||||||
|
|
||||||
## Déploiement en production
|
|
||||||
|
|
||||||
### Étapes recommandées
|
|
||||||
|
|
||||||
1. **Préparer l'environnement**
|
|
||||||
```bash
|
|
||||||
git clone https://git.open.us.org/AJR/TechradarDev.git
|
|
||||||
cd TechradarDev
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **Configurer les variables**
|
|
||||||
- Définir `BASE_PATH` selon votre configuration
|
|
||||||
- Ajuster les ports si nécessaire
|
|
||||||
|
|
||||||
3. **Build et démarrage**
|
|
||||||
```bash
|
|
||||||
cd docker
|
|
||||||
docker compose -f docker-compose.yml -f docker-compose.labels.yml up -d --build
|
|
||||||
```
|
|
||||||
|
|
||||||
4. **Vérifier le déploiement**
|
|
||||||
- Accéder à l'URL configurée
|
|
||||||
- Vérifier les logs : `docker compose logs -f`
|
|
||||||
|
|
||||||
### Reverse proxy
|
|
||||||
|
|
||||||
Le projet est configuré pour fonctionner derrière un reverse proxy (Traefik) via les labels dans `docker-compose.labels.yml`.
|
|
||||||
|
|
||||||
### Sécurité
|
|
||||||
|
|
||||||
- Utiliser HTTPS en production
|
|
||||||
- Configurer les headers de sécurité appropriés
|
|
||||||
- Limiter l'accès si nécessaire
|
|
||||||
- Surveiller les logs
|
|
||||||
|
|
||||||
## Mise à jour
|
|
||||||
|
|
||||||
### Mettre à jour le contenu
|
|
||||||
|
|
||||||
1. Modifier les fichiers dans `radar/`
|
|
||||||
2. Rebuild l'image :
|
|
||||||
```bash
|
|
||||||
docker compose build
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mettre à jour les dépendances
|
|
||||||
|
|
||||||
1. Modifier `package.json` si nécessaire
|
|
||||||
2. Rebuild l'image complète
|
|
||||||
|
|
||||||
## Monitoring
|
|
||||||
|
|
||||||
### Logs Docker
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Voir les logs
|
|
||||||
docker compose logs -f
|
|
||||||
|
|
||||||
# Logs du dernier démarrage
|
|
||||||
docker compose logs --tail=100
|
|
||||||
```
|
|
||||||
|
|
||||||
### Santé de l'application
|
|
||||||
|
|
||||||
**Radar Principal** : Expose le port 3000. Vérifier avec :
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl http://localhost:3000/techradar
|
|
||||||
```
|
|
||||||
|
|
||||||
**Radar Business** : Expose le port 3004 (mappé depuis 3000). Vérifier avec :
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl http://localhost:3004/
|
|
||||||
```
|
|
||||||
|
|
||||||
Note : Le Radar Business est protégé par un mot de passe, donc la réponse peut être l'écran d'authentification.
|
|
||||||
|
|
||||||
## Rollback
|
|
||||||
|
|
||||||
En cas de problème, revenir à une version précédente :
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Arrêter le conteneur actuel
|
|
||||||
docker compose down
|
|
||||||
|
|
||||||
# Checkout une version précédente
|
|
||||||
git checkout <commit-hash>
|
|
||||||
|
|
||||||
# Rebuild et redémarrer
|
|
||||||
docker compose build
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
### Problème de basePath
|
|
||||||
|
|
||||||
Si l'application ne se charge pas correctement :
|
|
||||||
- Vérifier la variable `BASE_PATH`
|
|
||||||
- Vérifier les logs du conteneur
|
|
||||||
- Vérifier la configuration du reverse proxy
|
|
||||||
|
|
||||||
### Problème de permissions
|
|
||||||
|
|
||||||
Si des erreurs de permissions apparaissent :
|
|
||||||
- Vérifier les UID/GID dans le Dockerfile
|
|
||||||
- Vérifier les permissions des volumes montés
|
|
||||||
|
|
||||||
### Problème de build
|
|
||||||
|
|
||||||
Si le build échoue :
|
|
||||||
- Vérifier la version de Node.js
|
|
||||||
- Vérifier les dépendances npm
|
|
||||||
- Nettoyer le cache : `docker system prune -a`
|
|
||||||
|
|
||||||
@@ -1,205 +0,0 @@
|
|||||||
# Guide de développement
|
|
||||||
|
|
||||||
## Prérequis
|
|
||||||
|
|
||||||
- **Node.js** : Version 20 ou supérieure
|
|
||||||
- **npm** : Gestionnaire de paquets Node.js
|
|
||||||
- **Git** : Pour cloner et gérer le dépôt
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
### Cloner le dépôt
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone https://git.open.us.org/AJR/TechradarDev.git
|
|
||||||
cd TechradarDev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Installer les dépendances
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Cette commande installe le framework `aoe_technology_radar` depuis GitHub.
|
|
||||||
|
|
||||||
## Développement local
|
|
||||||
|
|
||||||
### Démarrer le serveur de développement (Radar Principal)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run serve
|
|
||||||
```
|
|
||||||
|
|
||||||
Le serveur démarre sur http://localhost:3000/techradar
|
|
||||||
|
|
||||||
### Démarrer le serveur de développement (Radar Business)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run serve-business
|
|
||||||
```
|
|
||||||
|
|
||||||
Le serveur démarre sur http://localhost:3004
|
|
||||||
|
|
||||||
**Note importante** : Le script `serve-business.sh` :
|
|
||||||
- Sauvegarde temporairement `config.json` et le dossier `radar/`
|
|
||||||
- Copie `radar-business/config-business.json` vers `config.json`
|
|
||||||
- Copie `radar-business/2025-01-15/` vers `radar/`
|
|
||||||
- Restaure la configuration originale à la sortie (Ctrl+C)
|
|
||||||
|
|
||||||
Le Radar Business est protégé par un mot de passe : `laplank-radar`
|
|
||||||
|
|
||||||
### Build de production
|
|
||||||
|
|
||||||
Pour générer les fichiers statiques :
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Les fichiers générés sont créés dans le répertoire `build/` (généré par le framework).
|
|
||||||
|
|
||||||
## Structure des fichiers radar
|
|
||||||
|
|
||||||
### Créer un nouveau blip
|
|
||||||
|
|
||||||
1. Créer un nouveau fichier Markdown dans le dossier de release approprié :
|
|
||||||
```
|
|
||||||
radar/2025-04-10/nom-technologie.md
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Utiliser le format suivant :
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
---
|
|
||||||
title: "Nom de la technologie"
|
|
||||||
ring: adopt|trial|assess|hold
|
|
||||||
quadrant: languages-and-frameworks|methods-and-patterns|platforms-and-aoe-services|tools
|
|
||||||
tags: [tag1, tag2]
|
|
||||||
---
|
|
||||||
|
|
||||||
Description de la technologie en Markdown.
|
|
||||||
|
|
||||||
## Avantages
|
|
||||||
|
|
||||||
- Point 1
|
|
||||||
- Point 2
|
|
||||||
|
|
||||||
## Cas d'usage
|
|
||||||
|
|
||||||
Description des cas d'usage chez AJR.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Format des métadonnées
|
|
||||||
|
|
||||||
- **title** (obligatoire) : Nom de la technologie
|
|
||||||
- **ring** (obligatoire) : `adopt`, `trial`, `assess`, ou `hold`
|
|
||||||
- **quadrant** (obligatoire) : Un des quatre quadrants définis dans `config.json`
|
|
||||||
- **tags** (optionnel) : Tableau de tags pour le filtrage
|
|
||||||
|
|
||||||
### Exemple complet
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
---
|
|
||||||
title: "Docker"
|
|
||||||
ring: trial
|
|
||||||
quadrant: tools
|
|
||||||
tags: [devops, ci/cd]
|
|
||||||
---
|
|
||||||
|
|
||||||
Docker est une plateforme de conteneurisation qui permet de packager des applications avec leurs dépendances.
|
|
||||||
|
|
||||||
## Avantages
|
|
||||||
|
|
||||||
- Isolation des environnements
|
|
||||||
- Portabilité entre environnements
|
|
||||||
- Facilite le déploiement
|
|
||||||
|
|
||||||
## Utilisation chez AJR
|
|
||||||
|
|
||||||
Nous utilisons Docker pour containeriser nos applications et faciliter le déploiement.
|
|
||||||
```
|
|
||||||
|
|
||||||
## Modifier un blip existant
|
|
||||||
|
|
||||||
1. Localiser le fichier dans le dossier de release approprié
|
|
||||||
2. Modifier le contenu Markdown
|
|
||||||
3. Si nécessaire, modifier les métadonnées (ring, quadrant, tags)
|
|
||||||
4. Tester localement avec `npm run serve`
|
|
||||||
|
|
||||||
## Créer une nouvelle release
|
|
||||||
|
|
||||||
1. Créer un nouveau dossier avec la date au format `YYYY-MM-DD` :
|
|
||||||
```bash
|
|
||||||
mkdir radar/2025-07-15
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Copier les blips pertinents depuis la release précédente ou créer de nouveaux blips
|
|
||||||
|
|
||||||
3. Mettre à jour les blips existants si nécessaire
|
|
||||||
|
|
||||||
## Ajouter des images
|
|
||||||
|
|
||||||
1. Placer les images dans `public/images/`
|
|
||||||
2. Référencer dans les fichiers Markdown :
|
|
||||||
|
|
||||||
```markdown
|
|
||||||

|
|
||||||
```
|
|
||||||
|
|
||||||
## Personnalisation CSS
|
|
||||||
|
|
||||||
Le fichier `custom.css` permet d'ajouter des styles personnalisés. Les styles sont appliqués globalement à l'application.
|
|
||||||
|
|
||||||
## Débogage
|
|
||||||
|
|
||||||
### Vérifier les erreurs de format
|
|
||||||
|
|
||||||
Le framework valide les fichiers Markdown. En cas d'erreur :
|
|
||||||
- Vérifier la syntaxe YAML front matter
|
|
||||||
- Vérifier que les valeurs de `ring` et `quadrant` correspondent aux valeurs définies dans `config.json`
|
|
||||||
- Vérifier la syntaxe Markdown
|
|
||||||
|
|
||||||
### Problèmes courants
|
|
||||||
|
|
||||||
1. **Erreur de parsing YAML** : Vérifier les guillemets et l'indentation
|
|
||||||
2. **Blip non affiché** : Vérifier que le quadrant et le ring sont corrects
|
|
||||||
3. **Images non chargées** : Vérifier le chemin relatif depuis `public/`
|
|
||||||
|
|
||||||
## Workflow recommandé
|
|
||||||
|
|
||||||
1. Créer une branche Git pour vos modifications
|
|
||||||
2. Ajouter/modifier les fichiers radar
|
|
||||||
3. Tester localement avec `npm run serve`
|
|
||||||
4. Vérifier l'affichage et le formatage
|
|
||||||
5. Commiter et pousser les changements
|
|
||||||
6. Créer une pull request si applicable
|
|
||||||
|
|
||||||
## Commandes utiles
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Installer les dépendances
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# Démarrer le serveur de développement
|
|
||||||
npm run serve
|
|
||||||
|
|
||||||
# Build de production
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# Vérifier les fichiers modifiés
|
|
||||||
git status
|
|
||||||
|
|
||||||
# Voir les différences
|
|
||||||
git diff
|
|
||||||
```
|
|
||||||
|
|
||||||
## Intégration continue
|
|
||||||
|
|
||||||
Le projet utilise Drone CI pour l'intégration continue. Voir `.drone.yml` pour la configuration.
|
|
||||||
|
|
||||||
Les builds automatiques :
|
|
||||||
- Construisent l'image Docker
|
|
||||||
- Déploient sur l'environnement de test
|
|
||||||
- Envoient des notifications Telegram
|
|
||||||
|
|
||||||
@@ -1,214 +0,0 @@
|
|||||||
# Guide d'Utilisation du Radar Business
|
|
||||||
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
Le Radar Business est un outil stratégique pour analyser les technologies de l'écosystème Laplank/Duniter/Ğ1 sous l'angle business. Il permet d'identifier les patterns, les risques, les opportunités et de définir une stratégie d'évolution technique.
|
|
||||||
|
|
||||||
## Accès
|
|
||||||
|
|
||||||
Le Radar Business est accessible sur le **port 3004** et est protégé par un **mot de passe** : `laplank-radar`
|
|
||||||
|
|
||||||
L'authentification est gérée côté client via `localStorage` (session valide jusqu'à fermeture du navigateur).
|
|
||||||
|
|
||||||
## Structure du Radar
|
|
||||||
|
|
||||||
### Quadrants
|
|
||||||
|
|
||||||
Le radar est organisé en 4 quadrants business :
|
|
||||||
|
|
||||||
1. **Technologies Différenciantes** : Créent un avantage concurrentiel
|
|
||||||
2. **Technologies de Commodité** : Nécessaires mais non différenciantes
|
|
||||||
3. **Technologies à Risque** : Obsolètes, coûteuses, à migrer
|
|
||||||
4. **Technologies Émergentes** : Opportunités futures
|
|
||||||
|
|
||||||
### Anneaux (Rings)
|
|
||||||
|
|
||||||
Chaque technologie est classée dans un des 4 anneaux :
|
|
||||||
|
|
||||||
1. **Core** : Technologies critiques pour le business model
|
|
||||||
2. **Strategic** : Technologies stratégiques pour la croissance
|
|
||||||
3. **Support** : Technologies de support nécessaires
|
|
||||||
4. **Legacy** : Technologies à remplacer
|
|
||||||
|
|
||||||
## Métadonnées Business
|
|
||||||
|
|
||||||
Chaque technologie (blip) contient des métadonnées business :
|
|
||||||
|
|
||||||
### Métadonnées Standard
|
|
||||||
|
|
||||||
- **title** : Nom de la technologie
|
|
||||||
- **ring** : Anneau (core, strategic, support, legacy)
|
|
||||||
- **quadrant** : Quadrant business
|
|
||||||
- **tags** : Tags pour le filtrage
|
|
||||||
|
|
||||||
### Métadonnées Business
|
|
||||||
|
|
||||||
- **businessImpact** : Impact sur le business (high, medium, low)
|
|
||||||
- **costToReplace** : Coût estimé de remplacement en euros
|
|
||||||
- **revenueImpact** : Impact sur les revenus (direct, indirect, none)
|
|
||||||
- **riskLevel** : Niveau de risque (high, medium, low)
|
|
||||||
- **maintenanceCost** : Coût annuel de maintenance en euros
|
|
||||||
- **differentiation** : Capacité de différenciation (high, medium, low)
|
|
||||||
|
|
||||||
### Métadonnées Compétences
|
|
||||||
|
|
||||||
- **competencyLevel** : Niveau moyen de compétence (expert, intermediate, beginner)
|
|
||||||
- **teamCoverage** : Nombre de personnes maîtrisant la technologie
|
|
||||||
- **skillGap** : Risque de compétence manquante (high, medium, low)
|
|
||||||
|
|
||||||
## Pages de Stratégie
|
|
||||||
|
|
||||||
Le Radar Business inclut trois pages de stratégie accessibles depuis le header :
|
|
||||||
|
|
||||||
1. **Stratégie Technique** : Vision et roadmap technique pour l'évolution du stack
|
|
||||||
2. **Business** : Analyse stratégique business autour de la dataviz et des flux économiques
|
|
||||||
3. **DataViz Expert** : Opportunités supplémentaires en dataviz (Smart Cities, Green Tech, KM, Cybersecurity)
|
|
||||||
|
|
||||||
Ces pages sont générées dynamiquement via `public/strategie-script.js` qui convertit le contenu Markdown en HTML.
|
|
||||||
|
|
||||||
### Contenu des Pages
|
|
||||||
|
|
||||||
Le contenu des pages de stratégie est intégré directement dans `public/strategie-script.js` :
|
|
||||||
- `strategie-evolution-technique.md` : Stratégie d'évolution technique
|
|
||||||
- `strategie-business.md` : Analyse business et opportunités
|
|
||||||
- `opportunites-dataviz.md` et `opportunites-dataviz-details.md` : Opportunités DataViz
|
|
||||||
|
|
||||||
Pour modifier le contenu, éditer directement `public/strategie-script.js` (sections `markdownContent`).
|
|
||||||
|
|
||||||
## Utilisation
|
|
||||||
|
|
||||||
### Ajouter une Nouvelle Technologie
|
|
||||||
|
|
||||||
1. Créer un fichier Markdown dans `radar-business/2025-01-15/`
|
|
||||||
2. Utiliser le format défini dans `radar-business/FORMAT-BLIP.md`
|
|
||||||
3. Remplir toutes les métadonnées
|
|
||||||
4. Ajouter la description et les sections recommandées
|
|
||||||
|
|
||||||
### Modifier une Technologie Existante
|
|
||||||
|
|
||||||
1. Ouvrir le fichier Markdown correspondant
|
|
||||||
2. Modifier les métadonnées ou le contenu
|
|
||||||
3. Mettre à jour la date si changement significatif
|
|
||||||
|
|
||||||
### Analyser le Radar
|
|
||||||
|
|
||||||
1. Exécuter le script d'analyse :
|
|
||||||
```bash
|
|
||||||
node scripts/analyze-business-metrics.js
|
|
||||||
```
|
|
||||||
2. Consulter le rapport généré dans `docs/analyse-strategique.md`
|
|
||||||
|
|
||||||
### Générer les Blips
|
|
||||||
|
|
||||||
Pour régénérer les blips depuis `technologies-duniter.md` :
|
|
||||||
|
|
||||||
```bash
|
|
||||||
node scripts/extract-technologies.js
|
|
||||||
```
|
|
||||||
|
|
||||||
## Interprétation des Résultats
|
|
||||||
|
|
||||||
### Technologies Critiques
|
|
||||||
|
|
||||||
Les technologies en ring "core" avec businessImpact "high" sont critiques. Elles nécessitent :
|
|
||||||
- Maintenance proactive
|
|
||||||
- Formation continue
|
|
||||||
- Documentation exhaustive
|
|
||||||
- Plans de continuité
|
|
||||||
|
|
||||||
### Technologies à Risque
|
|
||||||
|
|
||||||
Les technologies avec riskLevel "high" ou skillGap "high" présentent des risques. Actions recommandées :
|
|
||||||
- Formation ou recrutement
|
|
||||||
- Documentation
|
|
||||||
- Plan de migration si nécessaire
|
|
||||||
|
|
||||||
### Opportunités d'Innovation
|
|
||||||
|
|
||||||
Les technologies émergentes avec differentiation "high" sont des opportunités. Actions :
|
|
||||||
- POC (Proof of Concept)
|
|
||||||
- Évaluation de l'impact
|
|
||||||
- Adoption progressive
|
|
||||||
|
|
||||||
### Optimisation des Coûts
|
|
||||||
|
|
||||||
Les technologies de commodité avec maintenanceCost élevé peuvent être optimisées :
|
|
||||||
- Standardisation
|
|
||||||
- Automatisation
|
|
||||||
- Réduction des coûts
|
|
||||||
|
|
||||||
## Méthodologie d'Analyse
|
|
||||||
|
|
||||||
### 1. Collecte des Données
|
|
||||||
|
|
||||||
- Inventorier toutes les technologies
|
|
||||||
- Collecter les métadonnées business
|
|
||||||
- Analyser les compétences de l'équipe
|
|
||||||
|
|
||||||
### 2. Classification
|
|
||||||
|
|
||||||
- Classer par quadrant business
|
|
||||||
- Classer par ring (core, strategic, support, legacy)
|
|
||||||
- Évaluer les métadonnées
|
|
||||||
|
|
||||||
### 3. Analyse
|
|
||||||
|
|
||||||
- Identifier les patterns
|
|
||||||
- Calculer les métriques
|
|
||||||
- Identifier les risques et opportunités
|
|
||||||
|
|
||||||
### 4. Recommandations
|
|
||||||
|
|
||||||
- Prioriser les actions
|
|
||||||
- Définir la roadmap
|
|
||||||
- Planifier les investissements
|
|
||||||
|
|
||||||
## Templates
|
|
||||||
|
|
||||||
### Template de Blip
|
|
||||||
|
|
||||||
Voir `radar-business/FORMAT-BLIP.md` pour le template complet.
|
|
||||||
|
|
||||||
### Template d'Analyse
|
|
||||||
|
|
||||||
Le script `analyze-business-metrics.js` génère automatiquement un rapport d'analyse.
|
|
||||||
|
|
||||||
## Maintenance
|
|
||||||
|
|
||||||
### Mise à Jour Régulière
|
|
||||||
|
|
||||||
- Mettre à jour les métadonnées trimestriellement
|
|
||||||
- Réviser les classifications annuellement
|
|
||||||
- Mettre à jour les coûts et risques
|
|
||||||
|
|
||||||
### Révision Stratégique
|
|
||||||
|
|
||||||
- Révision annuelle de la stratégie
|
|
||||||
- Ajustement des priorités
|
|
||||||
- Mise à jour de la roadmap
|
|
||||||
|
|
||||||
## Déploiement
|
|
||||||
|
|
||||||
Le Radar Business est déployé via Docker et Portainer :
|
|
||||||
|
|
||||||
- **Dockerfile** : `Dockerfile.business`
|
|
||||||
- **Docker Compose** : `docker-compose.business.yml`
|
|
||||||
- **Port** : 3004 (mappé depuis le port 3000 du conteneur)
|
|
||||||
- **Base path** : `/` (racine, pas de sous-chemin)
|
|
||||||
|
|
||||||
Voir [deploiement.md](./deploiement.md) pour les détails complets.
|
|
||||||
|
|
||||||
## Ressources
|
|
||||||
|
|
||||||
- **Format des blips** : `radar-business/FORMAT-BLIP.md`
|
|
||||||
- **Configuration** : `radar-business/config-business.json`
|
|
||||||
- **Script de stratégie** : `public/strategie-script.js`
|
|
||||||
- **Analyse stratégique** : `docs/analyse-strategique.md`
|
|
||||||
- **Stratégie d'évolution** : `docs/strategie-evolution-technique.md`
|
|
||||||
- **Stratégie business** : `docs/strategie-business.md`
|
|
||||||
- **Opportunités DataViz** : `docs/opportunites-dataviz.md` et `docs/opportunites-dataviz-details.md`
|
|
||||||
|
|
||||||
## Support
|
|
||||||
|
|
||||||
Pour toute question ou contribution, consulter la documentation ou contacter l'équipe technique.
|
|
||||||
|
|
||||||
640
public/_team-content
Normal file
640
public/_team-content
Normal file
@@ -0,0 +1,640 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Équipe & Technologies - Laplank</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||||
|
<script>
|
||||||
|
console.log('🔧 TEAM.HTML: Scripts externes chargés');
|
||||||
|
console.log('🔧 Cytoscape disponible:', typeof cytoscape !== 'undefined');
|
||||||
|
console.log('🔧 ECharts disponible:', typeof echarts !== 'undefined');
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background: #1a4d3a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(26, 77, 58, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #4ade80;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
border: 2px solid #4ade80;
|
||||||
|
color: #4ade80;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button:hover {
|
||||||
|
background: rgba(74, 222, 128, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active {
|
||||||
|
background: #4ade80;
|
||||||
|
color: #1a4d3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
background: rgba(26, 77, 58, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network-graph {
|
||||||
|
width: 100%;
|
||||||
|
height: 700px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#congestion-matrix {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#genesis-team {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.genesis-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: rgba(74, 222, 128, 0.1);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #a0a0a0;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card {
|
||||||
|
background: rgba(26, 77, 58, 0.5);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-availability {
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-tag {
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.4);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-box {
|
||||||
|
background: rgba(255, 68, 68, 0.2);
|
||||||
|
border: 1px solid rgba(255, 68, 68, 0.5);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-title {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uncovered-tech {
|
||||||
|
background: rgba(255, 68, 68, 0.1);
|
||||||
|
border-left: 3px solid #ff6b6b;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
|
<a href="/" style="color: #4ade80; text-decoration: none; font-size: 18px; font-weight: bold;">← Retour au Radar</a>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<h1>👥 Équipe & Technologies</h1>
|
||||||
|
<p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab-button active" onclick="showTab('network')">Graphe Réseau</button>
|
||||||
|
<button class="tab-button" onclick="showTab('congestion')">Matrice Congestion</button>
|
||||||
|
<button class="tab-button" onclick="showTab('genesis')">Équipe Genèse MVP</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="network-tab" class="tab-content active">
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #ff4444;"></div>
|
||||||
|
<span>Core (Critique)</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #ff8800;"></div>
|
||||||
|
<span>Strategic</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #4488ff;"></div>
|
||||||
|
<span>Support</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #88ff88;"></div>
|
||||||
|
<span>Membres</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="network-graph"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="congestion-tab" class="tab-content">
|
||||||
|
<h2 style="margin-bottom: 20px;">Matrice de Congestion - Technologies Core</h2>
|
||||||
|
<div id="congestion-matrix"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="genesis-tab" class="tab-content">
|
||||||
|
<div id="genesis-team">
|
||||||
|
<div class="loading">Chargement des données...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
console.log('🚀 TEAM.HTML: Script chargé, initialisation...');
|
||||||
|
|
||||||
|
let data = null;
|
||||||
|
let networkCy = null;
|
||||||
|
let congestionChart = null;
|
||||||
|
|
||||||
|
console.log('📋 TEAM.HTML: Fonction loadData() appelée');
|
||||||
|
|
||||||
|
// Charger les données
|
||||||
|
async function loadData() {
|
||||||
|
try {
|
||||||
|
console.log('🔄 Chargement des données équipe depuis /team-visualization-data.json');
|
||||||
|
const response = await fetch('/team-visualization-data.json');
|
||||||
|
console.log('📡 Réponse reçue:', response.status, response.statusText);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
data = await response.json();
|
||||||
|
console.log('✅ Données chargées:', Object.keys(data));
|
||||||
|
console.log('📊 Nombre de nœuds réseau:', data.network?.nodes?.length || 0);
|
||||||
|
console.log('📊 Données matrice congestion:', data.congestionMatrix?.length || 0);
|
||||||
|
console.log('📊 Données équipe genèse:', data.genesisTeam ? 'présentes' : 'absentes');
|
||||||
|
|
||||||
|
initVisualizations();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Erreur lors du chargement des données:', error);
|
||||||
|
|
||||||
|
// Fallback : afficher un message d'information si les données ne se chargent pas
|
||||||
|
const fallbackMessage = `
|
||||||
|
<div style="padding: 20px; background: rgba(255, 152, 0, 0.1); border: 1px solid #ff9800; border-radius: 8px; margin: 20px 0;">
|
||||||
|
<h3 style="color: #ff9800; margin-top: 0;">🔄 Chargement des données...</h3>
|
||||||
|
<p>Les visualisations équipe se chargent. Si elles n'apparaissent pas :</p>
|
||||||
|
<ul>
|
||||||
|
<li>Vérifiez la console du navigateur (F12) pour les erreurs</li>
|
||||||
|
<li>Assurez-vous que <code>team-visualization-data.json</code> est accessible</li>
|
||||||
|
<li>Le script <code>generate-team-visualization-data.js</code> doit avoir été exécuté</li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Erreur détectée :</strong> ${error.message}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Afficher le message de fallback dans toutes les sections
|
||||||
|
document.getElementById('network-graph').innerHTML = fallbackMessage;
|
||||||
|
document.getElementById('congestion-matrix').innerHTML = fallbackMessage;
|
||||||
|
document.getElementById('genesis-team').innerHTML = fallbackMessage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialiser les visualisations
|
||||||
|
function initVisualizations() {
|
||||||
|
console.log('🎨 TEAM.HTML: initVisualizations() appelée');
|
||||||
|
initNetworkGraph();
|
||||||
|
initCongestionMatrix();
|
||||||
|
initGenesisTeam();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Graphe réseau
|
||||||
|
function initNetworkGraph() {
|
||||||
|
console.log('📊 TEAM.HTML: initNetworkGraph() appelée');
|
||||||
|
if (!data || !data.network) {
|
||||||
|
console.log('⚠️ TEAM.HTML: Pas de données réseau');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
networkCy = cytoscape({
|
||||||
|
container: document.getElementById('network-graph'),
|
||||||
|
elements: data.network,
|
||||||
|
style: [
|
||||||
|
{
|
||||||
|
selector: 'node[type="technology"]',
|
||||||
|
style: {
|
||||||
|
'background-color': 'data(color)',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(ele) {
|
||||||
|
const coverage = ele.data('coverage') || 0;
|
||||||
|
return Math.max(30, 30 + (coverage * 8));
|
||||||
|
},
|
||||||
|
'height': function(ele) {
|
||||||
|
const coverage = ele.data('coverage') || 0;
|
||||||
|
return Math.max(30, 30 + (coverage * 8));
|
||||||
|
},
|
||||||
|
'color': '#fff',
|
||||||
|
'font-size': '12px',
|
||||||
|
'text-outline-width': 2,
|
||||||
|
'text-outline-color': '#000',
|
||||||
|
'text-wrap': 'wrap',
|
||||||
|
'text-max-width': 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'node[type="member"]',
|
||||||
|
style: {
|
||||||
|
'background-color': '#88ff88',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(ele) {
|
||||||
|
const availability = ele.data('availability') || 0;
|
||||||
|
return Math.max(25, 25 + (availability / 3));
|
||||||
|
},
|
||||||
|
'height': function(ele) {
|
||||||
|
const availability = ele.data('availability') || 0;
|
||||||
|
return Math.max(25, 25 + (availability / 3));
|
||||||
|
},
|
||||||
|
'color': '#1a4d3a',
|
||||||
|
'font-size': '11px',
|
||||||
|
'font-weight': 'bold',
|
||||||
|
'shape': 'ellipse'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'edge',
|
||||||
|
style: {
|
||||||
|
'width': function(ele) {
|
||||||
|
return 1 + (ele.data('weight') || 0.5);
|
||||||
|
},
|
||||||
|
'line-color': '#999',
|
||||||
|
'opacity': 0.6,
|
||||||
|
'curve-style': 'bezier'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
name: 'cose-bilkent',
|
||||||
|
nodeDimensionsIncludeLabels: true,
|
||||||
|
idealEdgeLength: 100,
|
||||||
|
nodeRepulsion: 4500,
|
||||||
|
nestingFactor: 0.1,
|
||||||
|
gravity: 0.25,
|
||||||
|
numIter: 2500,
|
||||||
|
tile: true,
|
||||||
|
animate: true,
|
||||||
|
animationDuration: 1000
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tooltip sur survol
|
||||||
|
networkCy.on('mouseover', 'node', function(evt) {
|
||||||
|
const node = evt.target;
|
||||||
|
const data = node.data();
|
||||||
|
let tooltip = '';
|
||||||
|
|
||||||
|
if (data.type === 'technology') {
|
||||||
|
tooltip = `${data.label}\n` +
|
||||||
|
`Ring: ${data.ring}\n` +
|
||||||
|
`Couverture: ${data.coverage} personne(s)\n` +
|
||||||
|
`Impact: ${data.businessImpact}\n` +
|
||||||
|
`Gap: ${data.skillGap}`;
|
||||||
|
} else {
|
||||||
|
tooltip = `${data.label}\n` +
|
||||||
|
`Disponibilité: ${data.availability}%\n` +
|
||||||
|
`Niveau: ${data.seniority}\n` +
|
||||||
|
(data.role ? `Rôle: ${data.role}` : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
node.tooltip = tooltip;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrice de congestion
|
||||||
|
function initCongestionMatrix() {
|
||||||
|
console.log('📈 TEAM.HTML: initCongestionMatrix() appelée');
|
||||||
|
if (!data || !data.congestionMatrix) {
|
||||||
|
console.log('⚠️ TEAM.HTML: Pas de données matrice congestion');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart = echarts.init(document.getElementById('congestion-matrix'));
|
||||||
|
congestionChart = chart;
|
||||||
|
|
||||||
|
const techs = data.congestionMatrix.map(r => r.technology);
|
||||||
|
const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];
|
||||||
|
|
||||||
|
const heatmapData = [];
|
||||||
|
const scatterData = [];
|
||||||
|
|
||||||
|
data.congestionMatrix.forEach((row, i) => {
|
||||||
|
row.members.forEach((member, j) => {
|
||||||
|
if (member.hasSkill) {
|
||||||
|
heatmapData.push([j, i, member.availability]);
|
||||||
|
scatterData.push({
|
||||||
|
value: [j, i],
|
||||||
|
member: member.fullName || member.member,
|
||||||
|
tech: row.technology,
|
||||||
|
availability: member.availability
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: 'Disponibilité des membres sur les technologies Core',
|
||||||
|
left: 'center',
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function(params) {
|
||||||
|
if (params.data && params.data.member) {
|
||||||
|
return `${params.data.member}<br/>` +
|
||||||
|
`Technologie: ${params.data.tech}<br/>` +
|
||||||
|
`Disponibilité: ${params.data.availability}%`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
height: '60%',
|
||||||
|
top: '15%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: members,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 45,
|
||||||
|
color: '#e0e0e0',
|
||||||
|
fontSize: 11
|
||||||
|
},
|
||||||
|
axisLine: { lineStyle: { color: '#4ade80' } }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: techs,
|
||||||
|
axisLabel: { color: '#e0e0e0' },
|
||||||
|
axisLine: { lineStyle: { color: '#4ade80' } }
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
calculable: true,
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
bottom: '5%',
|
||||||
|
inRange: {
|
||||||
|
color: ['#1a4d3a', '#4ade80', '#86efac']
|
||||||
|
},
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Disponibilité',
|
||||||
|
type: 'scatter',
|
||||||
|
data: scatterData,
|
||||||
|
symbolSize: function(data) {
|
||||||
|
return 15 + (data[2] || 0) / 2;
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4ade80',
|
||||||
|
borderColor: '#1a4d3a',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.data.availability + '%';
|
||||||
|
},
|
||||||
|
color: '#1a4d3a',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
// Redimensionner au resize
|
||||||
|
window.addEventListener('resize', () => chart.resize());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Équipe de genèse
|
||||||
|
function initGenesisTeam() {
|
||||||
|
console.log('👥 TEAM.HTML: initGenesisTeam() appelée');
|
||||||
|
if (!data || !data.genesisTeam) {
|
||||||
|
console.log('⚠️ TEAM.HTML: Pas de données équipe genèse');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const genesis = data.genesisTeam;
|
||||||
|
const html = `
|
||||||
|
<div class="genesis-stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.totalMembers}</div>
|
||||||
|
<div class="stat-label">Membres sélectionnés</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.totalCapacity}%</div>
|
||||||
|
<div class="stat-label">Capacité totale</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.averageAvailability}%</div>
|
||||||
|
<div class="stat-label">Disponibilité moyenne</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.coveredTechnologies}/${genesis.totalCoreTechnologies}</div>
|
||||||
|
<div class="stat-label">Technologies couvertes</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 style="margin-bottom: 20px; color: #4ade80;">Membres de l'équipe de genèse</h2>
|
||||||
|
|
||||||
|
${genesis.team.length > 0 ? genesis.team.map(member => `
|
||||||
|
<div class="member-card">
|
||||||
|
<div class="member-header">
|
||||||
|
<div>
|
||||||
|
<div class="member-name">${member.fullName || member.member}</div>
|
||||||
|
<div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
|
||||||
|
${member.role || ''} • ${member.seniority} • ${member.coverage} technologie(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-availability">${member.availability}% dispo</div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-list">
|
||||||
|
${member.technologies.map(tech => `
|
||||||
|
<span class="tech-tag">${tech.title}</span>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('') : '<p style="color: #a0a0a0;">Aucun membre ne répond aux critères (disponibilité >= 50%).</p>'}
|
||||||
|
|
||||||
|
${genesis.uncoveredTechnologies.length > 0 ? `
|
||||||
|
<div class="warning-box">
|
||||||
|
<div class="warning-title">⚠️ Technologies Core non couvertes</div>
|
||||||
|
<p style="margin-bottom: 10px;">Ces technologies critiques ne sont pas maîtrisées par l'équipe de genèse :</p>
|
||||||
|
${genesis.uncoveredTechnologies.map(tech => `
|
||||||
|
<div class="uncovered-tech">
|
||||||
|
<strong>${tech.title}</strong>
|
||||||
|
<div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
|
||||||
|
Impact: ${tech.businessImpact} • Gap: ${tech.skillGap} • Couverture actuelle: ${tech.teamCoverage} personne(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('genesis-team').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation par onglets
|
||||||
|
function showTab(tabName) {
|
||||||
|
// Désactiver tous les onglets
|
||||||
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.tab-button').forEach(btn => {
|
||||||
|
btn.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activer l'onglet sélectionné
|
||||||
|
document.getElementById(`${tabName}-tab`).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
|
||||||
|
// Redimensionner les graphiques si nécessaire
|
||||||
|
if (tabName === 'congestion' && congestionChart) {
|
||||||
|
setTimeout(() => congestionChart.resize(), 100);
|
||||||
|
}
|
||||||
|
if (tabName === 'network' && networkCy) {
|
||||||
|
setTimeout(() => networkCy.resize(), 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger au démarrage
|
||||||
|
console.log('🚀 TEAM.HTML: Démarrage - appel loadData()');
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@@ -9,7 +9,8 @@
|
|||||||
|
|
||||||
function initStrategyLinks() {
|
function initStrategyLinks() {
|
||||||
addStrategyLinkToFooter();
|
addStrategyLinkToFooter();
|
||||||
addStrategyLinkToHeader();
|
// DÉSACTIVÉ: addStrategyLinkToHeader() - Les liens sont maintenant gérés par Navigation.tsx
|
||||||
|
// addStrategyLinkToHeader();
|
||||||
handleStrategyRoute();
|
handleStrategyRoute();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,8 +95,8 @@
|
|||||||
<h1>Stratégie d'Évolution Technique - Laplank</h1>
|
<h1>Stratégie d'Évolution Technique - Laplank</h1>
|
||||||
<p><strong>Date de mise à jour</strong> : 02/12/2025</p>
|
<p><strong>Date de mise à jour</strong> : 02/12/2025</p>
|
||||||
<p>La stratégie complète est disponible dans le dépôt Git :</p>
|
<p>La stratégie complète est disponible dans le dépôt Git :</p>
|
||||||
<p><a href="https://git.open.us.org/AJR/TechradarDev/-/blob/dev-biz/docs/strategie-evolution-technique.md" target="_blank">Voir la stratégie sur GitLab</a></p>
|
<p><a href="https://git.open.us.org/AJR/TechradarDev/-/blob/dev-biz/docs/data/strategie-evolution-technique.md" target="_blank">Voir la stratégie sur GitLab</a></p>
|
||||||
<p>Ou consultez le fichier local : <code>docs/strategie-evolution-technique.md</code></p>
|
<p>Ou consultez le fichier local : <code>docs/data/strategie-evolution-technique.md</code></p>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -123,20 +124,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addStrategyLinkToHeader() {
|
// FONCTION DÉSACTIVÉE: Les liens de navigation sont maintenant gérés par Navigation.tsx
|
||||||
// Chercher le header ou la navigation
|
// Cette fonction créait des doublons dans le header
|
||||||
const header = document.querySelector('header') || document.querySelector('nav') || document.querySelector('[class*="header"]') || document.querySelector('[class*="nav"]');
|
// function addStrategyLinkToHeader() {
|
||||||
|
// ... code désactivé ...
|
||||||
if (header) {
|
// }
|
||||||
const strategyLink = document.createElement('a');
|
|
||||||
strategyLink.href = '/strategie';
|
|
||||||
strategyLink.textContent = 'Stratégie';
|
|
||||||
strategyLink.style.marginLeft = '15px';
|
|
||||||
strategyLink.style.color = '#2ecc71';
|
|
||||||
strategyLink.style.textDecoration = 'none';
|
|
||||||
strategyLink.style.fontWeight = 'bold';
|
|
||||||
|
|
||||||
header.appendChild(strategyLink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -1,5 +1,99 @@
|
|||||||
// Script pour la gestion des pages de stratégie
|
// SCRIPT ULTRA-PROTECTEUR CONTRE LES PAGES ÉQUIPE
|
||||||
(function() {
|
(function() {
|
||||||
|
// VÉRIFICATION ABSOLUE - S'EXÉCUTE AVANT TOUT
|
||||||
|
if (window.location.pathname === '/team' ||
|
||||||
|
window.location.pathname.startsWith('/team/') ||
|
||||||
|
window.location.href.includes('/team')) {
|
||||||
|
console.log('🚫 INTERDICTION TOTALE - Page équipe détectée, arrêt du script');
|
||||||
|
// Bloquer complètement l'exécution
|
||||||
|
window.__blockAllScripts = true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marquer qu'on autorise les autres scripts
|
||||||
|
window.__allowScripts = true;
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Script pour la gestion des pages de stratégie UNIQUEMENT SI AUTORISÉ
|
||||||
|
if (!window.__blockAllScripts && !window.__blockTeamPages) {
|
||||||
|
|
||||||
|
// PROTECTION : Ne pas interférer avec les pages Next.js
|
||||||
|
function shouldSkipExecution() {
|
||||||
|
// Vérifier les indicateurs Next.js présents dès le chargement
|
||||||
|
if (document.querySelector('[data-reactroot]') ||
|
||||||
|
window.__NEXT_DATA__ ||
|
||||||
|
window.next ||
|
||||||
|
document.querySelector('#__next') ||
|
||||||
|
document.querySelector('[data-react-helmet]')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vérifier immédiatement
|
||||||
|
if (shouldSkipExecution()) {
|
||||||
|
console.log('🚫 Script stratégie désactivé sur page Next.js');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Différer la vérification au cas où Next.js se charge après
|
||||||
|
setTimeout(function() {
|
||||||
|
if (shouldSkipExecution()) {
|
||||||
|
console.log('🚫 Script stratégie désactivé après délai (page Next.js détectée)');
|
||||||
|
// Arrêter toute exécution en cours
|
||||||
|
if (window.initStrategyTimeout) clearTimeout(window.initStrategyTimeout);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// Protection contre Fast Refresh : ignorer les tentatives de hot-reload
|
||||||
|
// Intercepter et ignorer les requêtes webpack hot-update pour éviter les rechargements en boucle
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// Intercepter fetch
|
||||||
|
const originalFetch = window.fetch;
|
||||||
|
window.fetch = function(...args) {
|
||||||
|
const url = args[0];
|
||||||
|
if (typeof url === 'string' && url.includes('webpack.hot-update.json')) {
|
||||||
|
// Ignorer silencieusement les requêtes webpack hot-update
|
||||||
|
return Promise.resolve(new Response(JSON.stringify({}), {
|
||||||
|
status: 200,
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return originalFetch.apply(this, args);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Intercepter XMLHttpRequest (utilisé par Next.js pour Fast Refresh)
|
||||||
|
const originalXHROpen = XMLHttpRequest.prototype.open;
|
||||||
|
XMLHttpRequest.prototype.open = function(method, url, ...rest) {
|
||||||
|
if (typeof url === 'string' && url.includes('webpack.hot-update.json')) {
|
||||||
|
// Créer un faux XHR qui ne fait rien
|
||||||
|
this._shouldIgnore = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return originalXHROpen.apply(this, [method, url, ...rest]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const originalXHRSend = XMLHttpRequest.prototype.send;
|
||||||
|
XMLHttpRequest.prototype.send = function(...args) {
|
||||||
|
if (this._shouldIgnore) {
|
||||||
|
// Simuler une réponse réussie pour éviter les erreurs
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.onload) this.onload();
|
||||||
|
if (this.onreadystatechange) {
|
||||||
|
this.readyState = 4;
|
||||||
|
this.status = 200;
|
||||||
|
this.responseText = '{}';
|
||||||
|
this.onreadystatechange();
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return originalXHRSend.apply(this, args);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// --- DÉBUT PROTECTION MOT DE PASSE ---
|
// --- DÉBUT PROTECTION MOT DE PASSE ---
|
||||||
function checkAuth() {
|
function checkAuth() {
|
||||||
const SESSION_KEY = 'radar_auth_session';
|
const SESSION_KEY = 'radar_auth_session';
|
||||||
@@ -706,9 +800,46 @@ Interface de pilotage pour les responsables sécurité des PME.
|
|||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Protection contre les exécutions multiples
|
||||||
|
let isInitialized = false;
|
||||||
|
let initTimeout = null;
|
||||||
|
|
||||||
function initStrategyLinks() {
|
function initStrategyLinks() {
|
||||||
addLinksToHeader();
|
// Éviter les exécutions multiples
|
||||||
|
if (isInitialized) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Annuler toute tentative d'initialisation en cours
|
||||||
|
if (initTimeout) {
|
||||||
|
clearTimeout(initTimeout);
|
||||||
|
initTimeout = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('🚀 initStrategyLinks() appelée');
|
||||||
|
|
||||||
|
// Marquer comme initialisé
|
||||||
|
isInitialized = true;
|
||||||
|
|
||||||
|
// DÉSACTIVÉ: addLinksToHeader() - Les liens sont maintenant gérés par Navigation.tsx
|
||||||
|
// addLinksToHeader();
|
||||||
|
|
||||||
|
// Vérifier la route immédiatement (surtout pour /team)
|
||||||
handleRoute();
|
handleRoute();
|
||||||
|
|
||||||
|
// Intercepter les clics sur les liens /team pour éviter la navigation Next.js
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
const link = e.target.closest('a');
|
||||||
|
if (link) {
|
||||||
|
const href = link.getAttribute('href') || link.href;
|
||||||
|
if (href && (href.includes('/team') || href === '/team' || href === '/team/' || href === '/team.html')) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
showTeamPage();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, true); // Utiliser capture phase pour intercepter avant Next.js
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalizePath(pathname) {
|
function normalizePath(pathname) {
|
||||||
@@ -721,13 +852,33 @@ Interface de pilotage pour les responsables sécurité des PME.
|
|||||||
const path = normalizePath(window.location.pathname);
|
const path = normalizePath(window.location.pathname);
|
||||||
const hash = window.location.hash;
|
const hash = window.location.hash;
|
||||||
|
|
||||||
// Détection simple
|
// IMPORTANT : Ne jamais gérer /team dans ce script - Next.js s'en charge exclusivement
|
||||||
|
// Détection simple pour les pages HTML pures uniquement
|
||||||
if (hash === '#strategie' || path === '/strategie') showPage('strategie');
|
if (hash === '#strategie' || path === '/strategie') showPage('strategie');
|
||||||
else if (hash === '#business' || path === '/business') showPage('business');
|
else if (hash === '#business' || path === '/business') showPage('business');
|
||||||
else if (hash === '#dataviz' || path === '/dataviz') showPage('dataviz');
|
else if (hash === '#dataviz' || path === '/dataviz') showPage('dataviz');
|
||||||
else if (hash === '#dataviz-details' || path === '/dataviz-details') showPage('dataviz-details');
|
else if (hash === '#dataviz-details' || path === '/dataviz-details') showPage('dataviz-details');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Vérifier la route /team IMMÉDIATEMENT au chargement du script (avant Next.js)
|
||||||
|
(function checkTeamRouteImmediately() {
|
||||||
|
const path = normalizePath(window.location.pathname);
|
||||||
|
if (path === '/team' || path === '/team/') {
|
||||||
|
console.log('🔍 Route /team détectée immédiatement, affichage...');
|
||||||
|
// Attendre que le body soit disponible
|
||||||
|
if (document.body) {
|
||||||
|
showTeamPage();
|
||||||
|
} else {
|
||||||
|
document.addEventListener('DOMContentLoaded', showTeamPage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// FONCTION DÉSACTIVÉE: showTeamPage() - Next.js gère maintenant la page /team
|
||||||
|
// function showTeamPage() {
|
||||||
|
// // Cette fonction n'est plus nécessaire car Next.js charge directement l'iframe
|
||||||
|
// }
|
||||||
|
|
||||||
function showPage(pageId) {
|
function showPage(pageId) {
|
||||||
if (!pagesContent[pageId]) return;
|
if (!pagesContent[pageId]) return;
|
||||||
|
|
||||||
@@ -764,7 +915,10 @@ Interface de pilotage pour les responsables sécurité des PME.
|
|||||||
if (window.originalBodyContent) {
|
if (window.originalBodyContent) {
|
||||||
document.body.innerHTML = window.originalBodyContent;
|
document.body.innerHTML = window.originalBodyContent;
|
||||||
window.history.pushState(null, null, '/');
|
window.history.pushState(null, null, '/');
|
||||||
setTimeout(initStrategyLinks, 100);
|
// Réinitialiser le flag pour permettre la réinitialisation
|
||||||
|
isInitialized = false;
|
||||||
|
if (initTimeout) clearTimeout(initTimeout);
|
||||||
|
initTimeout = setTimeout(initStrategyLinks, 100);
|
||||||
} else {
|
} else {
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
}
|
}
|
||||||
@@ -816,79 +970,108 @@ Interface de pilotage pour les responsables sécurité des PME.
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addLinksToHeader() {
|
// FONCTION DÉSACTIVÉE: Les liens de navigation sont maintenant gérés par Navigation.tsx
|
||||||
// Chercher le header
|
// Cette fonction créait des doublons dans le header
|
||||||
const header = document.querySelector('header') ||
|
// function addLinksToHeader() {
|
||||||
document.querySelector('nav') ||
|
// ... code désactivé ...
|
||||||
document.querySelector('div[role="banner"]');
|
// }
|
||||||
|
|
||||||
let container = header;
|
|
||||||
|
|
||||||
// Si pas de header, créer une barre fixe
|
|
||||||
if (!header) {
|
|
||||||
let fixedBar = document.getElementById('custom-nav-bar');
|
|
||||||
if (!fixedBar) {
|
|
||||||
fixedBar = document.createElement('div');
|
|
||||||
fixedBar.id = 'custom-nav-bar';
|
|
||||||
fixedBar.style.cssText = 'position: fixed; top: 0; right: 0; padding: 10px 20px; z-index: 9999; display: flex; gap: 15px; background: rgba(255,255,255,0.9); border-bottom-left-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);';
|
|
||||||
document.body.appendChild(fixedBar);
|
|
||||||
}
|
|
||||||
container = fixedBar;
|
|
||||||
} else {
|
|
||||||
// Si header existant, on s'assure qu'on n'a pas déjà ajouté les liens
|
|
||||||
if (header.querySelector('.custom-nav-link')) return;
|
|
||||||
|
|
||||||
// Créer un conteneur pour nos liens s'il n'existe pas
|
|
||||||
let linkContainer = document.createElement('div');
|
|
||||||
linkContainer.style.cssText = 'display: flex; gap: 15px; margin-left: auto; align-items: center; padding-right: 20px;';
|
|
||||||
header.appendChild(linkContainer);
|
|
||||||
container = linkContainer;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajouter les liens
|
|
||||||
Object.keys(pageTitles).forEach(key => {
|
|
||||||
if (document.getElementById(`link-${key}`)) return;
|
|
||||||
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.id = `link-${key}`;
|
|
||||||
link.className = 'custom-nav-link';
|
|
||||||
link.href = `#${key}`;
|
|
||||||
link.textContent = pageTitles[key];
|
|
||||||
link.style.cssText = 'color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer; font-size: 14px; padding: 5px 8px; border-radius: 4px; transition: background 0.2s;';
|
|
||||||
|
|
||||||
link.addEventListener('mouseenter', () => link.style.background = 'rgba(46, 204, 113, 0.1)');
|
|
||||||
link.addEventListener('mouseleave', () => link.style.background = 'transparent');
|
|
||||||
|
|
||||||
link.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
showPage(key);
|
|
||||||
});
|
|
||||||
|
|
||||||
container.appendChild(link);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('popstate', function(event) {
|
window.addEventListener('popstate', function(event) {
|
||||||
if (event.state && event.state.page) {
|
if (event.state && event.state.page) {
|
||||||
showPage(event.state.page);
|
// DÉSACTIVÉ: Gestion du popstate pour /team - Next.js gère cette route
|
||||||
|
// if (event.state.page === 'team') {
|
||||||
|
// showTeamPage();
|
||||||
|
// } else {
|
||||||
|
showPage(event.state.page);
|
||||||
|
// }
|
||||||
} else if (window.originalBodyContent) {
|
} else if (window.originalBodyContent) {
|
||||||
document.body.innerHTML = window.originalBodyContent;
|
document.body.innerHTML = window.originalBodyContent;
|
||||||
setTimeout(initStrategyLinks, 100);
|
// Réinitialiser le flag pour permettre la réinitialisation
|
||||||
|
isInitialized = false;
|
||||||
|
if (initTimeout) clearTimeout(initTimeout);
|
||||||
|
initTimeout = setTimeout(initStrategyLinks, 100);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- EXÉCUTION AU CHARGEMENT DE LA PAGE ---
|
// --- EXÉCUTION AU CHARGEMENT DE LA PAGE ---
|
||||||
// Déplacé à la fin pour s'assurer que toutes les fonctions et variables sont définies
|
// Déplacé à la fin pour s'assurer que toutes les fonctions et variables sont définies
|
||||||
if (document.readyState === 'loading') {
|
// Protection globale contre les exécutions multiples
|
||||||
// Bloquer le rendu visuel immédiat si possible
|
if (window.__strategieScriptLoaded) {
|
||||||
document.documentElement.style.display = 'none';
|
return; // Script déjà chargé, ne pas réexécuter
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
}
|
||||||
document.documentElement.style.display = '';
|
window.__strategieScriptLoaded = true;
|
||||||
|
|
||||||
|
// DÉSACTIVÉ: Interception des clics /team - Next.js gère maintenant cette navigation
|
||||||
|
// Plus besoin d'intercepter les clics car Next.js route vers /team correctement
|
||||||
|
|
||||||
|
// Éviter de modifier document.documentElement qui peut déclencher des rechargements Fast Refresh
|
||||||
|
// Utiliser MutationObserver pour détecter quand le header est ajouté
|
||||||
|
function waitForHeaderAndInit() {
|
||||||
|
const header = document.querySelector('header') ||
|
||||||
|
document.querySelector('nav') ||
|
||||||
|
document.querySelector('div[role="banner"]');
|
||||||
|
|
||||||
|
if (header) {
|
||||||
|
console.log('✅ Header trouvé, initialisation...');
|
||||||
|
checkAuth();
|
||||||
|
setTimeout(() => {
|
||||||
|
initStrategyLinks();
|
||||||
|
}, 300);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Essayer immédiatement
|
||||||
|
if (waitForHeaderAndInit()) {
|
||||||
|
// Déjà trouvé, c'est bon
|
||||||
|
} else {
|
||||||
|
// Utiliser MutationObserver pour détecter l'ajout du header
|
||||||
|
const observer = new MutationObserver((mutations, obs) => {
|
||||||
|
if (waitForHeaderAndInit()) {
|
||||||
|
obs.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Observer les changements dans le body
|
||||||
|
if (document.body) {
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Attendre que le body soit disponible
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Body déjà là mais pas de header, observer quand même
|
||||||
|
setTimeout(() => {
|
||||||
|
if (document.body) {
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Timeout de sécurité après 5 secondes
|
||||||
|
setTimeout(() => {
|
||||||
|
observer.disconnect();
|
||||||
|
if (!isInitialized) {
|
||||||
|
console.warn('⚠️ Timeout: initialisation forcée après 5 secondes');
|
||||||
checkAuth();
|
checkAuth();
|
||||||
initStrategyLinks();
|
initStrategyLinks();
|
||||||
});
|
}
|
||||||
} else {
|
}, 5000);
|
||||||
checkAuth();
|
|
||||||
initStrategyLinks();
|
|
||||||
}
|
}
|
||||||
})();
|
}
|
||||||
|
|
||||||
|
// Fermeture du bloc conditionnel - script s'exécute uniquement si pas sur page équipe
|
||||||
|
}
|
||||||
|
|||||||
500
public/team-block-script.js
Normal file
500
public/team-block-script.js
Normal file
@@ -0,0 +1,500 @@
|
|||||||
|
// SCRIPT EQUIPE - Remplacement DOM apres chargement
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Fonction pour verifier si on est sur la route team
|
||||||
|
function isTeamRoute() {
|
||||||
|
var path = window.location.pathname;
|
||||||
|
return path === '/team' || path === '/team/' || path.startsWith('/team/');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour verifier et initialiser la page team
|
||||||
|
function checkAndInitTeamPage() {
|
||||||
|
if (!isTeamRoute()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Eviter double initialisation
|
||||||
|
if (window.__teamPageInitialized) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.__teamPageInitialized = true;
|
||||||
|
|
||||||
|
console.log('EQUIPE: Page team detectee, preparation du remplacement DOM');
|
||||||
|
initTeamPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour charger un script externe
|
||||||
|
function loadScript(src) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
var script = document.createElement('script');
|
||||||
|
script.src = src;
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour initialiser la page equipe
|
||||||
|
async function initTeamPage() {
|
||||||
|
console.log('EQUIPE: Initialisation de la page');
|
||||||
|
|
||||||
|
// CSS de la page
|
||||||
|
var css = '*{margin:0;padding:0;box-sizing:border-box}' +
|
||||||
|
'body{font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px}' +
|
||||||
|
'.container{max-width:1400px;margin:0 auto}' +
|
||||||
|
'header{text-align:center;margin-bottom:30px;padding:20px;background:rgba(26,77,58,0.5);border-radius:8px}' +
|
||||||
|
'h1{color:#4ade80;margin-bottom:10px}' +
|
||||||
|
'.tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}' +
|
||||||
|
'.tab-btn{padding:12px 24px;background:rgba(74,222,128,0.2);border:2px solid #4ade80;color:#4ade80;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600}' +
|
||||||
|
'.tab-btn:hover{background:rgba(74,222,128,0.3)}' +
|
||||||
|
'.tab-btn.active{background:#4ade80;color:#1a4d3a}' +
|
||||||
|
'.tab-content{display:none;background:rgba(26,77,58,0.3);border-radius:8px;padding:20px;margin-bottom:20px}' +
|
||||||
|
'.tab-content.active{display:block}' +
|
||||||
|
'#network-graph{width:100%;height:700px;background:rgba(0,0,0,0.2);border-radius:8px;border:1px solid rgba(74,222,128,0.3)}' +
|
||||||
|
'#congestion-matrix{width:100%;height:600px;background:rgba(0,0,0,0.2);border-radius:8px}' +
|
||||||
|
'.genesis-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:30px}' +
|
||||||
|
'.stat-card{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px}' +
|
||||||
|
'.stat-value{font-size:32px;font-weight:bold;color:#4ade80}' +
|
||||||
|
'.stat-label{font-size:14px;color:#a0a0a0;margin-top:5px}' +
|
||||||
|
'.member-card{background:rgba(26,77,58,0.5);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px;margin-bottom:15px}' +
|
||||||
|
'.member-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}' +
|
||||||
|
'.member-name{font-size:18px;font-weight:bold;color:#4ade80}' +
|
||||||
|
'.member-avail{background:rgba(74,222,128,0.2);padding:5px 12px;border-radius:4px;font-size:14px}' +
|
||||||
|
'.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}' +
|
||||||
|
'.tech-tag{background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4);padding:4px 10px;border-radius:4px;font-size:12px}' +
|
||||||
|
'.warning-box{background:rgba(255,68,68,0.2);border:1px solid rgba(255,68,68,0.5);border-radius:6px;padding:15px;margin-top:20px}' +
|
||||||
|
'.warning-title{color:#ff6b6b;font-weight:bold;margin-bottom:10px}' +
|
||||||
|
'.uncovered{background:rgba(255,68,68,0.1);border-left:3px solid #ff6b6b;padding:10px;margin:8px 0;border-radius:4px}' +
|
||||||
|
'.legend{display:flex;gap:20px;margin:20px 0;flex-wrap:wrap}' +
|
||||||
|
'.legend-item{display:flex;align-items:center;gap:8px}' +
|
||||||
|
'.legend-color{width:20px;height:20px;border-radius:4px}' +
|
||||||
|
'.loading{text-align:center;padding:40px;color:#4ade80}' +
|
||||||
|
'.clickable{cursor:pointer;transition:all 0.2s}' +
|
||||||
|
'.clickable:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(74,222,128,0.3)}' +
|
||||||
|
'.profile-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn 0.2s}' +
|
||||||
|
'@keyframes fadeIn{from{opacity:0}to{opacity:1}}' +
|
||||||
|
'.profile-card{background:#1a4d3a;border:2px solid #4ade80;border-radius:12px;padding:25px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5)}' +
|
||||||
|
'.profile-card .close-btn{position:absolute;top:15px;right:15px;background:none;border:none;color:#ff6b6b;font-size:28px;cursor:pointer;line-height:1}' +
|
||||||
|
'.profile-card .close-btn:hover{color:#ff4444}' +
|
||||||
|
'.profile-card h2{color:#4ade80;margin-bottom:5px;font-size:24px}' +
|
||||||
|
'.profile-card .role{color:#a0a0a0;font-size:14px;margin-bottom:15px}' +
|
||||||
|
'.profile-card .stats{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:20px}' +
|
||||||
|
'.profile-card .stat{background:rgba(74,222,128,0.15);padding:8px 12px;border-radius:6px;font-size:13px}' +
|
||||||
|
'.profile-card .stat strong{color:#4ade80}' +
|
||||||
|
'.profile-card h3{color:#4ade80;font-size:16px;margin:15px 0 10px;border-bottom:1px solid rgba(74,222,128,0.3);padding-bottom:5px}' +
|
||||||
|
'.profile-card .skills{display:flex;flex-wrap:wrap;gap:8px}' +
|
||||||
|
'.profile-card .skill-tag{padding:5px 10px;border-radius:4px;font-size:12px;background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4)}' +
|
||||||
|
'.profile-card .skill-tag.expert{background:rgba(74,222,128,0.4);border-color:#4ade80}' +
|
||||||
|
'.profile-card .skill-tag.intermediate{background:rgba(57,151,212,0.3);border-color:#3997d4}' +
|
||||||
|
'.profile-card .skill-tag.beginner{background:rgba(245,179,54,0.2);border-color:#f5b336}' +
|
||||||
|
'.profile-card .interests{display:flex;flex-wrap:wrap;gap:6px}' +
|
||||||
|
'.profile-card .interest{background:rgba(136,255,136,0.15);padding:4px 8px;border-radius:4px;font-size:11px;color:#88ff88}' +
|
||||||
|
'.profile-card .projects{list-style:none;padding:0}' +
|
||||||
|
'.profile-card .projects li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.1);font-size:13px}' +
|
||||||
|
'.profile-card .projects li:last-child{border-bottom:none}' +
|
||||||
|
'.profile-card .bio{color:#c0c0c0;font-size:13px;line-height:1.5;margin-top:15px;font-style:italic}';
|
||||||
|
|
||||||
|
// HTML de la page
|
||||||
|
var html = '<div class="container">' +
|
||||||
|
'<header>' +
|
||||||
|
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">' +
|
||||||
|
'<a href="/" style="color:#4ade80;text-decoration:none;font-size:18px;font-weight:bold">← Retour au Radar</a>' +
|
||||||
|
'<div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<h1>Equipe & Technologies</h1>' +
|
||||||
|
'<p>Visualisation des competences et identification de l\'equipe de genese MVP</p>' +
|
||||||
|
'</header>' +
|
||||||
|
'<div class="tabs">' +
|
||||||
|
'<button class="tab-btn active" data-tab="network">Graphe Reseau</button>' +
|
||||||
|
'<button class="tab-btn" data-tab="congestion">Matrice Congestion</button>' +
|
||||||
|
'<button class="tab-btn" data-tab="genesis">Equipe Genese MVP</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div id="network-tab" class="tab-content active">' +
|
||||||
|
'<div class="legend">' +
|
||||||
|
'<div class="legend-item"><div class="legend-color" style="background:#4ade80"></div><span>Adopt</span></div>' +
|
||||||
|
'<div class="legend-item"><div class="legend-color" style="background:#3997d4"></div><span>Trial</span></div>' +
|
||||||
|
'<div class="legend-item"><div class="legend-color" style="background:#f5b336"></div><span>Assess</span></div>' +
|
||||||
|
'<div class="legend-item"><div class="legend-color" style="background:#e5695e"></div><span>Hold</span></div>' +
|
||||||
|
'<div class="legend-item"><div class="legend-color" style="background:#88ff88"></div><span>Membres</span></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div id="network-graph"><div class="loading">Chargement du graphe...</div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div id="congestion-tab" class="tab-content">' +
|
||||||
|
'<h2 style="margin-bottom:20px">Matrice de Congestion - Technologies Adopt</h2>' +
|
||||||
|
'<div id="congestion-matrix"><div class="loading">Chargement de la matrice...</div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div id="genesis-tab" class="tab-content">' +
|
||||||
|
'<div id="genesis-team"><div class="loading">Chargement des donnees...</div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
// Injecter le CSS
|
||||||
|
var styleEl = document.createElement('style');
|
||||||
|
styleEl.textContent = css;
|
||||||
|
document.head.appendChild(styleEl);
|
||||||
|
|
||||||
|
// Modifier le titre
|
||||||
|
document.title = 'Equipe & Technologies - Laplank';
|
||||||
|
|
||||||
|
// Remplacer le contenu du body
|
||||||
|
document.body.innerHTML = html;
|
||||||
|
document.body.style.cssText = 'font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px;margin:0';
|
||||||
|
|
||||||
|
// Ajouter les gestionnaires d'evenements pour les onglets
|
||||||
|
document.querySelectorAll('.tab-btn').forEach(function(btn) {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
var tabName = this.getAttribute('data-tab');
|
||||||
|
document.querySelectorAll('.tab-content').forEach(function(t) { t.classList.remove('active'); });
|
||||||
|
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||||
|
document.getElementById(tabName + '-tab').classList.add('active');
|
||||||
|
this.classList.add('active');
|
||||||
|
|
||||||
|
// Redimensionner les graphiques
|
||||||
|
if (tabName === 'congestion' && window.congestionChart) {
|
||||||
|
setTimeout(function() { window.congestionChart.resize(); }, 100);
|
||||||
|
}
|
||||||
|
if (tabName === 'network' && window.networkCy) {
|
||||||
|
setTimeout(function() { window.networkCy.resize(); }, 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('EQUIPE: DOM remplace, chargement des bibliotheques...');
|
||||||
|
|
||||||
|
// Charger les bibliotheques externes
|
||||||
|
try {
|
||||||
|
await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js');
|
||||||
|
console.log('EQUIPE: Cytoscape charge');
|
||||||
|
// Utilisation du layout cose integre (pas de plugin externe necessaire)
|
||||||
|
|
||||||
|
await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js');
|
||||||
|
console.log('EQUIPE: ECharts charge');
|
||||||
|
|
||||||
|
// Charger les donnees
|
||||||
|
var response = await fetch('/team-visualization-data.json');
|
||||||
|
if (!response.ok) throw new Error('HTTP ' + response.status);
|
||||||
|
var data = await response.json();
|
||||||
|
console.log('EQUIPE: Donnees chargees:', Object.keys(data));
|
||||||
|
|
||||||
|
// Stocker les profils pour acces global
|
||||||
|
window.__memberProfiles = data.memberProfiles || {};
|
||||||
|
|
||||||
|
// Initialiser les visualisations
|
||||||
|
initNetwork(data);
|
||||||
|
initCongestion(data);
|
||||||
|
initGenesis(data);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error('EQUIPE: Erreur:', e);
|
||||||
|
var errorMsg = '<div style="padding:20px;background:rgba(255,152,0,0.2);border:1px solid #ff9800;border-radius:8px"><h3 style="color:#ff9800">Erreur de chargement</h3><p>' + e.message + '</p></div>';
|
||||||
|
document.getElementById('network-graph').innerHTML = errorMsg;
|
||||||
|
document.getElementById('congestion-matrix').innerHTML = errorMsg;
|
||||||
|
document.getElementById('genesis-team').innerHTML = errorMsg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Graphe reseau avec Cytoscape
|
||||||
|
function initNetwork(data) {
|
||||||
|
if (!data || !data.network) {
|
||||||
|
document.getElementById('network-graph').innerHTML = '<div class="loading">Pas de donnees reseau</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.networkCy = cytoscape({
|
||||||
|
container: document.getElementById('network-graph'),
|
||||||
|
elements: data.network,
|
||||||
|
style: [
|
||||||
|
{
|
||||||
|
selector: 'node[type="technology"]',
|
||||||
|
style: {
|
||||||
|
'background-color': 'data(color)',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
|
||||||
|
'height': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
|
||||||
|
'color': '#fff',
|
||||||
|
'font-size': '12px',
|
||||||
|
'text-outline-width': 2,
|
||||||
|
'text-outline-color': '#000',
|
||||||
|
'text-wrap': 'wrap',
|
||||||
|
'text-max-width': 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'node[type="member"]',
|
||||||
|
style: {
|
||||||
|
'background-color': '#88ff88',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(e) { return 35 + (e.data('availability') || 0) / 2; },
|
||||||
|
'height': function(e) { return 35 + (e.data('availability') || 0) / 2; },
|
||||||
|
'color': '#fff',
|
||||||
|
'font-size': '14px',
|
||||||
|
'font-weight': 'bold',
|
||||||
|
'text-outline-width': 2,
|
||||||
|
'text-outline-color': '#000',
|
||||||
|
'shape': 'ellipse'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'edge',
|
||||||
|
style: {
|
||||||
|
'width': function(e) { return 1 + (e.data('weight') || 0.5); },
|
||||||
|
'line-color': '#999',
|
||||||
|
'opacity': 0.6,
|
||||||
|
'curve-style': 'bezier'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
name: 'cose',
|
||||||
|
nodeDimensionsIncludeLabels: true,
|
||||||
|
idealEdgeLength: 100,
|
||||||
|
nodeRepulsion: 4500,
|
||||||
|
gravity: 0.25,
|
||||||
|
numIter: 1000,
|
||||||
|
animate: true,
|
||||||
|
animationDuration: 800
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ajouter evenement de clic sur les membres
|
||||||
|
window.networkCy.on('tap', 'node[type="member"]', function(evt) {
|
||||||
|
var node = evt.target;
|
||||||
|
var memberId = node.data('id').replace('member-', '');
|
||||||
|
if (window.__memberProfiles && window.__memberProfiles[memberId]) {
|
||||||
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Style curseur pour les membres
|
||||||
|
window.networkCy.on('mouseover', 'node[type="member"]', function() {
|
||||||
|
document.body.style.cursor = 'pointer';
|
||||||
|
});
|
||||||
|
window.networkCy.on('mouseout', 'node[type="member"]', function() {
|
||||||
|
document.body.style.cursor = 'default';
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('EQUIPE: Graphe reseau initialise');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrice de congestion avec ECharts
|
||||||
|
function initCongestion(data) {
|
||||||
|
if (!data || !data.congestionMatrix || data.congestionMatrix.length === 0) {
|
||||||
|
document.getElementById('congestion-matrix').innerHTML = '<div class="loading">Pas de donnees matrice</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var chart = echarts.init(document.getElementById('congestion-matrix'));
|
||||||
|
window.congestionChart = chart;
|
||||||
|
|
||||||
|
var techs = data.congestionMatrix.map(function(r) { return r.technology; });
|
||||||
|
var members = data.congestionMatrix[0] ? data.congestionMatrix[0].members.map(function(m) { return m.fullName || m.member; }) : [];
|
||||||
|
var scatter = [];
|
||||||
|
|
||||||
|
data.congestionMatrix.forEach(function(row, i) {
|
||||||
|
row.members.forEach(function(m, j) {
|
||||||
|
if (m.hasSkill) {
|
||||||
|
scatter.push({
|
||||||
|
value: [j, i],
|
||||||
|
member: m.fullName || m.member,
|
||||||
|
memberId: m.member,
|
||||||
|
tech: row.technology,
|
||||||
|
availability: m.availability
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
chart.setOption({
|
||||||
|
title: { text: 'Disponibilite des membres sur les technologies Adopt', left: 'center', textStyle: { color: '#e0e0e0' } },
|
||||||
|
tooltip: {
|
||||||
|
formatter: function(p) {
|
||||||
|
return p.data.member + '<br/>Tech: ' + p.data.tech + '<br/>Dispo: ' + p.data.availability + '%';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: { height: '60%', top: '15%' },
|
||||||
|
xAxis: { type: 'category', data: members, axisLabel: { rotate: 45, color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
|
||||||
|
yAxis: { type: 'category', data: techs, axisLabel: { color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
|
||||||
|
visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'center', bottom: '5%', inRange: { color: ['#1a4d3a', '#4ade80', '#86efac'] }, textStyle: { color: '#e0e0e0' } },
|
||||||
|
series: [{
|
||||||
|
type: 'scatter',
|
||||||
|
data: scatter,
|
||||||
|
symbolSize: function(d) { return 15 + (d[2] || 0) / 2; },
|
||||||
|
itemStyle: { color: '#4ade80', borderColor: '#1a4d3a', borderWidth: 2 },
|
||||||
|
label: { show: true, formatter: function(p) { return p.data.availability + '%'; }, color: '#1a4d3a' }
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function() { chart.resize(); });
|
||||||
|
|
||||||
|
// Ajouter evenement de clic sur les points (membres)
|
||||||
|
chart.on('click', function(params) {
|
||||||
|
if (params.data && params.data.memberId) {
|
||||||
|
var memberId = params.data.memberId;
|
||||||
|
if (window.__memberProfiles && window.__memberProfiles[memberId]) {
|
||||||
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('EQUIPE: Matrice de congestion initialisee');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Equipe de genese
|
||||||
|
function initGenesis(data) {
|
||||||
|
if (!data || !data.genesisTeam) {
|
||||||
|
document.getElementById('genesis-team').innerHTML = '<div class="loading">Pas de donnees equipe</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var g = data.genesisTeam;
|
||||||
|
var h = '<div class="genesis-stats">' +
|
||||||
|
'<div class="stat-card"><div class="stat-value">' + g.totalMembers + '</div><div class="stat-label">Membres selectionnes</div></div>' +
|
||||||
|
'<div class="stat-card"><div class="stat-value">' + g.totalCapacity + '%</div><div class="stat-label">Capacite totale</div></div>' +
|
||||||
|
'<div class="stat-card"><div class="stat-value">' + g.averageAvailability + '%</div><div class="stat-label">Disponibilite moyenne</div></div>' +
|
||||||
|
'<div class="stat-card"><div class="stat-value">' + g.coveredTechnologies + '/' + g.totalCoreTechnologies + '</div><div class="stat-label">Technologies couvertes</div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<h2 style="margin-bottom:20px;color:#4ade80">Membres de l\'equipe de genese</h2>';
|
||||||
|
|
||||||
|
if (g.team && g.team.length > 0) {
|
||||||
|
g.team.forEach(function(m) {
|
||||||
|
h += '<div class="member-card clickable" data-member-id="' + m.member + '">' +
|
||||||
|
'<div class="member-header">' +
|
||||||
|
'<div><div class="member-name">' + (m.fullName || m.member) + '</div>' +
|
||||||
|
'<div style="font-size:12px;color:#a0a0a0;margin-top:4px">' + (m.role || '') + ' - ' + m.seniority + ' - ' + m.coverage + ' technologie(s)</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="member-avail">' + m.availability + '% dispo</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="tech-list">';
|
||||||
|
if (m.technologies) {
|
||||||
|
m.technologies.forEach(function(t) {
|
||||||
|
h += '<span class="tech-tag">' + t.title + '</span>';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
h += '</div></div>';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
h += '<p style="color:#a0a0a0">Aucun membre ne repond aux criteres.</p>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (g.uncoveredTechnologies && g.uncoveredTechnologies.length > 0) {
|
||||||
|
h += '<div class="warning-box"><div class="warning-title">Technologies Adopt non couvertes</div><p style="margin-bottom:10px">Ces technologies critiques ne sont pas maitrisees :</p>';
|
||||||
|
g.uncoveredTechnologies.forEach(function(t) {
|
||||||
|
h += '<div class="uncovered"><strong>' + t.title + '</strong><div style="font-size:12px;color:#a0a0a0;margin-top:4px">Impact: ' + t.businessImpact + ' - Gap: ' + t.skillGap + ' - Couverture: ' + t.teamCoverage + ' personne(s)</div></div>';
|
||||||
|
});
|
||||||
|
h += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('genesis-team').innerHTML = h;
|
||||||
|
|
||||||
|
// Ajouter les evenements de clic sur les cartes membres
|
||||||
|
document.querySelectorAll('.member-card.clickable').forEach(function(card) {
|
||||||
|
card.addEventListener('click', function() {
|
||||||
|
var memberId = this.getAttribute('data-member-id');
|
||||||
|
if (memberId && window.__memberProfiles && window.__memberProfiles[memberId]) {
|
||||||
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('EQUIPE: Equipe de genese initialisee');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Afficher la carte de profil d'un membre
|
||||||
|
function showMemberProfile(memberId, profile) {
|
||||||
|
if (!profile) {
|
||||||
|
console.warn('EQUIPE: Profil non trouve pour', memberId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generer le HTML des competences
|
||||||
|
var skillsHtml = '';
|
||||||
|
if (profile.skillsDetailed && profile.skillsDetailed.length > 0) {
|
||||||
|
skillsHtml = profile.skillsDetailed.map(function(s) {
|
||||||
|
var levelClass = s.level || 'beginner';
|
||||||
|
var yearsText = s.years ? ' (' + s.years + ' ans)' : '';
|
||||||
|
return '<span class="skill-tag ' + levelClass + '">' + s.name + yearsText + '</span>';
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generer le HTML des interets
|
||||||
|
var interestsHtml = '';
|
||||||
|
if (profile.interests && profile.interests.length > 0) {
|
||||||
|
interestsHtml = profile.interests.map(function(i) {
|
||||||
|
return '<span class="interest">' + i + '</span>';
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generer le HTML des projets
|
||||||
|
var projectsHtml = '';
|
||||||
|
if (profile.projects && profile.projects.length > 0) {
|
||||||
|
projectsHtml = '<ul class="projects">' + profile.projects.map(function(p) {
|
||||||
|
return '<li>' + p + '</li>';
|
||||||
|
}).join('') + '</ul>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generer le HTML des soft skills
|
||||||
|
var softSkillsHtml = '';
|
||||||
|
if (profile.softSkills && profile.softSkills.length > 0) {
|
||||||
|
softSkillsHtml = profile.softSkills.map(function(s) {
|
||||||
|
return '<span class="interest">' + s + '</span>';
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
var modal = document.createElement('div');
|
||||||
|
modal.className = 'profile-modal';
|
||||||
|
modal.innerHTML =
|
||||||
|
'<div class="profile-card">' +
|
||||||
|
'<button class="close-btn">×</button>' +
|
||||||
|
'<h2>' + (profile.fullName || memberId) + '</h2>' +
|
||||||
|
'<p class="role">' + (profile.role || 'Membre de l\'equipe') + '</p>' +
|
||||||
|
'<div class="stats">' +
|
||||||
|
'<span class="stat"><strong>' + (profile.availability || 0) + '%</strong> disponibilite</span>' +
|
||||||
|
'<span class="stat"><strong>' + (profile.yearsExperience || 0) + '</strong> ans exp.</span>' +
|
||||||
|
'<span class="stat"><strong>' + (profile.seniorityLevel || 'beginner') + '</strong></span>' +
|
||||||
|
(profile.joinDate ? '<span class="stat">Depuis <strong>' + profile.joinDate + '</strong></span>' : '') +
|
||||||
|
'</div>' +
|
||||||
|
(skillsHtml ? '<h3>Competences techniques</h3><div class="skills">' + skillsHtml + '</div>' : '') +
|
||||||
|
(interestsHtml ? '<h3>Centres d\'interet</h3><div class="interests">' + interestsHtml + '</div>' : '') +
|
||||||
|
(softSkillsHtml ? '<h3>Soft Skills</h3><div class="interests">' + softSkillsHtml + '</div>' : '') +
|
||||||
|
(projectsHtml ? '<h3>Projets</h3>' + projectsHtml : '') +
|
||||||
|
(profile.bio ? '<p class="bio">' + profile.bio + '</p>' : '') +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
// Fermer au clic sur le fond ou le bouton
|
||||||
|
modal.addEventListener('click', function(e) {
|
||||||
|
if (e.target === modal || e.target.classList.contains('close-btn')) {
|
||||||
|
modal.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer avec Echap
|
||||||
|
var escHandler = function(e) {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
modal.remove();
|
||||||
|
document.removeEventListener('keydown', escHandler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', escHandler);
|
||||||
|
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
console.log('EQUIPE: Profil affiche pour', memberId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Demarrer quand le DOM est pret
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', checkAndInitTeamPage);
|
||||||
|
} else {
|
||||||
|
checkAndInitTeamPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detecter les navigations Next.js (SPA)
|
||||||
|
var lastUrl = location.href;
|
||||||
|
new MutationObserver(function() {
|
||||||
|
if (location.href !== lastUrl) {
|
||||||
|
lastUrl = location.href;
|
||||||
|
window.__teamPageInitialized = false;
|
||||||
|
checkAndInitTeamPage();
|
||||||
|
}
|
||||||
|
}).observe(document, { subtree: true, childList: true });
|
||||||
|
})();
|
||||||
2740
public/team-visualization-data.json
Normal file
2740
public/team-visualization-data.json
Normal file
File diff suppressed because it is too large
Load Diff
11
public/team/index.html
Normal file
11
public/team/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Equipe & Technologies - Laplank</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="/team-block-script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "3Node"
|
title: "3Node"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [3Node, nœuds, serveurs]
|
tags: [3Node, nœuds, serveurs]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "AIBox"
|
title: "AIBox"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [AIBox, IA, machine learning]
|
tags: [AIBox, IA, machine learning]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: high
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : Yvv
|
- Membres de l'équipe : yvv
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
|||||||
40
radar-business/2025-01-15/ansible.md
Normal file
40
radar-business/2025-01-15/ansible.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
title: "Ansible"
|
||||||
|
ring: trial
|
||||||
|
quadrant: technologies-emergentes
|
||||||
|
tags: [Ansible, automation, infrastructure]
|
||||||
|
businessImpact: high
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 0
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
- **Utilisation** : Automatisation de l'infrastructure et du déploiement
|
||||||
|
- **Description** : Outil d'automatisation IT pour la configuration, le déploiement et la gestion des serveurs
|
||||||
|
- **Compétences requises** : Automatisation, gestion d'infrastructure, YAML, SSH
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
À compléter
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€
|
||||||
|
- Coût de maintenance annuel : 0€
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 0
|
||||||
|
- Membres de l'équipe : Aucun
|
||||||
|
- Niveau moyen : beginner
|
||||||
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
À compléter avec des recommandations stratégiques.
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Bash"
|
title: "Bash"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [bash, scripting]
|
tags: [bash, scripting]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Cryptographie"
|
title: "Cryptographie"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [cryptographie, chiffrage]
|
tags: [cryptographie, chiffrage]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Cytoscape.js"
|
title: "Cytoscape.js"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Cytoscape, Graphes, Réseaux]
|
tags: [Cytoscape, Graphes, Réseaux]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "D3.js"
|
title: "D3.js"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [D3.js, DataViz, JavaScript]
|
tags: [D3.js, DataViz, JavaScript]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -28,7 +28,7 @@ Technologie D3.js utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : ManUtopiK, boris
|
- Membres de l'équipe : boris, manuTopik
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Dart"
|
title: "Dart"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Dart, Flutter]
|
tags: [Dart, Flutter]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Docker"
|
title: "Docker"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Docker, conteneurisation]
|
tags: [Docker, conteneurisation]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -10,8 +10,8 @@ riskLevel: low
|
|||||||
competencyLevel: beginner
|
competencyLevel: beginner
|
||||||
maintenanceCost: 0
|
maintenanceCost: 0
|
||||||
differentiation: low
|
differentiation: low
|
||||||
teamCoverage: 1
|
teamCoverage: 2
|
||||||
skillGap: high
|
skillGap: medium
|
||||||
---
|
---
|
||||||
|
|
||||||
Technologie Docker utilisée dans l'écosystème Duniter/Ğ1.
|
Technologie Docker utilisée dans l'écosystème Duniter/Ğ1.
|
||||||
@@ -27,10 +27,10 @@ Technologie Docker utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
|
|
||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : 1000i100
|
- Membres de l'équipe : 1000i100, syoul
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
## Recommandations
|
## Recommandations
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ECharts"
|
title: "ECharts"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [ECharts, DataViz, Apache]
|
tags: [ECharts, DataViz, Apache]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Flutter"
|
title: "Flutter"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Flutter, Dart]
|
tags: [Flutter, Dart]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "GitLab CI/CD"
|
title: "GitLab CI/CD"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [GitLab, CI/CD]
|
tags: [GitLab, CI/CD]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Grafana"
|
title: "Grafana"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Grafana, Monitoring, Dashboard]
|
tags: [Grafana, Monitoring, Dashboard]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "IPFS"
|
title: "IPFS"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [IPFS, distribué]
|
tags: [IPFS, distribué]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -28,7 +28,7 @@ Technologie IPFS utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : aya, Fred
|
- Membres de l'équipe : aya, fred
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "JavaScript/TypeScript"
|
title: "JavaScript/TypeScript"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [JavaScript, TypeScript, web]
|
tags: [JavaScript, TypeScript, web]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -34,7 +34,7 @@ skillGap: low
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 3
|
- Nombre de personnes maîtrisant : 3
|
||||||
- Membres de l'équipe : ManUtopiK, 1000i100, boris
|
- Membres de l'équipe : 1000i100, boris, manuTopik
|
||||||
- Niveau moyen : expert
|
- Niveau moyen : expert
|
||||||
- Risque de compétence manquante : low
|
- Risque de compétence manquante : low
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Kubernetes"
|
title: "Kubernetes"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Kubernetes, orchestration]
|
tags: [Kubernetes, orchestration]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Leaflet"
|
title: "Leaflet"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Leaflet, Cartographie, Map]
|
tags: [Leaflet, Cartographie, Map]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Linux"
|
title: "Linux"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Linux, système]
|
tags: [Linux, système]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -10,8 +10,8 @@ riskLevel: low
|
|||||||
competencyLevel: intermediate
|
competencyLevel: intermediate
|
||||||
maintenanceCost: 0
|
maintenanceCost: 0
|
||||||
differentiation: low
|
differentiation: low
|
||||||
teamCoverage: 2
|
teamCoverage: 3
|
||||||
skillGap: medium
|
skillGap: low
|
||||||
---
|
---
|
||||||
|
|
||||||
Technologie Linux utilisée dans l'écosystème Duniter/Ğ1.
|
Technologie Linux utilisée dans l'écosystème Duniter/Ğ1.
|
||||||
@@ -27,10 +27,10 @@ Technologie Linux utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
|
|
||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 3
|
||||||
- Membres de l'équipe : aya, boris
|
- Membres de l'équipe : aya, boris, syoul
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : low
|
||||||
|
|
||||||
## Recommandations
|
## Recommandations
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Mycelium Network"
|
title: "Mycelium Network"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Mycelium, Network, réseau overlay]
|
tags: [Mycelium, Network, réseau overlay]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "NetlifyCMS"
|
title: "NetlifyCMS"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [CMS, Git]
|
tags: [CMS, Git]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -31,7 +31,7 @@ skillGap: medium
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : ManUtopiK, 1000i100
|
- Membres de l'équipe : 1000i100, manuTopik
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Nostr"
|
title: "Nostr"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Nostr, protocole]
|
tags: [Nostr, protocole]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -28,7 +28,7 @@ Technologie Nostr utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : Fred
|
- Membres de l'équipe : fred
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Nuxt.js"
|
title: "Nuxt.js"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Nuxt, Vue, SSR]
|
tags: [Nuxt, Vue, SSR]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -31,7 +31,7 @@ skillGap: medium
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : ManUtopiK, boris
|
- Membres de l'équipe : boris, manuTopik
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
40
radar-business/2025-01-15/opentofu.md
Normal file
40
radar-business/2025-01-15/opentofu.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
title: "OpenTofu"
|
||||||
|
ring: trial
|
||||||
|
quadrant: technologies-emergentes
|
||||||
|
tags: [OpenTofu, Infrastructure as Code, Terraform]
|
||||||
|
businessImpact: high
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 0
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
- **Utilisation** : Infrastructure as Code (IaC) pour la gestion de l'infrastructure
|
||||||
|
- **Description** : Fork open-source de Terraform, outil de provisionnement et gestion d'infrastructure déclarative
|
||||||
|
- **Compétences requises** : Infrastructure as Code, HCL, gestion d'infrastructure cloud/on-premise
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
À compléter
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€
|
||||||
|
- Coût de maintenance annuel : 0€
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 0
|
||||||
|
- Membres de l'équipe : Aucun
|
||||||
|
- Niveau moyen : beginner
|
||||||
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
À compléter avec des recommandations stratégiques.
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "PostgreSQL"
|
title: "PostgreSQL"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [PostgreSQL, base de données]
|
tags: [PostgreSQL, base de données]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ProxMox"
|
title: "ProxMox"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [ProxMox, virtualisation]
|
tags: [ProxMox, virtualisation]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -10,8 +10,8 @@ riskLevel: medium
|
|||||||
competencyLevel: beginner
|
competencyLevel: beginner
|
||||||
maintenanceCost: 0
|
maintenanceCost: 0
|
||||||
differentiation: medium
|
differentiation: medium
|
||||||
teamCoverage: 1
|
teamCoverage: 2
|
||||||
skillGap: high
|
skillGap: medium
|
||||||
---
|
---
|
||||||
|
|
||||||
Technologie ProxMox utilisée dans l'écosystème Duniter/Ğ1.
|
Technologie ProxMox utilisée dans l'écosystème Duniter/Ğ1.
|
||||||
@@ -27,10 +27,10 @@ Technologie ProxMox utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
|
|
||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : poka
|
- Membres de l'équipe : poka, syoul
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
## Recommandations
|
## Recommandations
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Python"
|
title: "Python"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Python, CLI]
|
tags: [Python, CLI]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Rust"
|
title: "Rust"
|
||||||
ring: core
|
ring: adopt
|
||||||
quadrant: technologies-differentiantes
|
quadrant: technologies-differentiantes
|
||||||
tags: [Rust, blockchain, Substrate]
|
tags: [Rust, blockchain, Substrate]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -33,7 +33,7 @@ skillGap: high
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : Eloïs
|
- Membres de l'équipe : elois
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Serverless"
|
title: "Serverless"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Serverless]
|
tags: [Serverless]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Squid"
|
title: "Squid"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Squid, indexer, GraphQL]
|
tags: [Squid, indexer, GraphQL]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Substrate Framework"
|
title: "Substrate Framework"
|
||||||
ring: core
|
ring: adopt
|
||||||
quadrant: technologies-differentiantes
|
quadrant: technologies-differentiantes
|
||||||
tags: [Substrate, Rust, blockchain]
|
tags: [Substrate, Rust, blockchain]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: high
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : Eloïs
|
- Membres de l'équipe : elois
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ThreeFold Blockchain"
|
title: "ThreeFold Blockchain"
|
||||||
ring: core
|
ring: adopt
|
||||||
quadrant: technologies-differentiantes
|
quadrant: technologies-differentiantes
|
||||||
tags: [ThreeFold, Blockchain]
|
tags: [ThreeFold, Blockchain]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: low
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 3
|
- Nombre de personnes maîtrisant : 3
|
||||||
- Membres de l'équipe : aya, Eloïs, Fred
|
- Membres de l'équipe : aya, elois, fred
|
||||||
- Niveau moyen : expert
|
- Niveau moyen : expert
|
||||||
- Risque de compétence manquante : low
|
- Risque de compétence manquante : low
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ThreeFold Cloud"
|
title: "ThreeFold Cloud"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [ThreeFold, Cloud, Kubernetes]
|
tags: [ThreeFold, Cloud, Kubernetes]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: medium
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : aya, Fred
|
- Membres de l'équipe : aya, fred
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ThreeFold Compute"
|
title: "ThreeFold Compute"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [ThreeFold, Compute, edge computing]
|
tags: [ThreeFold, Compute, edge computing]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: medium
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : aya, Fred
|
- Membres de l'équipe : aya, fred
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ThreeFold Data Storage"
|
title: "ThreeFold Data Storage"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [ThreeFold, Storage, stockage distribué]
|
tags: [ThreeFold, Storage, stockage distribué]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: medium
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : aya, Fred
|
- Membres de l'équipe : aya, fred
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "ThreeFold Grid"
|
title: "ThreeFold Grid"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [ThreeFold, Grid, infrastructure décentralisée]
|
tags: [ThreeFold, Grid, infrastructure décentralisée]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: low
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 4
|
- Nombre de personnes maîtrisant : 4
|
||||||
- Membres de l'équipe : poka, aya, Fred, Syoul
|
- Membres de l'équipe : aya, fred, poka, syoul
|
||||||
- Niveau moyen : expert
|
- Niveau moyen : expert
|
||||||
- Risque de compétence manquante : low
|
- Risque de compétence manquante : low
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Vue.js"
|
title: "Vue.js"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [Vue, JavaScript]
|
tags: [Vue, JavaScript]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -28,7 +28,7 @@ Technologie Vue.js utilisée dans l'écosystème Duniter/Ğ1.
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2
|
- Nombre de personnes maîtrisant : 2
|
||||||
- Membres de l'équipe : ManUtopiK, boris
|
- Membres de l'équipe : boris, manuTopik
|
||||||
- Niveau moyen : intermediate
|
- Niveau moyen : intermediate
|
||||||
- Risque de compétence manquante : medium
|
- Risque de compétence manquante : medium
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "WordUp CMS"
|
title: "WordUp CMS"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [CMS]
|
tags: [CMS]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
@@ -33,7 +33,7 @@ skillGap: high
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : ManUtopiK
|
- Membres de l'équipe : manuTopik
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Zero OS"
|
title: "Zero OS"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [Zero OS, bare metal, cloud décentralisé]
|
tags: [Zero OS, bare metal, cloud décentralisé]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ Ce document définit le format standard pour les blips du radar business avec to
|
|||||||
```markdown
|
```markdown
|
||||||
---
|
---
|
||||||
title: "Nom de la technologie"
|
title: "Nom de la technologie"
|
||||||
ring: core|strategic|support|legacy
|
ring: adopt|trial|assess|hold
|
||||||
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
|
quadrant: technologies-differentiantes|technologies-commodite|technologies-risque|technologies-emergentes
|
||||||
tags: [tag1, tag2]
|
tags: [tag1, tag2]
|
||||||
businessImpact: high|medium|low
|
businessImpact: high|medium|low
|
||||||
@@ -35,6 +35,7 @@ Description de l'impact sur le business.
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : N
|
- Nombre de personnes maîtrisant : N
|
||||||
|
- Membres de l'équipe : pseudo1, pseudo2
|
||||||
- Niveau moyen : expert|intermediate|beginner
|
- Niveau moyen : expert|intermediate|beginner
|
||||||
- Risque de compétence manquante : low|medium|high
|
- Risque de compétence manquante : low|medium|high
|
||||||
|
|
||||||
@@ -49,10 +50,10 @@ Recommandations stratégiques pour cette technologie.
|
|||||||
|
|
||||||
- **title** (obligatoire) : Nom de la technologie
|
- **title** (obligatoire) : Nom de la technologie
|
||||||
- **ring** (obligatoire) :
|
- **ring** (obligatoire) :
|
||||||
- `core` : Critique pour le business model
|
- `adopt` : Technologies recommandées et utilisées avec succès en production. Stables, éprouvées, peuvent être adoptées en toute confiance pour de nouveaux projets.
|
||||||
- `strategic` : Stratégique pour la croissance
|
- `trial` : Technologies à essayer. Prometteuses et testées avec succès dans certains contextes. À considérer pour de nouveaux projets.
|
||||||
- `support` : De support nécessaire
|
- `assess` : Technologies à évaluer. Prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester.
|
||||||
- `legacy` : À remplacer
|
- `hold` : Technologies à éviter ou à remplacer. Présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets.
|
||||||
- **quadrant** (obligatoire) :
|
- **quadrant** (obligatoire) :
|
||||||
- `technologies-differentiantes` : Créent un avantage concurrentiel
|
- `technologies-differentiantes` : Créent un avantage concurrentiel
|
||||||
- `technologies-commodite` : Nécessaires mais non différenciantes
|
- `technologies-commodite` : Nécessaires mais non différenciantes
|
||||||
@@ -60,6 +61,8 @@ Recommandations stratégiques pour cette technologie.
|
|||||||
- `technologies-emergentes` : Opportunités futures
|
- `technologies-emergentes` : Opportunités futures
|
||||||
- **tags** (optionnel) : Tags pour le filtrage
|
- **tags** (optionnel) : Tags pour le filtrage
|
||||||
|
|
||||||
|
**Important** : Les anciens rings (core, strategic, support, legacy) ne sont plus utilisés. Tous les blips doivent utiliser les rings standards (adopt, trial, assess, hold).
|
||||||
|
|
||||||
### Métadonnées business
|
### Métadonnées business
|
||||||
|
|
||||||
- **businessImpact** (obligatoire) :
|
- **businessImpact** (obligatoire) :
|
||||||
@@ -97,22 +100,26 @@ Recommandations stratégiques pour cette technologie.
|
|||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
---
|
---
|
||||||
title: "Rust / Substrate"
|
title: "Rust"
|
||||||
ring: core
|
ring: adopt
|
||||||
quadrant: technologies-differentiantes
|
quadrant: technologies-differentiantes
|
||||||
tags: [blockchain, rust, substrate]
|
tags: [blockchain, rust, substrate]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
costToReplace: 200000
|
costToReplace: 200000
|
||||||
revenueImpact: direct
|
revenueImpact: indirect
|
||||||
riskLevel: medium
|
riskLevel: medium
|
||||||
competencyLevel: intermediate
|
competencyLevel: beginner
|
||||||
maintenanceCost: 50000
|
maintenanceCost: 50000
|
||||||
differentiation: high
|
differentiation: high
|
||||||
teamCoverage: 2
|
teamCoverage: 1
|
||||||
skillGap: high
|
skillGap: high
|
||||||
---
|
---
|
||||||
|
|
||||||
Rust et le framework Substrate sont au cœur du développement de Duniter v2S, le nœud blockchain principal.
|
- **Utilisation** : Développement du nœud Duniter v2S (basé sur Substrate)
|
||||||
|
- **Projets** :
|
||||||
|
- `Duniter v2S` : Nœud blockchain principal
|
||||||
|
- `Ğcli-v2s` : Interface en ligne de commande Rust
|
||||||
|
- **Compétences requises** : Rust avancé, développement blockchain, Substrate framework
|
||||||
|
|
||||||
## Impact Business
|
## Impact Business
|
||||||
|
|
||||||
@@ -125,8 +132,9 @@ Technologie critique pour le fonctionnement de la blockchain Ğ1. Sans cette tec
|
|||||||
|
|
||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 2 (Eloïs, autres contributeurs)
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Niveau moyen : intermediate
|
- Membres de l'équipe : elois
|
||||||
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high (peu de personnes, compétences critiques)
|
- Risque de compétence manquante : high (peu de personnes, compétences critiques)
|
||||||
|
|
||||||
## Recommandations
|
## Recommandations
|
||||||
@@ -137,3 +145,14 @@ Technologie critique pour le fonctionnement de la blockchain Ğ1. Sans cette tec
|
|||||||
- Créer un plan de continuité en cas de départ de contributeurs clés
|
- Créer un plan de continuité en cas de départ de contributeurs clés
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Migration des rings
|
||||||
|
|
||||||
|
Si vous avez des blips avec les anciens rings, utilisez ce mapping :
|
||||||
|
|
||||||
|
- **core** → **adopt** : Technologies fondamentales en production
|
||||||
|
- **strategic** → **assess** : Technologies prometteuses à évaluer
|
||||||
|
- **support** → **adopt** : Technologies utilisées en production
|
||||||
|
- **trial** → **trial** : Déjà correct
|
||||||
|
- **legacy** → **hold** : Technologies obsolètes à remplacer
|
||||||
|
|
||||||
|
Le script `scripts/migrate-rings.sh` peut être utilisé pour automatiser cette migration.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
"baseUrl": "",
|
"baseUrl": "",
|
||||||
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar-business/{release}/{id}.md",
|
"editUrl": "https://git.open.us.org/syoul/TechradarDev/_edit/main/radar-business/{release}/{id}.md",
|
||||||
"logoFile": "logo.svg",
|
"logoFile": "logo.svg",
|
||||||
"jsFile": "strategie-script.js",
|
"jsFile": "/team-block-script.js",
|
||||||
"toggles": {
|
"toggles": {
|
||||||
"showChart": true,
|
"showChart": true,
|
||||||
"showTagFilter": true,
|
"showTagFilter": true,
|
||||||
@@ -49,34 +49,34 @@
|
|||||||
],
|
],
|
||||||
"rings": [
|
"rings": [
|
||||||
{
|
{
|
||||||
"id": "core",
|
"id": "adopt",
|
||||||
"title": "Core",
|
"title": "Adopt",
|
||||||
"description": "Technologies critiques pour le business model. Indispensables au fonctionnement et à la création de valeur. Investissement prioritaire en maintenance et évolution.",
|
"description": "Technologies recommandées et utilisées avec succès en production. Elles sont stables, éprouvées et peuvent être adoptées en toute confiance pour de nouveaux projets. Utilisation active dans l'écosystème Duniter/Ğ1.",
|
||||||
"color": "#27ae60",
|
"color": "#27ae60",
|
||||||
"radius": 0.5,
|
"radius": 0.5,
|
||||||
"strokeWidth": 5
|
"strokeWidth": 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "strategic",
|
"id": "trial",
|
||||||
"title": "Strategic",
|
"title": "Trial",
|
||||||
"description": "Technologies stratégiques pour la croissance et le développement. Investissements importants pour renforcer la position concurrentielle.",
|
"description": "Technologies à essayer. Elles sont prometteuses et ont été testées avec succès dans certains contextes. À considérer pour de nouveaux projets. Technologies en phase d'expérimentation active.",
|
||||||
"color": "#3498db",
|
"color": "#3498db",
|
||||||
"radius": 0.69,
|
"radius": 0.69,
|
||||||
"strokeWidth": 4
|
"strokeWidth": 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "support",
|
"id": "assess",
|
||||||
"title": "Support",
|
"title": "Assess",
|
||||||
"description": "Technologies de support nécessaires mais non critiques. À maintenir à un niveau fonctionnel sans sur-investissement.",
|
"description": "Technologies à évaluer. Elles sont prometteuses mais nécessitent une évaluation approfondie avant adoption. À surveiller et tester. Technologies nécessitant une analyse plus poussée.",
|
||||||
"color": "#95a5a6",
|
"color": "#f39c12",
|
||||||
"radius": 0.85,
|
"radius": 0.85,
|
||||||
"strokeWidth": 3
|
"strokeWidth": 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "legacy",
|
"id": "hold",
|
||||||
"title": "Legacy",
|
"title": "Hold",
|
||||||
"description": "Technologies à remplacer. Présentent des risques techniques, des coûts élevés ou sont obsolètes. Planifier la migration vers des alternatives modernes.",
|
"description": "Technologies à éviter ou à remplacer. Elles présentent des risques, sont obsolètes ou ne sont plus recommandées. À éviter pour de nouveaux projets. Technologies à migrer ou remplacer.",
|
||||||
"color": "#c0392b",
|
"color": "#e74c3c",
|
||||||
"radius": 1,
|
"radius": 1,
|
||||||
"strokeWidth": 2
|
"strokeWidth": 2
|
||||||
}
|
}
|
||||||
@@ -105,20 +105,20 @@
|
|||||||
"social": [],
|
"social": [],
|
||||||
"imprint": "",
|
"imprint": "",
|
||||||
"labels": {
|
"labels": {
|
||||||
"title": "Radar Stratégique Business - Laplank",
|
"title": "Radar Technologique Laplank",
|
||||||
"imprint": "Informations légales",
|
"imprint": "Informations légales",
|
||||||
"quadrant": "Quadrant",
|
"quadrant": "Quadrant",
|
||||||
"quadrantOverview": "Vue d'ensemble des quadrants",
|
"quadrantOverview": "Vue d'ensemble des quadrants",
|
||||||
"zoomIn": "Zoomer",
|
"zoomIn": "Zoomer",
|
||||||
"filterByTag": "Filtrer par tag",
|
"filterByTag": "Filtrer par tag",
|
||||||
"footer": "Radar stratégique pour analyser les technologies de l'écosystème Laplank et définir une stratégie d'évolution technique alignée avec les objectifs business.",
|
"footer": "Radar technologique pour suivre l'évolution des technologies de l'écosystème Laplank avec historique des versions.",
|
||||||
"notUpdated": "Cet élément n'a pas été mis à jour dans les trois dernières versions du Radar.",
|
"notUpdated": "Cet élément n'a pas été mis à jour dans les trois dernières versions du Radar.",
|
||||||
"notFound": "404 - Page non trouvée",
|
"notFound": "404 - Page non trouvée",
|
||||||
"pageAbout": "Comment utiliser le Radar Business ?",
|
"pageAbout": "Comment utiliser le Radar Technologique ?",
|
||||||
"pageOverview": "Vue d'ensemble des technologies",
|
"pageOverview": "Vue d'ensemble des technologies",
|
||||||
"pageSearch": "Recherche",
|
"pageSearch": "Recherche",
|
||||||
"searchPlaceholder": "Que recherchez-vous ?",
|
"searchPlaceholder": "Que recherchez-vous ?",
|
||||||
"metaDescription": "Radar stratégique business pour l'écosystème Duniter/Ğ1 - Analyse des technologies et définition de la stratégie d'évolution."
|
"metaDescription": "Radar technologique pour l'écosystème Laplank - Suivi de l'évolution des technologies avec historique."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "3Node"
|
title: "3Node"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [3Node, nœuds, serveurs]
|
tags: [3Node, nœuds, serveurs]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "AIBox"
|
title: "AIBox"
|
||||||
ring: strategic
|
ring: assess
|
||||||
quadrant: technologies-emergentes
|
quadrant: technologies-emergentes
|
||||||
tags: [AIBox, IA, machine learning]
|
tags: [AIBox, IA, machine learning]
|
||||||
businessImpact: high
|
businessImpact: high
|
||||||
@@ -30,7 +30,7 @@ skillGap: high
|
|||||||
## Compétences
|
## Compétences
|
||||||
|
|
||||||
- Nombre de personnes maîtrisant : 1
|
- Nombre de personnes maîtrisant : 1
|
||||||
- Membres de l'équipe : Yvv
|
- Membres de l'équipe : yvv
|
||||||
- Niveau moyen : beginner
|
- Niveau moyen : beginner
|
||||||
- Risque de compétence manquante : high
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
40
radar/2025-01-15/ansible.md
Normal file
40
radar/2025-01-15/ansible.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
title: "Ansible"
|
||||||
|
ring: trial
|
||||||
|
quadrant: technologies-emergentes
|
||||||
|
tags: [Ansible, automation, infrastructure]
|
||||||
|
businessImpact: high
|
||||||
|
costToReplace: 0
|
||||||
|
revenueImpact: indirect
|
||||||
|
riskLevel: medium
|
||||||
|
competencyLevel: beginner
|
||||||
|
maintenanceCost: 0
|
||||||
|
differentiation: high
|
||||||
|
teamCoverage: 0
|
||||||
|
skillGap: high
|
||||||
|
---
|
||||||
|
|
||||||
|
- **Utilisation** : Automatisation de l'infrastructure et du déploiement
|
||||||
|
- **Description** : Outil d'automatisation IT pour la configuration, le déploiement et la gestion des serveurs
|
||||||
|
- **Compétences requises** : Automatisation, gestion d'infrastructure, YAML, SSH
|
||||||
|
|
||||||
|
## Impact Business
|
||||||
|
|
||||||
|
À compléter
|
||||||
|
|
||||||
|
## Coûts
|
||||||
|
|
||||||
|
- Coût de remplacement : 0€
|
||||||
|
- Coût de maintenance annuel : 0€
|
||||||
|
|
||||||
|
## Compétences
|
||||||
|
|
||||||
|
- Nombre de personnes maîtrisant : 0
|
||||||
|
- Membres de l'équipe : Aucun
|
||||||
|
- Niveau moyen : beginner
|
||||||
|
- Risque de compétence manquante : high
|
||||||
|
|
||||||
|
## Recommandations
|
||||||
|
|
||||||
|
À compléter avec des recommandations stratégiques.
|
||||||
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "Bash"
|
title: "Bash"
|
||||||
ring: support
|
ring: adopt
|
||||||
quadrant: technologies-commodite
|
quadrant: technologies-commodite
|
||||||
tags: [bash, scripting]
|
tags: [bash, scripting]
|
||||||
businessImpact: medium
|
businessImpact: medium
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user