From b63afc4152c2b1bf27233396a38b8c492bd7eb0b Mon Sep 17 00:00:00 2001 From: kayjaydee Date: Tue, 21 Apr 2026 16:36:38 +0200 Subject: [PATCH] =?UTF-8?q?docs(05-02):=20SUMMARY.md=20=E2=80=94=20MDC=20c?= =?UTF-8?q?omponents,=20test=20articles,=20checkpoint=20approved?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../05-02-SUMMARY.md | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 .planning/phases/05-nuxt-content-setup-renderer/05-02-SUMMARY.md diff --git a/.planning/phases/05-nuxt-content-setup-renderer/05-02-SUMMARY.md b/.planning/phases/05-nuxt-content-setup-renderer/05-02-SUMMARY.md new file mode 100644 index 0000000..6197d32 --- /dev/null +++ b/.planning/phases/05-nuxt-content-setup-renderer/05-02-SUMMARY.md @@ -0,0 +1,98 @@ +--- +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 : `
` + SVG inline + Tailwind classes directes. Résultat visuellement identique à la spec. + +2. **ProseImg `` au lieu de `
`** — `
` est un élément block. Quand Shiki enveloppe `![img]()` dans un `

`, un block-in-p produit un HTML invalide. Le navigateur restrucutre le DOM au parse, créant un mismatch de hydration SSR. `` est valide dans un `

`. + +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**: `` +- **Actual**: `

` + 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 `` 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