Bouton stratégie en haut de page + affichage du contenu complet

- 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
2025-12-02 19:01:39 +01:00
parent 7a244013d6
commit 2c57bf379c
2 changed files with 469 additions and 16 deletions
--- 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, '<h1>$1</h1>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^#### (.*$)/gim, '<h4>$1</h4>');
+    
+    // Gras et italique
+    html = html.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');
+    html = html.replace(/\*(.*?)\*/gim, '<em>$1</em>');
+    
+    // Listes
+    html = html.replace(/^- (.*$)/gim, '<li>$1</li>');
+    html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>');
+    
+    // Séparateurs
+    html = html.replace(/^---$/gim, '<hr>');
+    
+    // Paragraphes
+    html = html.split('\n\n').map(block => {
+      if (block.trim().startsWith('<h') || block.trim().startsWith('<ul') || block.trim().startsWith('<li') || block.trim().startsWith('<hr')) {
+        return block;
+      }
+      return '<p>' + block.trim() + '</p>';
+    }).join('\n');
+    
+    // Grouper les listes
+    html = html.replace(/(<li>.*?<\/li>)/gim, function(match) {
+      return '<ul>' + match + '</ul>';
+    });
+    html = html.replace(/<\/ul>\s*<ul>/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 = '<div style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; min-height: 100vh;"><div style="background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"><a href="#" id="back-to-radar" style="display: inline-block; margin-bottom: 20px; color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer;">← Retour au Radar</a><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>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></div></div>';
+    // Convertir le Markdown en HTML
+    const htmlContent = markdownToHtml(strategieMarkdown);
+    
+    document.body.innerHTML = `
+      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; min-height: 100vh;">
+        <div style="background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+          <a href="#" id="back-to-radar" style="display: inline-block; margin-bottom: 20px; color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer;">← Retour au Radar</a>
+          <div id="strategie-content" style="line-height: 1.8; color: #333;">
+            ${htmlContent}
+          </div>
+        </div>
+      </div>
+    `;
+    
+    // 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();
  }
 })();
-
--- 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() {