Files
TechradarDev/docs/app/configuration.md
syoul 055e4a9281 refactor: réorganiser la documentation en séparant app et data
- Création de docs/app/ pour la documentation de l'application
- Création de docs/data/ pour les données utilisées par l'application
- Déplacement de la documentation technique vers docs/app/
- Déplacement des données métier vers docs/data/
- Mise à jour de tous les liens et références dans les fichiers
- Mise à jour des scripts (extract-technologies.js, analyze-business-metrics.js)
- Mise à jour des fichiers JavaScript (custom.js, strategie-link.js)
- Création de README.md dans docs/, docs/app/ et docs/data/
- Mise à jour du Readme.md principal avec les nouveaux chemins
2025-12-03 14:35:36 +01:00

5.1 KiB

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

{
  "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)

{
  "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

{
  "sections": ["radar", "tags", "list"]
}

Définit l'ordre des sections dans l'interface.

Couleurs

{
  "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

{
  "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 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 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 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

Les tags sont utilisés dans les fichiers Markdown des blips et permettent le filtrage dans l'interface.