a5ace8b0fa
- Nouveau script team-block-script.js chargé en premier (config-business.json) - Bloqueur absolu qui empêche tout autre script sur /team - Page team.tsx encore plus agressive (remplacement useEffect) - Double protection dans strategie-script.js - Script principal bloqué si __blockTeamPages=true Cette approche à couches multiples devrait définitivement résoudre : - Les deux liens équipe (1 seul) - L'affichage radar au lieu des visualisations
1078 lines
42 KiB
JavaScript
1078 lines
42 KiB
JavaScript
// SCRIPT ULTRA-PROTECTEUR CONTRE LES PAGES ÉQUIPE
|
|
(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 ---
|
|
function checkAuth() {
|
|
const SESSION_KEY = 'radar_auth_session';
|
|
// Mot de passe simple
|
|
const PASSWORD = 'laplank-radar';
|
|
|
|
if (localStorage.getItem(SESSION_KEY) === 'valid') {
|
|
return; // Déjà connecté
|
|
}
|
|
|
|
// Créer l'écran de blocage
|
|
const overlay = document.createElement('div');
|
|
overlay.id = 'auth-overlay';
|
|
overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a4d3a; z-index: 10000; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: sans-serif;';
|
|
|
|
overlay.innerHTML = `
|
|
<div style="background: white; padding: 40px; border-radius: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">
|
|
<h2 style="margin-top: 0; color: #1a4d3a;">Accès Restreint</h2>
|
|
<p style="color: #666; margin-bottom: 20px;">Veuillez entrer le mot de passe pour accéder au Radar Stratégique.</p>
|
|
<input type="password" id="auth-pass" placeholder="Mot de passe" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: 200px; margin-bottom: 15px; display: block; margin: 0 auto 15px auto;">
|
|
<button id="auth-btn" style="background: #2ecc71; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;">Valider</button>
|
|
<p id="auth-error" style="color: #e74c3c; display: none; margin-top: 10px; font-size: 0.9em;">Mot de passe incorrect</p>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(overlay);
|
|
// Cacher le contenu principal pour éviter le flash
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
const btn = document.getElementById('auth-btn');
|
|
const input = document.getElementById('auth-pass');
|
|
const errorMsg = document.getElementById('auth-error');
|
|
|
|
function validate() {
|
|
if (input.value === PASSWORD) {
|
|
localStorage.setItem(SESSION_KEY, 'valid');
|
|
overlay.remove();
|
|
document.body.style.overflow = 'auto';
|
|
} else {
|
|
errorMsg.style.display = 'block';
|
|
input.style.border = '1px solid #e74c3c';
|
|
}
|
|
}
|
|
|
|
btn.addEventListener('click', validate);
|
|
input.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') validate();
|
|
});
|
|
}
|
|
|
|
// Contenu des pages Markdown
|
|
const pagesContent = {
|
|
'strategie': `# Stratégie d'Évolution Technique - Laplank
|
|
|
|
**Date de mise à jour** : 02/12/2025
|
|
|
|
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.`,
|
|
|
|
'business': `# Stratégie Business : Data Visualization & Flux Économiques
|
|
|
|
**Date** : 02/12/2025
|
|
**Contexte** : En marge de l'écosystème Duniter/Ğ1, exploration des opportunités de marché autour de la visualisation de données économiques et logistiques.
|
|
|
|
---
|
|
|
|
## 1. Analyse du Marché de la Data Visualization
|
|
|
|
### Vue d'ensemble
|
|
Le marché de la visualisation de données est en pleine expansion, porté par la complexité croissante des flux d'informations et le besoin de transparence.
|
|
|
|
**Taille du marché** : En croissance constante (CAGR estimé à >10% annuel).
|
|
**Moteurs** :
|
|
- Besoin de prise de décision basée sur les données (Data-Driven Decision Making).
|
|
- Complexité des chaînes d'approvisionnement (Supply Chain).
|
|
- Demande de transparence financière et RSE (Responsabilité Sociétale des Entreprises).
|
|
|
|
### Segments Pertinents pour Laplank
|
|
|
|
1. **Visualisation de Flux Financiers Complexes (FinTech / DeFi)**
|
|
* **Besoin** : Comprendre les mouvements de fonds, la création monétaire, les graphes de transactions.
|
|
* **Cible** : DAOs, projets Blockchain, ONG, Auditeurs financiers.
|
|
* **Offre** : Dashboards interactifs de transparence, explorateurs de blockchain visuels (au-delà des simples listes de transactions).
|
|
* **Lien avec Duniter** : Utilisation possible de la blockchain pour certifier les étapes, visualisées ensuite pour le consommateur final.
|
|
|
|
2. **Transparence de la Supply Chain (Flux de Marchandises)**
|
|
* **Besoin** : Tracer l'origine et le parcours des produits (traçabilité).
|
|
* **Cible** : Coopératives, circuits courts, commerce équitable, industrie agroalimentaire.
|
|
|
|
3. **Visualisation de Réseaux et Communautés (Web of Trust)**
|
|
* **Besoin** : Cartographier les relations humaines, la confiance, la gouvernance décentralisée.
|
|
* **Cible** : Associations, collectifs, réseaux sociaux décentralisés.
|
|
|
|
---
|
|
|
|
## 2. Opportunité : Flux Économiques & Marchandises
|
|
|
|
C'est le segment le plus prometteur "en marge" de la crypto pure, car il touche l'économie réelle.
|
|
|
|
### Le Problème
|
|
- Les ERP (Enterprise Resource Planning) classiques sont austères et peu visuels.
|
|
- La donnée est silotée.
|
|
- Le consommateur ou le décideur ne "voit" pas le flux global.
|
|
|
|
### La Solution Laplank
|
|
Proposer une **plateforme de visualisation unifiée** capable de représenter graphiquement :
|
|
- **Flux monétaires** (€, Ğ1, Crypto)
|
|
- **Flux physiques** (Marchandises, Stocks, Logistique)
|
|
|
|
### Cas d'Usage Concret : "Le Circuit Court Augmenté"
|
|
Imaginez une coopérative de producteurs.
|
|
- **Input** : Données de production, transport, vente.
|
|
- **Visualisation** :
|
|
- **Carte interactive (Leaflet)** : Localisation des producteurs et trajets.
|
|
- **Graphe de flux (Sankey Diagram)** : Répartition de la valeur (combien va au producteur, au transporteur, à la coopérative). *Transparence radicale.*
|
|
- **Tableau de bord (ECharts/D3)** : Saisonnalité, stocks en temps réel.
|
|
|
|
### Avantage Concurrentiel (Différenciation)
|
|
- **Expertise Technique** : Maîtrise de technologies avancées (D3.js, Rust/Wasm pour la perf, ThreeFold pour l'hébergement souverain).
|
|
- **Approche Éthique/Souveraine** : Hébergement décentralisé (ThreeFold), pas de GAFAM, respect des données.
|
|
- **Double Compétence** : Capacité à lier Blockchain (certitude de la donnée) et DataViz (lisibilité de la donnée).
|
|
|
|
---
|
|
|
|
## 3. Modèle Économique Potentiel
|
|
|
|
1. **Service B2B (SaaS / On-Premise)**
|
|
- Abonnement pour les entreprises/coopératives souhaitant visualiser leurs données.
|
|
- Hébergement sur ThreeFold (revenus récurrents).
|
|
|
|
2. **Prestation de Conseil & Développement**
|
|
- Création de dashboards sur mesure pour des clients spécifiques.
|
|
- Audit de données et mise en qualité avant visualisation.
|
|
|
|
3. **Produit "Open Core"**
|
|
- Version de base open-source (attraction communautaire).
|
|
- Modules "Premium" pour connecteurs spécifiques (ERP propriétaires, Banques) ou fonctionnalités avancées d'analyse prédictive (IA).
|
|
|
|
---
|
|
|
|
## 4. Roadmap Business (Piste)
|
|
|
|
### Phase 1 : POC & Vitrine (6 mois)
|
|
- Utiliser l'écosystème Duniter/Ğ1 comme "Client Zéro".
|
|
- Développer l'explorateur visuel de Web of Trust et de flux monétaires.
|
|
- **Objectif** : Démontrer la capacité technique et l'impact visuel. "Rendre sexy la donnée complexe".
|
|
|
|
### Phase 2 : Extension aux Flux Physiques (6-12 mois)
|
|
- Trouver un partenaire dans l'économie réelle (ex: coopérative bio, réseau de logistique locale).
|
|
- Adapter les outils de visualisation pour tracer des produits physiques.
|
|
- **Objectif** : Valider le marché hors crypto.
|
|
|
|
### Phase 3 : Plateforme de Transparence Économique (12+ mois)
|
|
- Lancer une offre packagée.
|
|
- "Visualisez votre impact économique et écologique en temps réel".
|
|
|
|
---
|
|
|
|
## 5. Technologies Clés à Surveiller
|
|
|
|
- **Digital Twins (Jumeaux Numériques)** : Représentation virtuelle d'objets physiques.
|
|
- **IoT (Internet of Things)** : Capteurs pour alimenter les données de flux physiques.
|
|
- **Standardisation (GS1 / EPCIS)** : Normes d'échange de données logistiques.
|
|
|
|
---
|
|
|
|
## Conclusion
|
|
|
|
Le marché de la DataViz appliquée aux **flux économiques mixtes (monnaie + matière)** est une niche stratégique pertinente. Elle valorise l'expertise technique de l'équipe tout en s'ouvrant à des clients "traditionnels" cherchant transparence et optimisation. L'infrastructure ThreeFold apporte la couche de souveraineté nécessaire pour traiter ces données sensibles.`,
|
|
|
|
'dataviz': `# Opportunités d'Extension : Data Visualization
|
|
|
|
**Date** : 02/12/2025
|
|
**Objectif** : Identifier les secteurs porteurs pour l'expertise DataViz de l'équipe, au-delà des flux économiques.
|
|
|
|
---
|
|
|
|
## 1. Territoires & Open Data (Smart Cities Souveraines)
|
|
|
|
Les collectivités locales disposent de plus en plus de données (Open Data) mais manquent d'outils pour les rendre intelligibles aux citoyens.
|
|
|
|
* **Opportunité** : Créer des portails de transparence pour les mairies/collectivités.
|
|
* **Cas d'usage** :
|
|
* **Visualisation budgétaire** : "Où vont mes impôts ?" (Diagrammes de Sankey, Treemaps).
|
|
* **Urbanisme** : Cartographie des travaux, permis de construire, zones inondables.
|
|
* **Démocratie participative** : Visualiser les résultats de consultations citoyennes.
|
|
* **Synergie Technique** : Leaflet (cartes), D3.js (budgets), ThreeFold (hébergement local et souverain des données citoyennes).
|
|
|
|
## 2. Green Tech & Impact Environnemental
|
|
|
|
La mesure et la communication de l'impact écologique deviennent obligatoires (CSRD) et stratégiques.
|
|
|
|
* **Opportunité** : Tableaux de bord RSE (Responsabilité Sociétale des Entreprises) et empreinte carbone.
|
|
* **Cas d'usage** :
|
|
* **Visualisation de l'empreinte carbone** : Scope 1, 2, 3. Graphiques d'évolution.
|
|
* **Monitoring énergétique** : Visualisation temps réel de la consommation (bâtiments, serveurs). *Lien direct avec l'offre ThreeFold "Green IT".*
|
|
* **Traçabilité des déchets** : Suivre le cycle de vie des produits.
|
|
* **Synergie Technique** : IoT (capteurs), ECharts (séries temporelles), Rust (traitement performant de gros volumes de données capteurs).
|
|
|
|
## 3. Visualisation de la Connaissance (Knowledge Management)
|
|
|
|
Dans un monde infobèse, organiser et visualiser l'information est une valeur clé.
|
|
|
|
* **Opportunité** : Outils de "Second Cerveau" ou de gestion des connaissances pour entreprises/recherche.
|
|
* **Cas d'usage** :
|
|
* **Graphes de connaissances** : Visualiser les liens entre documents, personnes, projets (comme Obsidian ou Roam, mais version web/collaborative).
|
|
* **Cartographie des compétences** : Version avancée du Radar Technologique pour les RH (gestion des talents).
|
|
* **Exploration documentaire** : Naviguer visuellement dans des bases documentaires complexes (juridique, technique).
|
|
* **Synergie Technique** : Cytoscape.js (graphes), ElasticSearch/MeiliSearch (indexation), IA (pour générer les liens).
|
|
|
|
## 4. Cybersécurité & Réseaux
|
|
|
|
Visualiser l'invisible pour mieux protéger.
|
|
|
|
* **Opportunité** : Interfaces de monitoring sécurité pour PME.
|
|
* **Cas d'usage** :
|
|
* **Cartographie du réseau** : Visualiser tous les appareils connectés et leurs communications.
|
|
* **Visualisation d'attaques** : Représenter les tentatives d'intrusion en temps réel (cartes de chaleur, flux).
|
|
* **Analyse de logs** : Rendre les logs serveurs lisibles graphiquement.
|
|
* **Synergie Technique** : Rust (sondes réseau), WebGL/Canvas (visualisation haute performance), ThreeFold (réseau overlay).
|
|
|
|
---
|
|
|
|
## Matrice de Priorisation
|
|
|
|
| Secteur | Potentiel Marché | Synergie Technique Actuelle | Complexité Métier | Priorité |
|
|
| :--- | :---: | :---: | :---: | :---: |
|
|
| **Flux Éco (Business)** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Moyenne | **1** |
|
|
| **Territoires (Smart City)** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Élevée (Politique) | **2** |
|
|
| **Green Tech** | ⭐⭐⭐⭐ | ⭐⭐⭐ | Moyenne | **3** |
|
|
| **Connaissance (KM)** | ⭐⭐⭐ | ⭐⭐⭐⭐ | Faible | **2** (Interne d'abord) |
|
|
| **Cybersécurité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Très Élevée | **4** |
|
|
|
|
## Conclusion
|
|
|
|
Si le focus principal reste les **Flux Économiques** (cohérent avec l'historique Duniter), l'axe **Territoires/Open Data** est le pivot le plus naturel : il s'agit toujours de visualiser des ressources et des flux, mais appliqués à la cité. De plus, l'argument de la "Souveraineté Numérique" (ThreeFold) y résonne très fort.`,
|
|
|
|
'dataviz-details': `# Analyse Détaillée : Opportunités DataViz, IA & Infrastructure
|
|
|
|
**Date** : 02/12/2025
|
|
**Type** : Approfondissement Technique & Business
|
|
**Réf** : Complément à \`opportunites-dataviz.md\`
|
|
|
|
Ce document détaille la faisabilité technique, les stacks recommandées et l'intégration spécifique avec l'infrastructure ThreeFold pour les opportunités identifiées.
|
|
|
|
---
|
|
|
|
## 1. Smart Cities & Territoires Souverains
|
|
|
|
Le marché des "Smart Cities" est souvent dominé par des solutions propriétaires cloud (Google, Cisco). Une approche **Open Source** et **Souveraine** est un différenciateur majeur pour les collectivités soucieuses de leurs données.
|
|
|
|
### Cas d'Usage : Le "City Dashboard" Citoyen
|
|
Un portail unique regroupant les flux de vie de la cité.
|
|
|
|
#### Fonctionnalités & Stack Technique
|
|
| Module | Fonctionnalité | Stack Technique Recommandée |
|
|
| :--- | :--- | :--- |
|
|
| **Mobilité** | Visualisation temps réel des bus/métros, vélos partagés. | **Front** : \`Deck.gl\` (haute perf pour objets mouvants) ou \`Mapbox GL JS\`.<br>**Data** : Protocole \`GTFS-RT\` (General Transit Feed Specification). |
|
|
| **Urbanisme** | Cadastre, PLU, Zones inondables, Travaux. | **Front** : \`Leaflet\` (léger, standard).<br>**Back** : \`PostGIS\` (Base de données spatiale). |
|
|
| **Démocratie** | Budget participatif interactif. | **Viz** : \`D3.js\` (Treemaps, Sunbursts pour explorer les budgets). |
|
|
|
|
#### Synergie ThreeFold (Infrastructure)
|
|
* **Edge Computing** : Les données de la ville (caméras, capteurs trafic) sont traitées sur des nœuds ThreeFold situés physiquement **dans la ville** (Mairies, Écoles).
|
|
* **Souveraineté** : Garantie que les données ne partent pas sur des serveurs étrangers (AWS/Azure). Argument politique fort.
|
|
|
|
#### Modèle Économique
|
|
* **B2G (Business to Government)** : Forfait d'installation + Maintenance annuelle.
|
|
* **Open Data Service** : API payante pour les acteurs privés (immo, logistique) qui veulent des données nettoyées et agrégées.
|
|
|
|
---
|
|
|
|
## 2. Green Tech : IoT & Pilotage Énergétique
|
|
|
|
Avec la crise énergétique et les obligations RSE (Directive CSRD), mesurer ne suffit plus, il faut piloter et visualiser pour réduire.
|
|
|
|
### Cas d'Usage : Jumeau Numérique Énergétique
|
|
Visualisation en temps réel de la consommation d'un parc immobilier ou industriel.
|
|
|
|
#### Architecture Technique
|
|
1. **Collecte (IoT)** : Capteurs (LoRaWAN, MQTT) remontent les données (Température, Conso élec).
|
|
2. **Ingestion (Rust)** : Service haute performance en Rust pour traiter des millions de points de mesure sans latence.
|
|
3. **Visualisation** :
|
|
* **Séries Temporelles** : \`Apache ECharts\` ou \`Grafana\` (si usage interne).
|
|
* **Heatmaps** : Visualiser les déperditions thermiques sur plan 2D/3D.
|
|
|
|
#### Synergie ThreeFold
|
|
* **Green IT** : Héberger la plateforme de monitoring sur ThreeFold permet d'afficher un bilan carbone numérique neutre ou négatif (si nœuds alimentés en solaire).
|
|
* **Sécurité** : Les données industrielles sensibles ne transitent pas par le cloud public.
|
|
|
|
---
|
|
|
|
## 3. Knowledge Management : Le "Cerveau d'Entreprise" (IA + Graphes)
|
|
|
|
C'est l'opportunité la plus disruptive. Transformer une base documentaire inerte en un **Graphe de Connaissances** navigable et interrogeable.
|
|
|
|
### Cas d'Usage : Assistant IA Privé & Cartographie
|
|
"Montre-moi tous les projets liés à la technologie 'Rust' et les développeurs qui y ont contribué."
|
|
|
|
#### Technologies Clés : Graph RAG (Retrieval Augmented Generation)
|
|
Au lieu de juste chercher des mots-clés, on utilise l'IA pour comprendre les relations.
|
|
|
|
* **Extraction** : Un LLM (ex: Mistral) analyse les docs et extrait les entités (Projets, Personnes, Technos) et leurs relations.
|
|
* **Visualisation** :
|
|
* **Librairie** : \`Cytoscape.js\` ou \`React Force Graph\`.
|
|
* **UX** : Navigation fluide dans le graphe. Clic sur un nœud = contexte IA.
|
|
* **Recherche** : \`MeiliSearch\` (vectorielle + sémantique).
|
|
|
|
#### Synergie ThreeFold (Private AI)
|
|
* **Confidentialité** : Les entreprises refusent d'envoyer leurs secrets industriels à ChatGPT.
|
|
* **Solution** : Déployer des modèles LLM Open Source (Llama 3, Mistral) directement sur des instances GPU/CPU ThreeFold **dédiées et isolées**.
|
|
* **Offre** : "Votre IA d'entreprise, chez vous, entraînée sur vos données, sans fuite possible."
|
|
|
|
---
|
|
|
|
## 4. Cybersécurité : Visualiser l'Invisible
|
|
|
|
La cybersécurité génère des logs massifs illisibles pour un humain. La DataViz est cruciale pour la détection d'anomalies.
|
|
|
|
### Cas d'Usage : SOC (Security Operation Center) Visuel
|
|
Interface de pilotage pour les responsables sécurité des PME.
|
|
|
|
#### Stack Technique
|
|
* **Backend** : \`Rust\` + \`eBPF\` (Extended Berkeley Packet Filter) pour capturer le trafic réseau au niveau noyau avec 0 impact sur les perfs.
|
|
* **Frontend** : \`WebGL\` (via \`Three.js\` ou \`PixiJS\`) obligatoire pour afficher des milliers de connexions simultanées (graphes de réseau) sans ralentir le navigateur.
|
|
|
|
---
|
|
|
|
## Matrice de Complexité vs Valeur
|
|
|
|
| Opportunité | Valeur Client | Complexité Tech | Maturité Marché | Recommandation |
|
|
| :--- | :---: | :---: | :---: | :---: |
|
|
| **Smart City** | ⭐⭐⭐⭐ | ⭐⭐ (Moyenne) | Mature | **Go** (Partenariats locaux) |
|
|
| **Green IoT** | ⭐⭐⭐ | ⭐⭐⭐ (Hardware) | En croissance | **Wait** (Besoin partenaire HW) |
|
|
| **KM + Private AI** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ (IA/RAG) | Émergent (Buzz) | **Prototype** (Usage interne d'abord) |
|
|
| **Cyber Viz** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ (Très haute) | Saturé | **No Go** (Trop niché) |
|
|
|
|
## Synthèse Stratégique
|
|
|
|
1. **Court Terme (Quick Win)** : Capitaliser sur l'existant (Radar) pour proposer des **Dashboards de Transparence** (Smart City / Asso). C'est la suite logique de "Laplank".
|
|
2. **Moyen Terme (Innovation)** : Développer le **"Private AI Knowledge Graph"** sur ThreeFold. C'est un produit à très forte valeur ajoutée qui combine toutes les forces de l'équipe : DataViz + Infra Décentralisée + Souveraineté.`
|
|
};
|
|
|
|
const pageTitles = {
|
|
'strategie': 'Stratégie Technique',
|
|
'business': 'Business',
|
|
'dataviz': 'Opportunités DataViz',
|
|
'dataviz-details': 'DataViz Expert'
|
|
};
|
|
|
|
// Fonction pour convertir Markdown en HTML
|
|
function markdownToHtml(md) {
|
|
let html = md;
|
|
|
|
// Tableaux
|
|
html = html.replace(/\|(.+)\|/g, function(match) {
|
|
// Gestion basique des tableaux markdown
|
|
if (match.includes('---')) return ''; // Ignore la ligne de séparation
|
|
const cells = match.split('|').filter(c => c.trim() !== '');
|
|
const cellTag = match.includes('Secteur') || match.includes('Potentiel') || match.includes('Opportunité') || match.includes('Module') ? 'th' : 'td';
|
|
return '<tr>' + cells.map(c => `<${cellTag} style="border: 1px solid #ddd; padding: 8px; text-align: left;">${c.trim()}</${cellTag}>`).join('') + '</tr>';
|
|
});
|
|
|
|
// Envelopper les lignes de tableau dans une table si nécessaire (simplifié)
|
|
// Pour une vraie implémentation, utiliser une lib comme marked ou showdown
|
|
// Ici on fait un fix rapide pour que les tableaux s'affichent à peu près correctement
|
|
if (html.includes('<tr>')) {
|
|
// C'est très rudimentaire, idéalement on utiliserait une vraie lib
|
|
const parts = html.split('\n');
|
|
let inTable = false;
|
|
html = parts.map(line => {
|
|
if (line.startsWith('<tr>')) {
|
|
if (!inTable) {
|
|
inTable = true;
|
|
return '<table style="border-collapse: collapse; width: 100%; margin: 20px 0;">' + line;
|
|
}
|
|
return line;
|
|
} else {
|
|
if (inTable && line.trim() === '') {
|
|
inTable = false;
|
|
return '</table>';
|
|
}
|
|
return line;
|
|
}
|
|
}).join('\n');
|
|
if (inTable) html += '</table>';
|
|
}
|
|
|
|
// 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 => {
|
|
const trimmed = block.trim();
|
|
if (!trimmed) return '';
|
|
if (trimmed.startsWith('<h') || trimmed.startsWith('<ul') || trimmed.startsWith('<li') || trimmed.startsWith('<hr') || trimmed.startsWith('<table') || trimmed.startsWith('<tr') || trimmed.startsWith('</table')) {
|
|
return block;
|
|
}
|
|
return '<p>' + trimmed + '</p>';
|
|
}).join('\n');
|
|
|
|
// Grouper les listes
|
|
html = html.replace(/(<li>.*?<\/li>(\s*<li>.*?<\/li>)*)/gim, function(match) {
|
|
return '<ul>' + match + '</ul>';
|
|
});
|
|
html = html.replace(/<\/ul>\s*<ul>/gim, '');
|
|
|
|
return html;
|
|
}
|
|
|
|
// Protection contre les exécutions multiples
|
|
let isInitialized = false;
|
|
let initTimeout = null;
|
|
|
|
function initStrategyLinks() {
|
|
// É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();
|
|
|
|
// 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) {
|
|
if (!pathname) return '/';
|
|
const cleaned = pathname.replace(/\/+$/, '');
|
|
return cleaned === '' ? '/' : cleaned;
|
|
}
|
|
|
|
function handleRoute() {
|
|
const path = normalizePath(window.location.pathname);
|
|
const hash = window.location.hash;
|
|
|
|
// 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');
|
|
else if (hash === '#business' || path === '/business') showPage('business');
|
|
else if (hash === '#dataviz' || path === '/dataviz') showPage('dataviz');
|
|
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) {
|
|
if (!pagesContent[pageId]) return;
|
|
|
|
if (!window.originalBodyContent) {
|
|
window.originalBodyContent = document.body.innerHTML;
|
|
}
|
|
|
|
const htmlContent = markdownToHtml(pagesContent[pageId]);
|
|
|
|
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);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<a href="#" id="back-to-radar" style="color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer; font-size: 1.1em;">← Retour au Radar</a>
|
|
<div style="display: flex; gap: 15px;">
|
|
${Object.keys(pageTitles).map(key =>
|
|
`<a href="#${key}" class="nav-link" data-page="${key}" style="color: ${key === pageId ? '#1a4d3a' : '#2ecc71'}; text-decoration: ${key === pageId ? 'underline' : 'none'}; font-weight: bold; cursor: pointer;">${pageTitles[key]}</a>`
|
|
).join('')}
|
|
</div>
|
|
</div>
|
|
<div id="page-content" style="line-height: 1.8; color: #333;">
|
|
${htmlContent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Styles
|
|
styleContent();
|
|
|
|
// Event listeners
|
|
document.getElementById('back-to-radar').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (window.originalBodyContent) {
|
|
document.body.innerHTML = window.originalBodyContent;
|
|
window.history.pushState(null, null, '/');
|
|
// Réinitialiser le flag pour permettre la réinitialisation
|
|
isInitialized = false;
|
|
if (initTimeout) clearTimeout(initTimeout);
|
|
initTimeout = setTimeout(initStrategyLinks, 100);
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = this.getAttribute('data-page');
|
|
showPage(target);
|
|
});
|
|
});
|
|
|
|
window.history.pushState({page: pageId}, pageTitles[pageId], `/${pageId}`);
|
|
}
|
|
|
|
function styleContent() {
|
|
const contentDiv = document.getElementById('page-content');
|
|
if (!contentDiv) return;
|
|
|
|
contentDiv.querySelectorAll('h1').forEach(h => {
|
|
h.style.color = '#1a4d3a';
|
|
h.style.borderBottom = '3px solid #2ecc71';
|
|
h.style.paddingBottom = '10px';
|
|
h.style.marginTop = '30px';
|
|
});
|
|
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';
|
|
});
|
|
contentDiv.querySelectorAll('ul, ol').forEach(l => {
|
|
l.style.marginLeft = '20px';
|
|
l.style.marginBottom = '15px';
|
|
});
|
|
contentDiv.querySelectorAll('li').forEach(li => {
|
|
li.style.marginBottom = '5px';
|
|
});
|
|
contentDiv.querySelectorAll('p').forEach(p => {
|
|
p.style.marginBottom = '15px';
|
|
});
|
|
contentDiv.querySelectorAll('a').forEach(a => {
|
|
a.style.color = '#2ecc71';
|
|
a.style.textDecoration = 'none';
|
|
});
|
|
}
|
|
|
|
// FONCTION DÉSACTIVÉE: Les liens de navigation sont maintenant gérés par Navigation.tsx
|
|
// Cette fonction créait des doublons dans le header
|
|
// function addLinksToHeader() {
|
|
// ... code désactivé ...
|
|
// }
|
|
|
|
window.addEventListener('popstate', function(event) {
|
|
if (event.state && 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) {
|
|
document.body.innerHTML = window.originalBodyContent;
|
|
// 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 ---
|
|
// Déplacé à la fin pour s'assurer que toutes les fonctions et variables sont définies
|
|
// Protection globale contre les exécutions multiples
|
|
if (window.__strategieScriptLoaded) {
|
|
return; // Script déjà chargé, ne pas réexécuter
|
|
}
|
|
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();
|
|
initStrategyLinks();
|
|
}
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Fermeture du bloc conditionnel - script s'exécute uniquement si pas sur page équipe
|
|
}
|