99 lines
4.6 KiB
Markdown
99 lines
4.6 KiB
Markdown
---
|
||
phase: 05-nuxt-content-setup-renderer
|
||
plan: "02"
|
||
subsystem: mdc-components
|
||
tags: [prose-img, alert, mdc, shiki, test-articles]
|
||
dependency_graph:
|
||
requires: ['01']
|
||
provides: [ProseImg, Alert, ProsePre, test-articles]
|
||
affects:
|
||
- app/components/content/ProseImg.vue
|
||
- app/components/content/Alert.vue
|
||
- app/components/content/ProsePre.vue
|
||
- app/components/content/Clear.vue
|
||
- app/components/content/Columns.vue
|
||
- app/components/content/Details.vue
|
||
- app/components/content/Badge.vue
|
||
- app/components/content/Video.vue
|
||
- content/fr/blog/test-kotlin-syntax.md
|
||
- content/en/blog/test-kotlin-syntax.md
|
||
- nuxt.config.ts
|
||
- app/assets/css/main.css
|
||
key_files:
|
||
created:
|
||
- app/components/content/ProseImg.vue
|
||
- app/components/content/Alert.vue
|
||
- app/components/content/ProsePre.vue
|
||
- app/components/content/Clear.vue
|
||
- app/components/content/Columns.vue
|
||
- app/components/content/Details.vue
|
||
- app/components/content/Badge.vue
|
||
- app/components/content/Video.vue
|
||
- content/fr/blog/test-kotlin-syntax.md
|
||
- content/en/blog/test-kotlin-syntax.md
|
||
modified:
|
||
- nuxt.config.ts
|
||
- app/assets/css/main.css
|
||
decisions:
|
||
- "Alert.vue: SVG inline à la place de UAlert — incompatibilité couleurs Nuxt UI v3 avec prose"
|
||
- "ProseImg.vue: span.block à la place de figure — évite block-in-p HTML invalide (SSR hydration mismatch)"
|
||
- "ProseImg.vue: inheritAttrs false — les classes MDC custom ne surchargent pas le layout auto"
|
||
- "Shiki: single theme github-dark (jamais dual-theme) — blocs code toujours dark indépendamment du mode UI"
|
||
- "ProsePre.vue: bg-[#0d1117] hardcodé sur le wrapper div, pre bg-transparent"
|
||
- "Composants bonus: Columns, Details, Badge, Video, Clear — hors scope initial, ajoutés pour richesse MDC"
|
||
metrics:
|
||
duration: "~2 sessions"
|
||
completed: "2026-04-21"
|
||
tasks_completed: 2
|
||
tasks_total: 2
|
||
files_created: 10
|
||
files_modified: 2
|
||
checkpoint: "approved"
|
||
---
|
||
|
||
# Phase 05 Plan 02: MDC Components & Test Articles Summary
|
||
|
||
Création des composants de rendu markdown (ProseImg, Alert, ProsePre) et des articles de test bilingues FR/EN validant les 4 success criteria de la phase. Plusieurs composants MDC bonus ont été ajoutés (Columns, Details, Badge, Video, Clear).
|
||
|
||
## Tasks Completed
|
||
|
||
| Task | Name | Commits | Files |
|
||
|------|------|---------|-------|
|
||
| 1 | Créer ProseImg.vue et Alert.vue | c9a14a9 → b0af1d3 | ProseImg.vue, Alert.vue |
|
||
| 2 | Créer articles de test FR/EN | 0fa19a7 | test-kotlin-syntax.md ×2 |
|
||
| — | ProsePre override dark bg | f179d64 | ProsePre.vue, main.css |
|
||
| — | Composants MDC bonus | 60e05f7 | Columns/Details/Video/Badge/Clear |
|
||
| — | Fix: Shiki single dark theme | c5be72b | nuxt.config.ts, main.css |
|
||
|
||
## Decisions Made
|
||
|
||
1. **Alert.vue sans UAlert** — UAlert de Nuxt UI v3 ne supporte pas les variantes de couleur arbitraires dans le contexte prose. Solution : `<div>` + SVG inline + Tailwind classes directes. Résultat visuellement identique à la spec.
|
||
|
||
2. **ProseImg `<span class="block">` au lieu de `<figure>`** — `<figure>` est un élément block. Quand Shiki enveloppe `![img]()` dans un `<p>`, un block-in-p produit un HTML invalide. Le navigateur restrucutre le DOM au parse, créant un mismatch de hydration SSR. `<span class="block">` est valide dans un `<p>`.
|
||
|
||
3. **Shiki single theme `github-dark`** — La configuration dual-theme (`default: github-light`) injectait un fond blanc via les CSS variables `--shiki-default` en light mode. Passer à un seul thème `github-dark` garantit que les blocs de code restent toujours dark, indépendamment du mode couleur de l'interface.
|
||
|
||
## Deviations from Plan
|
||
|
||
### Alert.vue: SVG inline vs UAlert
|
||
- **Planned**: `<UAlert :color="..." variant="soft">`
|
||
- **Actual**: `<div>` + 4 icônes SVG inline + classes Tailwind
|
||
- **Reason**: UAlert ne supporte pas les couleurs `info/warning/tip/danger` comme color tokens dans Nuxt UI v3. Le résultat visuel est conforme à la UI-SPEC.
|
||
|
||
### Composants MDC bonus hors scope
|
||
- **Added**: `Columns.vue`, `Details.vue`, `Badge.vue`, `Video.vue`, `Clear.vue`
|
||
- **Reason**: Nécessaires pour un article de showcase complet et le futur contenu Hytale
|
||
|
||
## Checkpoint Visual — Approved
|
||
|
||
Validation humaine effectuée sur `http://localhost:3000/test` :
|
||
- [x] Bloc Kotlin coloré (github-dark, fond #0d1117)
|
||
- [x] Image rendue via `<img>` avec lazy loading
|
||
- [x] Tableau markdown avec prose styling
|
||
- [x] Callouts info/warning/tip/danger fonctionnels
|
||
- [x] Columns, Details, Badge inline, Clear — fonctionnels
|
||
- [ ] Vidéo YouTube — non fonctionnelle (hors scope de correction)
|
||
- [x] Mode light/dark sans impact sur les blocs code (fix appliqué)
|
||
|
||
## Self-Check: PASSED
|