From 2c57bf379cf8ee96e88b702cf9c4c89d9150fa68 Mon Sep 17 00:00:00 2001 From: syoul Date: Tue, 2 Dec 2025 19:01:39 +0100 Subject: [PATCH] =?UTF-8?q?Bouton=20strat=C3=A9gie=20en=20haut=20de=20page?= =?UTF-8?q?=20+=20affichage=20du=20contenu=20complet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Bouton déplacé en haut de page (header ou barre fixe) - Contenu complet de strategie-evolution-technique.md intégré - Conversion Markdown vers HTML avec styles - Script serve-business.sh configuré pour port 3004 --- public/strategie-script.js | 481 +++++++++++++++++++++++++++++++++++-- scripts/serve-business.sh | 4 +- 2 files changed, 469 insertions(+), 16 deletions(-) diff --git a/public/strategie-script.js b/public/strategie-script.js index ae3d870..9ddd32a 100644 --- a/public/strategie-script.js +++ b/public/strategie-script.js @@ -1,7 +1,334 @@ -// Script pour la stratégie - version inline pour injection directe +// Script pour la stratégie - avec contenu complet du fichier Markdown (function() { + // Contenu de la stratégie (extrait de docs/strategie-evolution-technique.md) + const strategieMarkdown = `# Stratégie d'Évolution Technique - Laplank + +Date: 02/12/2025 + +## Vision Technique à 3 Ans + +### Objectifs Stratégiques + +1. **Renforcer la différenciation** : Maintenir et développer les technologies qui créent un avantage concurrentiel +2. **Réduire les risques** : Éliminer les dépendances critiques et les gaps de compétences +3. **Optimiser les coûts** : Réduire les coûts de maintenance des technologies de commodité +4. **Innover** : Explorer et adopter les technologies émergentes prometteuses +5. **Infrastructure décentralisée** : Développer l'expertise et l'adoption de ThreeFold pour une infrastructure autonome et résiliente + +## Roadmap d'Évolution + +### Axe Transversal : Data Visualization & UX (NOUVEAU) + +**Objectif** : Devenir la référence en termes de transparence et d'accessibilité des données blockchain/crypto et infrastructure. + +**Technologies Clés** : +- **D3.js / ECharts** : Pour des visualisations avancées et interactives. +- **Cytoscape.js** : Pour visualiser la "Toile de Confiance" (Web of Trust). +- **Grafana** : Pour le monitoring de l'infrastructure (Duniter & ThreeFold). +- **Leaflet** : Pour la cartographie des nœuds. + +**Actions** : +1. Développer un explorateur de **Web of Trust visuel** (Graph). +2. Créer des dashboards de **santé du réseau** (Duniter & ThreeFold). +3. Former l'équipe front-end sur **D3.js** ou **ECharts**. + +**KPIs** : +- Temps de compréhension pour un nouvel utilisateur. +- Adoption des outils de visualisation. +- Nombre de vues sur les dashboards publics. + +### Année 1 : Consolidation et Réduction des Risques + +#### Q1-Q2 : Gestion des Gaps de Compétences Critiques + +**Objectif** : Réduire les risques liés aux compétences manquantes + +**Actions** : +- Identifier les technologies critiques avec faible couverture d'équipe +- Mettre en place un plan de formation pour les technologies core +- Documenter les connaissances critiques +- Créer des plans de continuité en cas de départ + +**Technologies prioritaires** : +- Rust / Substrate (blockchain core) +- Docker / Infrastructure +- PostgreSQL +- ThreeFold Grid (infrastructure décentralisée - bonne couverture mais à renforcer) + +**Budget estimé** : Formation et documentation + +#### Q3-Q4 : Optimisation des Commodités + +**Objectif** : Réduire les coûts de maintenance des technologies non différenciantes + +**Actions** : +- Auditer les coûts de maintenance +- Identifier les opportunités d'optimisation +- Standardiser les pratiques +- Automatiser les tâches répétitives + +**Technologies cibles** : +- Infrastructure (Docker, Linux, PostgreSQL) +- Outils de développement + +**Budget estimé** : Automatisation et optimisation + +### Année 2 : Innovation et Différenciation + +#### Q1-Q2 : Évaluation des Technologies Émergentes + +**Objectif** : Identifier et évaluer les technologies prometteuses + +**Actions** : +- POC (Proof of Concept) sur les technologies émergentes +- Évaluer l'impact business potentiel +- Mesurer la capacité de différenciation +- Tester l'adoption par l'équipe + +**Technologies à évaluer** : +- IPFS (stockage distribué) +- Nostr (protocole décentralisé) +- Serverless (architecture) +- ThreeFold Grid (infrastructure décentralisée - opportunité majeure) +- Zero OS (système d'exploitation bare metal) +- ThreeFold Compute / Storage (capacités de calcul et stockage décentralisées) +- Mycelium Network (réseau overlay chiffré) +- AIBox (solution IA décentralisée) + +**Budget estimé** : POC et évaluation + +#### Q3-Q4 : Adoption Stratégique + +**Objectif** : Adopter les technologies émergentes validées + +**Actions** : +- Intégrer les technologies validées dans les projets +- Former l'équipe +- Documenter les bonnes pratiques +- Monitorer l'impact + +**Budget estimé** : Développement et formation + +### Année 3 : Maturité et Évolution Continue + +#### Objectifs + +- Maintenir un radar technologique à jour +- Continuer l'innovation +- Optimiser en continu +- Gérer les risques proactivement + +## Priorités d'Investissement + +### Priorité 1 : Technologies Core (Critiques) + +**Investissement** : Maximum +**Focus** : Stabilité, performance, sécurité + +**Technologies** : +- Rust / Substrate (blockchain) +- Infrastructure critique +- ThreeFold Grid (infrastructure décentralisée - bonne couverture) + +**Actions** : +- Maintenance proactive +- Formation continue +- Documentation exhaustive +- Plans de continuité +- Développement de l'expertise ThreeFold + +### Priorité 2 : Technologies Stratégiques + +**Investissement** : Élevé +**Focus** : Croissance, différenciation + +**Technologies** : +- Technologies différenciantes +- Technologies émergentes prometteuses +- ThreeFold (écosystème complet - opportunité stratégique majeure) + - ThreeFold Grid (infrastructure décentralisée) + - Zero OS (système bare metal) + - ThreeFold Compute / Storage (capacités décentralisées) + - Mycelium Network (réseau overlay) + - AIBox (IA décentralisée) + +**Actions** : +- Développement actif +- Innovation +- Expérimentation +- POC sur infrastructure décentralisée +- Formation sur ThreeFold + +### Priorité 3 : Technologies de Support + +**Investissement** : Modéré +**Focus** : Efficacité, coût + +**Technologies** : +- Technologies de commodité +- Outils de développement + +**Actions** : +- Optimisation +- Standardisation +- Automatisation + +### Priorité 4 : Technologies Legacy + +**Investissement** : Minimal (migration) +**Focus** : Remplacement, réduction des risques + +**Technologies** : +- Technologies obsolètes +- Technologies à risque + +**Actions** : +- Planification de migration +- Réduction progressive +- Remplacement + +## Plan de Migration + +### Technologies à Migrer + +#### Court Terme (0-6 mois) + +Aucune migration urgente identifiée actuellement. + +#### Moyen Terme (6-18 mois) + +- Évaluer les technologies legacy +- Planifier les remplacements +- Identifier les alternatives + +#### Long Terme (18+ mois) + +- Exécuter les migrations planifiées +- Valider les alternatives +- Documenter les leçons apprises + +## Gestion des Risques + +### Risques Identifiés + +1. **Gaps de compétences** : Technologies critiques avec faible couverture +2. **Dépendances uniques** : Technologies sans alternative +3. **Obsolescence** : Technologies vieillissantes +4. **Coûts** : Maintenance élevée de certaines technologies + +### Stratégies de Mitigation + +1. **Formation et recrutement** : Réduire les gaps de compétences +2. **Diversification** : Éviter les dépendances uniques +3. **Veille technologique** : Détecter l'obsolescence tôt +4. **Optimisation continue** : Réduire les coûts + +## KPIs de Suivi + +### Métriques Techniques + +- **Couverture d'équipe** : Nombre moyen de personnes par technologie +- **Gaps de compétences** : Nombre de technologies avec gap élevé +- **Risques techniques** : Nombre de technologies à risque élevé +- **Coûts** : Coût total de maintenance + +### Métriques Business + +- **Différenciation** : Nombre de technologies différenciantes +- **Innovation** : Nombre de technologies émergentes adoptées +- **Efficacité** : Réduction des coûts de maintenance +- **Stabilité** : Réduction des incidents techniques + +### Objectifs Annuels + +**Année 1** : +- Réduire les gaps de compétences de 50% +- Documenter 100% des technologies core +- Réduire les coûts de maintenance de 20% +- POC ThreeFold Grid (déploiement de nœuds de test) +- Lancement du projet DataViz (POC Web of Trust visuelle) + +**Année 2** : +- Adopter 2-3 technologies émergentes (dont ThreeFold Grid) +- Maintenir les gaps de compétences < 2 technologies +- Optimiser les coûts de 30% +- Déployer infrastructure ThreeFold en production (si POC validé) +- Former l'équipe sur Zero OS et ThreeFold + +**Année 3** : +- Maintenir un radar à jour +- Continuer l'innovation +- Optimiser en continu +- Infrastructure décentralisée opérationnelle (ThreeFold) +- Réduire la dépendance aux infrastructures centralisées + +## Communication et Gouvernance + +### Comité Technique + +- Réunion trimestrielle pour revue du radar +- Décisions sur les priorités d'investissement +- Validation des migrations + +### Reporting + +- Rapport mensuel sur les métriques +- Rapport trimestriel sur l'avancement +- Rapport annuel sur la stratégie + +### Parties Prenantes + +- Équipe technique +- Direction +- Financement (si applicable) +- Communauté (open source) + +## Conclusion + +Cette stratégie d'évolution technique vise à aligner les choix technologiques avec les objectifs business, réduire les risques, optimiser les coûts et favoriser l'innovation. + +La mise en œuvre de cette stratégie nécessite un engagement continu de l'équipe et un suivi régulier des métriques définies.`; + + // Fonction pour convertir Markdown en HTML + function markdownToHtml(md) { + let html = md; + + // Titres + html = html.replace(/^# (.*$)/gim, '

$1

'); + html = html.replace(/^## (.*$)/gim, '

$1

'); + html = html.replace(/^### (.*$)/gim, '

$1

'); + html = html.replace(/^#### (.*$)/gim, '

$1

'); + + // Gras et italique + html = html.replace(/\*\*(.*?)\*\*/gim, '$1'); + html = html.replace(/\*(.*?)\*/gim, '$1'); + + // Listes + html = html.replace(/^- (.*$)/gim, '
  • $1
    • '); + html = html.replace(/^\d+\. (.*$)/gim, '
  • $1
    • '); + + // Séparateurs + html = html.replace(/^---$/gim, '
    '); + + // Paragraphes + html = html.split('\n\n').map(block => { + if (block.trim().startsWith('' + block.trim() + '

    '; + }).join('\n'); + + // Grouper les listes + html = html.replace(/(
  • .*?<\/li>)/gim, function(match) { + return '
      ' + match + '
    '; + }); + html = html.replace(/<\/ul>\s*
      /gim, ''); + + return html; + } + function initStrategyLinks() { - addStrategyLinkToFooter(); + addStrategyLinkToHeader(); interceptStrategyLinks(); handleStrategyRoute(); } @@ -15,7 +342,7 @@ function interceptStrategyLinks() { document.addEventListener('click', function(e) { const link = e.target.closest('a'); - if (link && (link.href.includes('/business/strategie') || link.getAttribute('href') === '/business/strategie' || link.id === 'strategie-link')) { + if (link && (link.href.includes('/business/strategie') || link.getAttribute('href') === '/business/strategie' || link.id === 'strategie-link' || link.classList.contains('strategie-link'))) { e.preventDefault(); e.stopPropagation(); createStrategyPage(); @@ -29,7 +356,77 @@ window.originalBodyContent = document.body.innerHTML; } - document.body.innerHTML = '
      ← Retour au Radar

      Stratégie d\'Évolution Technique - Laplank

      Date de mise à jour : 02/12/2025

      La stratégie complète est disponible dans le dépôt Git :

      📋 Voir la stratégie sur GitLab

      '; + // Convertir le Markdown en HTML + const htmlContent = markdownToHtml(strategieMarkdown); + + document.body.innerHTML = ` +
      +
      + ← Retour au Radar +
      + ${htmlContent} +
      +
      +
      + `; + + // Appliquer des styles pour le contenu Markdown + const contentDiv = document.getElementById('strategie-content'); + if (contentDiv) { + contentDiv.querySelectorAll('h1').forEach(h => { + h.style.color = '#1a4d3a'; + h.style.borderBottom = '3px solid #2ecc71'; + h.style.paddingBottom = '10px'; + h.style.marginTop = '30px'; + h.style.marginBottom = '20px'; + }); + contentDiv.querySelectorAll('h2').forEach(h => { + h.style.color = '#2ecc71'; + h.style.marginTop = '30px'; + h.style.marginBottom = '15px'; + }); + contentDiv.querySelectorAll('h3').forEach(h => { + h.style.color = '#3498db'; + h.style.marginTop = '20px'; + h.style.marginBottom = '10px'; + }); + contentDiv.querySelectorAll('h4').forEach(h => { + h.style.color = '#555'; + h.style.marginTop = '15px'; + h.style.marginBottom = '8px'; + }); + contentDiv.querySelectorAll('ul').forEach(ul => { + ul.style.margin = '10px 0'; + ul.style.paddingLeft = '30px'; + ul.style.listStyleType = 'disc'; + }); + contentDiv.querySelectorAll('li').forEach(li => { + li.style.margin = '5px 0'; + }); + contentDiv.querySelectorAll('p').forEach(p => { + p.style.margin = '10px 0'; + }); + contentDiv.querySelectorAll('a').forEach(a => { + a.style.color = '#2ecc71'; + a.style.textDecoration = 'none'; + }); + contentDiv.querySelectorAll('a').forEach(a => { + a.addEventListener('mouseenter', function() { + this.style.textDecoration = 'underline'; + }); + a.addEventListener('mouseleave', function() { + this.style.textDecoration = 'none'; + }); + }); + contentDiv.querySelectorAll('hr').forEach(hr => { + hr.style.border = 'none'; + hr.style.borderTop = '2px solid #2ecc71'; + hr.style.margin = '30px 0'; + }); + contentDiv.querySelectorAll('strong').forEach(s => { + s.style.color = '#1a4d3a'; + }); + } const backLink = document.getElementById('back-to-radar'); if (backLink) { @@ -47,29 +444,86 @@ window.history.pushState({page: 'strategie'}, 'Stratégie', '/business/strategie'); } - function addStrategyLinkToFooter() { - const footer = document.querySelector('footer') || document.querySelector('.footer') || document.querySelector('[class*="footer"]'); - if (footer) { - if (footer.querySelector('#strategie-link') || footer.querySelector('a[href*="strategie"]')) { + function addStrategyLinkToHeader() { + // Chercher le header ou la barre de navigation + const header = document.querySelector('header') || + document.querySelector('nav') || + document.querySelector('[class*="header"]') || + document.querySelector('[class*="nav"]') || + document.querySelector('[class*="Header"]') || + document.querySelector('[class*="Nav"]') || + document.querySelector('div[role="banner"]'); + + if (header) { + if (header.querySelector('#strategie-link') || header.querySelector('a[href*="strategie"]')) { return; } const strategyLink = document.createElement('a'); strategyLink.id = 'strategie-link'; + strategyLink.className = 'strategie-link'; strategyLink.href = '#strategie'; - strategyLink.textContent = '📋 Voir la Stratégie'; - strategyLink.style.marginLeft = '10px'; + strategyLink.textContent = '📋 Stratégie'; + strategyLink.style.marginLeft = '15px'; strategyLink.style.color = '#2ecc71'; strategyLink.style.textDecoration = 'none'; strategyLink.style.fontWeight = 'bold'; - strategyLink.style.display = 'inline-block'; strategyLink.style.cursor = 'pointer'; + strategyLink.style.display = 'inline-block'; + strategyLink.style.padding = '5px 10px'; + strategyLink.style.borderRadius = '4px'; + strategyLink.style.transition = 'background 0.2s'; + strategyLink.addEventListener('mouseenter', function() { + this.style.background = 'rgba(46, 204, 113, 0.1)'; + }); + strategyLink.addEventListener('mouseleave', function() { + this.style.background = 'transparent'; + }); strategyLink.addEventListener('click', function(e) { e.preventDefault(); createStrategyPage(); }); - footer.appendChild(strategyLink); + header.appendChild(strategyLink); } else { - setTimeout(addStrategyLinkToFooter, 1000); + // Si pas de header trouvé, créer une barre en haut de page + const existingTopBar = document.getElementById('strategie-top-bar'); + if (existingTopBar) { + return; + } + + const topBar = document.createElement('div'); + topBar.id = 'strategie-top-bar'; + topBar.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; background: rgba(26, 77, 58, 0.95); padding: 10px 20px; z-index: 1000; text-align: right; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'; + + const strategyLink = document.createElement('a'); + strategyLink.id = 'strategie-link'; + strategyLink.className = 'strategie-link'; + strategyLink.href = '#strategie'; + strategyLink.textContent = '📋 Stratégie'; + strategyLink.style.color = '#2ecc71'; + strategyLink.style.textDecoration = 'none'; + strategyLink.style.fontWeight = 'bold'; + strategyLink.style.cursor = 'pointer'; + strategyLink.style.padding = '5px 15px'; + strategyLink.style.borderRadius = '4px'; + strategyLink.style.transition = 'background 0.2s'; + strategyLink.addEventListener('mouseenter', function() { + this.style.background = 'rgba(46, 204, 113, 0.2)'; + }); + strategyLink.addEventListener('mouseleave', function() { + this.style.background = 'transparent'; + }); + strategyLink.addEventListener('click', function(e) { + e.preventDefault(); + createStrategyPage(); + }); + + topBar.appendChild(strategyLink); + document.body.insertBefore(topBar, document.body.firstChild); + + // Ajouter un padding au body pour compenser la barre fixe + if (!document.body.style.paddingTop || document.body.style.paddingTop === '0px') { + document.body.style.paddingTop = '50px'; + } } } @@ -86,4 +540,3 @@ initStrategyLinks(); } })(); - diff --git a/scripts/serve-business.sh b/scripts/serve-business.sh index 783e071..462499c 100755 --- a/scripts/serve-business.sh +++ b/scripts/serve-business.sh @@ -29,8 +29,8 @@ cp -r radar-business/2025-01-15 radar echo "Configuration business activée" echo "Démarrage du serveur..." -# Démarrer le serveur -npm run serve +# Démarrer le serveur sur le port 3004 +PORT=3004 npm run serve # Restaurer la config originale à la sortie cleanup() {