```
**Depuis Markdown :**
```markdown
```
### Limites de taille
| Élément | Limite | Raison |
|---------|--------|--------|
| Image | < 500KB | Performance web |
| Vidéo | < 10MB | GitHub Pages, temps de chargement |
| Audio | < 5MB | Idem |
| Vignette (`thumbnail.*`) | 380x180px (19:9), < 50KB | Affichage catalogue |
| Total Epic | < 50MB | Taille repo GitHub |
### Bonnes pratiques
1. **Optimiser les images** : Utiliser WebP quand possible, compresser PNG/JPEG
2. **Vidéos courtes** : Préférer des clips de < 2 minutes
3. **Hébergement externe** : Pour les médias volumineux, utiliser YouTube/Vimeo et intégrer via iframe
4. **Alt text** : Toujours fournir des descriptions pour l'accessibilité
5. **Lazy loading** : Les images/vidéos sont chargées à la demande
### Validation au build
| Règle | Niveau |
|-------|--------|
| Fichier référencé existe | Erreur |
| Extension supportée | Warning |
| Taille < limite | Warning |
| Alt text présent (images) | Info |
---
## 6. Taxonomie
### Système dual
```
HIÉRARCHIE (exploration) TAGS (filtrage)
──────────────────────── ────────────────
📁 PlayLab42 (3) [howto] [javascript]
📁 Autres (8) [débutant] [recette]
├── (Cuisine absorbé: 2) [photo] [python]
└── (Photo absorbé: 1)
```
### Règles hiérarchie
| Règle | Description |
|-------|-------------|
| Threshold | Catégorie visible si >= 3 epics |
| Absorption | Sous le threshold → "autres" du parent |
| Fallback | `hierarchy` vide ou invalide → racine "autres" |
| MVP | Seulement `playlab42` + `autres` au démarrage |
### Configuration (`index.json`)
```json
{
"taxonomy": {
"threshold": 3,
"hierarchy": [
{
"id": "playlab42",
"label": "PlayLab42",
"icon": "🎮",
"order": 1
},
{
"id": "autres",
"label": "Autres",
"icon": "📚",
"order": 99
}
],
"tagLabels": {
"howto": "Tutoriels",
"debutant": "Débutant"
}
},
"featured": {
"showRecent": true,
"recentCount": 3,
"sections": [
{
"id": "getting-started",
"title": "Pour commencer",
"icon": "🚀",
"epics": ["hello-playlab42", "creer-un-jeu"]
}
]
}
}
```
### Vignette catégorie
MVP : première vignette d'epic trouvée dans la catégorie.
---
## 7. Build & Aggregation
### Commande
```bash
npm run build:parcours
# ou
make build:parcours
```
### Algorithme
```
1. LOAD index.json (config)
2. SCAN parcours/epics/*/epic.json
Pour chaque epic :
a. Valider le manifest
b. Parser content (slides + sections)
c. Vérifier existence des slides référencées
d. Compter slides (total, optionnelles)
e. Calculer durée totale
f. Collecter tags
g. Assigner à la hiérarchie
3. BUILD hierarchy
a. Compter epics par nœud
b. Appliquer threshold
c. Absorber nœuds < threshold dans "autres"
d. Sélectionner vignette par catégorie
4. AGGREGATE tags
a. Collecter tous les tags
b. Compter occurrences
c. Appliquer labels
5. BUILD featured
a. Résoudre sections depuis index.json
b. Extraire récents si activé
6. OUTPUT data/parcours.json
7. REPORT
- Epics: N trouvés, M publiés
- Tags: N uniques
- Erreurs/warnings
```
### Validation
| Règle | Niveau |
|-------|--------|
| Epic a au moins 1 slide | Erreur |
| Slides référencées existent | Erreur |
| Slide a `index.html` ou `index.md` | Erreur |
| Champs requis présents | Erreur |
| Vignette existe si spécifiée | Warning |
| Epic draft | Info (ignoré) |
### Output (`data/parcours.json`)
```typescript
interface ParcoursCatalogue {
version: "1.0";
generatedAt: string;
epics: ParcoursEntry[];
taxonomy: {
hierarchy: HierarchyNode[];
tags: TagEntry[];
};
featured: {
recent?: ParcoursEntry[];
sections: FeaturedSection[];
};
}
interface ParcoursEntry {
id: string;
title: string;
description: string;
path: string;
hierarchy: string[];
tags: string[];
author: string;
created: string;
updated?: string;
duration?: string;
difficulty?: string;
icon?: string;
thumbnail?: string;
slideCount: number;
optionalSlideCount: number;
hasIndex: boolean;
structure: StructureNode[];
}
interface HierarchyNode {
id: string;
label: string;
icon?: string;
count: number;
thumbnail?: string;
visible: boolean;
children: HierarchyNode[];
}
interface TagEntry {
id: string;
label: string;
count: number;
}
interface StructureNode {
type: "slide" | "section";
id: string;
title: string;
icon?: string;
optional?: boolean;
children?: StructureNode[];
}
interface FeaturedSection {
id: string;
title: string;
icon?: string;
epics: ParcoursEntry[];
}
```
---
## 8. Progression utilisateur
### Storage
```typescript
// localStorage key: "parcours-progress"
interface ParcoursProgress {
[epicId: string]: EpicProgress;
}
interface EpicProgress {
/** Slides visitées */
visited: string[];
/** Slide actuelle */
current: string | null;
/** Complété (toutes les non-optionnelles vues) */
completed: boolean;
/** Dernière visite ISO 8601 */
lastVisited: string;
}
```
### Comportement
| Action | Effet |
|--------|-------|
| Ouvrir epic | Reprendre à `current` ou début |
| Voir slide | Ajouter à `visited` |
| Quitter | Sauvegarder `current` |
| Toutes slides vues | Marquer `completed: true` |
---
## 9. Accessibilité
### ARIA
```html
Prédire une catégorie parmi plusieurs.
Tâche de machine learning consistant à...
Voir aussi : régression