63 lines
2.6 KiB
Markdown
63 lines
2.6 KiB
Markdown
---
|
|
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
|