TechradarDev/docs/app/configuration.md

# 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 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.