portfolio/.planning/phases/05-nuxt-content-setup-renderer/05-02-SUMMARY.md

phase, plan, subsystem, tags, dependency_graph, key_files, decisions, metrics

phase	plan	subsystem	tags	dependency_graph	key_files	decisions	metrics
05-nuxt-content-setup-renderer	02	mdc-components	prose-img alert mdc shiki test-articles	requires provides affects 01 ProseImg Alert ProsePre test-articles 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	created modified 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	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	duration completed tasks_completed tasks_total files_created files_modified checkpoint ~2 sessions 2026-04-21 2 2 10 2 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 :

• Bloc Kotlin coloré (github-dark, fond #0d1117)
• Image rendue via <img> avec lazy loading
• Tableau markdown avec prose styling
• Callouts info/warning/tip/danger fonctionnels
• Columns, Details, Badge inline, Clear — fonctionnels
• Vidéo YouTube — non fonctionnelle (hors scope de correction)
• Mode light/dark sans impact sur les blocs code (fix appliqué)

Self-Check: PASSED