docs(02-02): complete layout shell plan (header + footer + default layout)

This commit is contained in:
2026-04-08 16:27:02 +02:00
parent cfe0180c1f
commit 5597c6a8dd
4 changed files with 80 additions and 16 deletions
+8 -8
View File
@@ -15,13 +15,13 @@
- [x] **I18N-01**: Le site supporte FR et EN avec stratégie `prefix_except_default` (FR à `/`, EN à `/en/*`)
- [x] **I18N-02**: La locale est détectée depuis le navigateur au premier accès et persistée en cookie
- [ ] **I18N-03**: L'utilisateur peut changer de langue via un switcher dans le header
- [x] **I18N-03**: L'utilisateur peut changer de langue via un switcher dans le header
- [x] **I18N-04**: Le serveur lit le cookie et rend la bonne langue sans hydration mismatch
- [x] **I18N-05**: Les fichiers de traduction FR/EN sont migrés depuis les locales existantes
### Theme
- [ ] **THEME-01**: L'utilisateur peut basculer entre dark et light mode via un toggle dans le header
- [x] **THEME-01**: L'utilisateur peut basculer entre dark et light mode via un toggle dans le header
- [x] **THEME-02**: Le thème est persisté en cookie SSR-safe (pas localStorage)
- [x] **THEME-03**: Aucun FOUC au chargement — le serveur rend le bon thème dès la première requête
@@ -49,8 +49,8 @@
- [ ] **COMP-02**: Formulaire contact — UForm + UFormField + UInput + UTextarea + validation Zod + envoi EmailJS
- [ ] **COMP-03**: FAQ accordion — UAccordion pour la page Fiverr, localisé FR/EN
- [ ] **COMP-04**: Section témoignages clients — UCard pour chaque témoignage
- [ ] **COMP-05**: Header avec navigation desktop (UNavigationMenu) + mobile (UDrawer) + toggles langue/thème
- [ ] **COMP-06**: Footer avec liens et informations
- [x] **COMP-05**: Header avec navigation desktop (UNavigationMenu) + mobile (UDrawer) + toggles langue/thème
- [x] **COMP-06**: Footer avec liens et informations
### Data
@@ -110,18 +110,18 @@
| INFRA-03 | Phase 1 | Pending |
| I18N-01 | Phase 2 | Complete |
| I18N-02 | Phase 2 | Complete |
| I18N-03 | Phase 2 | Pending |
| I18N-03 | Phase 2 | Complete |
| I18N-04 | Phase 2 | Complete |
| I18N-05 | Phase 2 | Complete |
| THEME-01 | Phase 2 | Pending |
| THEME-01 | Phase 2 | Complete |
| THEME-02 | Phase 2 | Complete |
| THEME-03 | Phase 2 | Complete |
| SEO-01 | Phase 2 | Complete |
| SEO-02 | Phase 2 | Complete |
| SEO-03 | Phase 2 | Complete |
| SEO-04 | Phase 2 | Complete |
| COMP-05 | Phase 2 | Pending |
| COMP-06 | Phase 2 | Pending |
| COMP-05 | Phase 2 | Complete |
| COMP-06 | Phase 2 | Complete |
| PAGE-01 | Phase 3 | Pending |
| PAGE-02 | Phase 3 | Pending |
| PAGE-03 | Phase 3 | Pending |
+1 -1
View File
@@ -45,7 +45,7 @@ Plans:
**Plans**: 3 plans
Plans:
- [x] 02-01-PLAN.md — Design system, color-mode, i18n translations, sitemap config
- [ ] 02-02-PLAN.md — Header, footer, default layout with nav and toggles
- [x] 02-02-PLAN.md — Header, footer, default layout with nav and toggles
- [x] 02-03-PLAN.md — Per-route SEO metadata and JSON-LD structured data
**UI hint**: yes
+9 -7
View File
@@ -3,15 +3,15 @@ gsd_state_version: 1.0
milestone: v1.0
milestone_name: milestone
status: executing
stopped_at: Completed 02-03-PLAN.md
last_updated: "2026-04-08T14:25:59.906Z"
stopped_at: Completed 02-02-PLAN.md
last_updated: "2026-04-08T14:26:56.840Z"
last_activity: 2026-04-08 -- Phase 2 planning complete
progress:
total_phases: 3
completed_phases: 1
completed_phases: 2
total_plans: 5
completed_plans: 4
percent: 80
completed_plans: 5
percent: 100
---
# Project State
@@ -54,6 +54,7 @@ Progress: [░░░░░░░░░░] 0%
*Updated after each plan completion*
| Phase 02 P01 | 394s | 2 tasks | 6 files |
| Phase 02-ssr-shell P03 | 48s | 1 tasks | 6 files |
| Phase 02 P02 | 112s | 2 tasks | 6 files |
## Accumulated Context
@@ -69,6 +70,7 @@ Recent decisions affecting current work:
- [Phase 02]: Brand color #85cb85 as Nuxt UI primary via CSS @theme + app.config.ts
- [Phase 02]: Emojis stripped from migrated i18n translations for clean SSR
- [Phase 02-ssr-shell]: JSON-LD values hardcoded per threat model T-02-06
- [Phase 02]: Renamed a11y.github to a11y.gitea to match actual Gitea hosting
### Pending Todos
@@ -82,6 +84,6 @@ None yet.
## Session Continuity
Last session: 2026-04-08T14:25:59.904Z
Stopped at: Completed 02-03-PLAN.md
Last session: 2026-04-08T14:26:56.838Z
Stopped at: Completed 02-02-PLAN.md
Resume file: None
@@ -0,0 +1,62 @@
---
phase: 02-ssr-shell
plan: 02
subsystem: layout-header-footer
tags: [header, footer, layout, i18n-toggle, color-mode, mobile-drawer, a11y]
dependency_graph:
requires: [02-01]
provides: [app-header, app-footer, default-layout, locale-head]
affects: [app/app.vue, app/locales/fr.json, app/locales/en.json]
tech_stack:
added: []
patterns: [useSetLocale, useColorMode, useLocaleHead, UDrawer]
key_files:
created:
- app/components/layout/AppHeader.vue
- app/components/layout/AppFooter.vue
- app/layouts/default.vue
modified:
- app/app.vue
- app/locales/fr.json
- app/locales/en.json
decisions:
- "Language toggle shows opposite locale text (FR when en, EN when fr) per D-04"
- "Renamed a11y.github key to a11y.gitea in both locale files to match actual Gitea link"
- "Social icons: Gitea + LinkedIn + Fiverr per user correction over D-05"
metrics:
duration: 112s
completed: 2026-04-08
---
# Phase 02 Plan 02: Layout Shell (Header + Footer + Default Layout) Summary
Sticky AppHeader with desktop nav, FR/EN text toggle (useSetLocale), dark/light icon toggle (useColorMode), mobile UDrawer; AppFooter with copyright + Gitea/LinkedIn/Fiverr social icons; default.vue layout wrapping header+slot+footer; app.vue updated with useLocaleHead for global hreflang/canonical.
## Tasks Completed
| Task | Name | Commit | Files |
|------|------|--------|-------|
| 1 | AppHeader with nav, language toggle, theme toggle, mobile drawer | 23fa399 | app/components/layout/AppHeader.vue |
| 2 | AppFooter + default layout + app.vue update | cfe0180 | app/components/layout/AppFooter.vue, app/layouts/default.vue, app/app.vue, app/locales/fr.json, app/locales/en.json |
## Deviations from Plan
### Auto-fixed Issues
**1. [Rule 2 - Correctness] Renamed a11y.github to a11y.gitea in locale files**
- **Found during:** Task 2
- **Issue:** a11y.github key text referenced "GitHub" but the actual link points to Gitea (gitea.kamisama.ovh)
- **Fix:** Renamed key from `a11y.github` to `a11y.gitea` and updated text to say "Gitea" in both fr.json and en.json
- **Files modified:** app/locales/fr.json, app/locales/en.json
- **Commit:** cfe0180
## Verification Results
- AppHeader contains sticky, z-[1020], useColorMode, useSetLocale, UDrawer, heroicons icons: PASS
- AppHeader has min-w-11 min-h-11 touch targets, focus-visible:ring-2, aria-current: PASS
- AppFooter contains simple-icons:gitea, simple-icons:linkedin, simple-icons:fiverr: PASS
- AppFooter has target="_blank" rel="noopener noreferrer": PASS
- default.vue contains AppHeader, AppFooter, slot: PASS
- app.vue contains useLocaleHead, NuxtLayout, no NuxtRouteAnnouncer: PASS
## Self-Check: PASSED