kayjaydee
6b828aff67
- Corrected the name in various files including CLAUDE.md, README.md, and configuration files to reflect the updated branding. - Ensured consistency in the use of the new name throughout the project, enhancing brand identity.
319 lines
15 KiB
Markdown
319 lines
15 KiB
Markdown
---
|
|
phase: 02-ssr-shell
|
|
plan: 02
|
|
type: execute
|
|
wave: 2
|
|
depends_on: [02-01]
|
|
files_modified:
|
|
- app/components/layout/AppHeader.vue
|
|
- app/components/layout/AppFooter.vue
|
|
- app/layouts/default.vue
|
|
- app/app.vue
|
|
autonomous: true
|
|
requirements: [COMP-05, COMP-06, I18N-03, THEME-01]
|
|
|
|
must_haves:
|
|
truths:
|
|
- "Header is sticky with logo left, nav center-right, toggles far right"
|
|
- "Language toggle switches FR/EN and persists via cookie"
|
|
- "Theme toggle switches dark/light and persists via cookie"
|
|
- "Mobile hamburger opens UDrawer with nav links and toggles"
|
|
- "Footer shows copyright and social icon links"
|
|
- "Default layout wraps all pages with header + slot + footer"
|
|
artifacts:
|
|
- path: "app/components/layout/AppHeader.vue"
|
|
provides: "Sticky header with nav, lang toggle, theme toggle, mobile drawer"
|
|
min_lines: 80
|
|
- path: "app/components/layout/AppFooter.vue"
|
|
provides: "Minimal footer with copyright and social icons"
|
|
min_lines: 20
|
|
- path: "app/layouts/default.vue"
|
|
provides: "Default Nuxt layout: header + slot + footer"
|
|
contains: "AppHeader"
|
|
key_links:
|
|
- from: "app/components/layout/AppHeader.vue"
|
|
to: "@nuxtjs/i18n"
|
|
via: "setLocale() for language switching"
|
|
pattern: "setLocale"
|
|
- from: "app/components/layout/AppHeader.vue"
|
|
to: "@nuxtjs/color-mode"
|
|
via: "useColorMode() for theme toggle"
|
|
pattern: "useColorMode"
|
|
- from: "app/layouts/default.vue"
|
|
to: "app/components/layout/AppHeader.vue"
|
|
via: "component import"
|
|
pattern: "AppHeader"
|
|
---
|
|
|
|
<objective>
|
|
Build the header (with desktop nav, mobile drawer, language/theme toggles), footer, and default layout.
|
|
|
|
Purpose: Provide the visible SSR shell that wraps all pages — navigation, toggles, and footer are functional.
|
|
Output: AppHeader.vue, AppFooter.vue, default.vue layout, updated app.vue.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@~/.claude/get-shit-done/workflows/execute-plan.md
|
|
@~/.claude/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/phases/02-ssr-shell/02-CONTEXT.md
|
|
@.planning/phases/02-ssr-shell/02-RESEARCH.md
|
|
@.planning/phases/02-ssr-shell/02-UI-SPEC.md
|
|
@.planning/phases/02-ssr-shell/02-01-SUMMARY.md
|
|
|
|
<interfaces>
|
|
<!-- From app.config.ts (created by Plan 01): primary color = 'brand' (#85cb85) -->
|
|
<!-- From app/locales/fr.json (created by Plan 01): keys nav.*, footer.*, a11y.* -->
|
|
<!-- From nuxt.config.ts: colorMode configured with cookie, i18n with prefix_except_default -->
|
|
<!-- From src/config/site.ts: social links array with Gitea, LinkedIn, Discord, Email -->
|
|
|
|
<!-- Nuxt UI v3 components available (auto-imported): UDrawer, UButton, UIcon, UNavigationMenu -->
|
|
<!-- @nuxtjs/i18n composables: useI18n(), useSetLocale(), useSwitchLocalePath(), useLocalePath() -->
|
|
<!-- @nuxtjs/color-mode composable: useColorMode() -->
|
|
<!-- Nuxt Icon sets: heroicons:*, simple-icons:* -->
|
|
|
|
<!-- User post-research decision: Footer social icon uses Gitea icon (simple-icons:gitea), NOT GitHub -->
|
|
<!-- Social links from src/config/site.ts: Gitea (gitea.kamisama.ovh), LinkedIn, Discord, Email -->
|
|
<!-- D-05 says: GitHub, LinkedIn, Fiverr — BUT user corrected to Gitea. Use: Gitea, LinkedIn, Fiverr -->
|
|
</interfaces>
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: AppHeader with nav, language toggle, theme toggle, mobile drawer</name>
|
|
<files>app/components/layout/AppHeader.vue</files>
|
|
<read_first>
|
|
- src/components/layout/AppHeader.vue (old header — migration reference for structure and nav links)
|
|
- .planning/phases/02-ssr-shell/02-UI-SPEC.md (Component Inventory: AppHeader, LanguageToggle, ThemeToggle, MobileDrawer specs; Interaction States table; Copywriting Contract for aria-labels)
|
|
- .planning/phases/02-ssr-shell/02-RESEARCH.md (Pattern 2: Language Switcher with useSetLocale; Pattern 1: ThemeToggle with useColorMode)
|
|
- app/locales/fr.json (verify nav.* and a11y.* keys exist from Plan 01)
|
|
- src/config/site.ts (check logo image path — public/images/logo.webp)
|
|
</read_first>
|
|
<action>
|
|
Create `app/components/layout/AppHeader.vue` as a single-file component containing:
|
|
|
|
**Structure (per D-01, D-03):**
|
|
- `<header>` with `class="sticky top-0 z-[1020] bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800"`
|
|
- Inner wrapper: `<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">`
|
|
|
|
**Left — Logo:**
|
|
- `<NuxtLink to="localePath('/')" :aria-label="t('a11y.logoLabel')">`
|
|
- Contains `<NuxtImg src="/images/logo.webp" alt="Killian' DAL-CIN" width="40" height="40" loading="eager" />` + `<span class="text-lg font-semibold">Killian</span>`
|
|
|
|
**Center-Right — Desktop nav (hidden md:flex):**
|
|
- Use `<nav>` with `<NuxtLink>` for each route: home(/), projects(/projects), about(/about), contact(/contact), fiverr(/fiverr), formation(/formation)
|
|
- Use `useLocalePath()` to generate locale-aware paths
|
|
- Active link detection: `class` binding comparing `route.path` with `localePath(path)`
|
|
- Active state: `border-b-2 border-primary-500` accent underline
|
|
- Default state: `text-gray-700 dark:text-gray-300`
|
|
- Hover state: `hover:text-primary-500`
|
|
- Focus: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2`
|
|
- Nav link labels from `t('nav.home')`, `t('nav.projects')`, etc.
|
|
- `aria-current="page"` on active link
|
|
|
|
**Far Right — Toggles:**
|
|
|
|
Language toggle (per D-04 — simple text button FR/EN):
|
|
- `<button>` displaying `locale === 'fr' ? 'EN' : 'FR'` (shows the OTHER language to switch to)
|
|
- `class="min-w-11 min-h-11 inline-flex items-center justify-center text-gray-700 dark:text-gray-300 font-medium hover:text-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-colors"`
|
|
- Click handler: `const setLocale = useSetLocale(); setLocale(locale.value === 'fr' ? 'en' : 'fr')`
|
|
- `:aria-label="t('a11y.langToggle')"`
|
|
|
|
Theme toggle (per D-09):
|
|
- `<button>` with `<UIcon>`: show `heroicons:sun` when dark mode active (clicking switches to light), `heroicons:moon` when light mode active
|
|
- Icon size: `class="w-5 h-5"`
|
|
- Button: `class="min-w-11 min-h-11 inline-flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-colors duration-300"`
|
|
- Click: `const colorMode = useColorMode(); colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'`
|
|
- `:aria-label="colorMode.value === 'dark' ? t('a11y.themeDark') : t('a11y.themeLight')"`
|
|
|
|
Hamburger button (md:hidden):
|
|
- `<button @click="drawerOpen = true" class="md:hidden min-w-11 min-h-11 ..." :aria-label="t('a11y.openMenu')">`
|
|
- `<UIcon name="heroicons:bars-3" class="w-6 h-6" />`
|
|
|
|
**Mobile Drawer (per D-02):**
|
|
- `<UDrawer v-model:open="drawerOpen" side="left">`
|
|
- Inside: close button with `<UIcon name="heroicons:x-mark" />` and `:aria-label="t('a11y.closeDrawer')"`
|
|
- Nav links stacked full-width, same routes as desktop
|
|
- Language toggle and theme toggle at bottom
|
|
- Click any nav link sets `drawerOpen = false`
|
|
|
|
**Script setup:**
|
|
```typescript
|
|
const { t, locale } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const setLocale = useSetLocale()
|
|
const colorMode = useColorMode()
|
|
const route = useRoute()
|
|
const drawerOpen = ref(false)
|
|
|
|
const navLinks = computed(() => [
|
|
{ key: 'home', path: '/' },
|
|
{ key: 'projects', path: '/projects' },
|
|
{ key: 'about', path: '/about' },
|
|
{ key: 'contact', path: '/contact' },
|
|
{ key: 'fiverr', path: '/fiverr' },
|
|
{ key: 'formation', path: '/formation' },
|
|
])
|
|
|
|
function toggleLocale() {
|
|
setLocale(locale.value === 'fr' ? 'en' : 'fr')
|
|
}
|
|
|
|
function toggleTheme() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
```
|
|
</action>
|
|
<verify>
|
|
<automated>grep -q "useColorMode" app/components/layout/AppHeader.vue && grep -q "useSetLocale\|setLocale" app/components/layout/AppHeader.vue && grep -q "UDrawer" app/components/layout/AppHeader.vue && grep -q "sticky" app/components/layout/AppHeader.vue && grep -q "a11y.logoLabel" app/components/layout/AppHeader.vue && echo "PASS" || echo "FAIL"</automated>
|
|
</verify>
|
|
<acceptance_criteria>
|
|
- app/components/layout/AppHeader.vue exists and contains `sticky top-0`
|
|
- Contains `useColorMode()` for theme toggle
|
|
- Contains `useSetLocale()` or `setLocale` for language switching
|
|
- Contains `UDrawer` for mobile navigation
|
|
- Contains `z-[1020]` for z-index
|
|
- Contains `heroicons:sun` and `heroicons:moon` for theme icons
|
|
- Contains `heroicons:bars-3` for hamburger
|
|
- Contains `t('a11y.logoLabel')` for logo aria-label
|
|
- Contains `localePath` for locale-aware routing
|
|
- Contains `min-w-11 min-h-11` on interactive buttons (44px touch targets)
|
|
- Contains `aria-current` for active nav link
|
|
- Contains `focus-visible:ring-2` on interactive elements
|
|
</acceptance_criteria>
|
|
<done>AppHeader renders sticky header with desktop nav links, FR/EN text toggle using setLocale, dark/light icon toggle using useColorMode, and mobile UDrawer. All interactive elements have WCAG touch targets, focus rings, and ARIA labels from i18n.</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: AppFooter + default layout + app.vue update</name>
|
|
<files>app/components/layout/AppFooter.vue, app/layouts/default.vue, app/app.vue</files>
|
|
<read_first>
|
|
- src/components/layout/AppFooter.vue (old footer — migration reference)
|
|
- src/config/site.ts (social links: Gitea, LinkedIn, Discord, Email — note user wants Gitea icon not GitHub, and D-05 specifies Fiverr link too)
|
|
- .planning/phases/02-ssr-shell/02-UI-SPEC.md (AppFooter spec, Interaction States for social icons)
|
|
- .planning/phases/02-ssr-shell/02-RESEARCH.md (Pattern 3: useLocaleHead in app.vue)
|
|
- app/app.vue (current state — has useHead with htmlAttrs lang)
|
|
- app/locales/fr.json (verify footer.* and a11y.* keys)
|
|
</read_first>
|
|
<action>
|
|
1. Create `app/components/layout/AppFooter.vue`:
|
|
|
|
Per D-05: single band footer — copyright + social icons.
|
|
User post-research decision: use Gitea icon (not GitHub). Social links: Gitea (gitea.kamisama.ovh/kayjaydee), LinkedIn (linkedin.com/in/killian-dal-cin), Fiverr (fiverr.com/users/mr_kayjaydee).
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const socialLinks = [
|
|
{ name: 'gitea', url: 'https://gitea.kamisama.ovh/kayjaydee', icon: 'simple-icons:gitea', ariaKey: 'a11y.github' },
|
|
{ name: 'linkedin', url: 'https://linkedin.com/in/killian-dal-cin', icon: 'simple-icons:linkedin', ariaKey: 'a11y.linkedin' },
|
|
{ name: 'fiverr', url: 'https://www.fiverr.com/users/mr_kayjaydee', icon: 'simple-icons:fiverr', ariaKey: 'a11y.fiverr' },
|
|
]
|
|
</script>
|
|
```
|
|
|
|
Template:
|
|
- `<footer class="py-6 bg-gray-100 dark:bg-gray-800">`
|
|
- Inner: `<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">`
|
|
- Left: `<p class="text-sm text-gray-600 dark:text-gray-400">{{ t('footer.copyright') }}</p>`
|
|
- Right: social icons in flex row, each `<a :href="link.url" target="_blank" rel="noopener noreferrer" :aria-label="t(link.ariaKey)">`
|
|
- Icon: `<UIcon :name="link.icon" class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-primary-500 transition-colors duration-150" />`
|
|
- Focus ring on each `<a>`: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2`
|
|
|
|
Note: a11y.github key text says "GitHub de Killian' DAL-CIN" but links to Gitea — the executor should update the a11y key in fr.json/en.json to say "Gitea" instead of "GitHub" if not already correct. Check and fix if needed.
|
|
|
|
2. Create `app/layouts/default.vue` (per D-15):
|
|
```vue
|
|
<template>
|
|
<div class="min-h-screen flex flex-col">
|
|
<AppHeader />
|
|
<main class="flex-1">
|
|
<slot />
|
|
</main>
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
3. Update `app/app.vue` to use the default layout and add useLocaleHead() for global hreflang/canonical (per RESEARCH Pattern 3):
|
|
```vue
|
|
<script setup lang="ts">
|
|
const { locale } = useI18n()
|
|
const head = useLocaleHead({ addSeoAttributes: true })
|
|
|
|
useHead({
|
|
htmlAttrs: { lang: locale },
|
|
link: computed(() => head.value.link || []),
|
|
meta: computed(() => head.value.meta || []),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</template>
|
|
```
|
|
|
|
Remove the existing `<NuxtRouteAnnouncer />` and `<div>` wrapper — the layout handles structure now.
|
|
</action>
|
|
<verify>
|
|
<automated>grep -q "AppHeader" app/layouts/default.vue && grep -q "AppFooter" app/layouts/default.vue && grep -q "simple-icons:gitea" app/components/layout/AppFooter.vue && grep -q "useLocaleHead" app/app.vue && grep -q "NuxtLayout" app/app.vue && echo "PASS" || echo "FAIL"</automated>
|
|
</verify>
|
|
<acceptance_criteria>
|
|
- app/components/layout/AppFooter.vue contains `simple-icons:gitea` (not github)
|
|
- app/components/layout/AppFooter.vue contains `simple-icons:linkedin` and `simple-icons:fiverr`
|
|
- app/components/layout/AppFooter.vue contains `target="_blank"` and `rel="noopener noreferrer"`
|
|
- app/components/layout/AppFooter.vue contains `t('footer.copyright')`
|
|
- app/layouts/default.vue contains `<AppHeader />` and `<AppFooter />`
|
|
- app/layouts/default.vue contains `<slot />`
|
|
- app/app.vue contains `useLocaleHead({ addSeoAttributes: true })`
|
|
- app/app.vue contains `<NuxtLayout>` wrapping `<NuxtPage />`
|
|
- app/app.vue does NOT contain `<NuxtRouteAnnouncer />`
|
|
</acceptance_criteria>
|
|
<done>AppFooter renders copyright + Gitea/LinkedIn/Fiverr social icons. Default layout wraps header + slot + footer. app.vue uses NuxtLayout and injects global hreflang/canonical via useLocaleHead().</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<threat_model>
|
|
## Trust Boundaries
|
|
|
|
| Boundary | Description |
|
|
|----------|-------------|
|
|
| External links (footer) | Social icon links open external URLs in new tabs |
|
|
|
|
## STRIDE Threat Register
|
|
|
|
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
|
|-----------|----------|-----------|-------------|-----------------|
|
|
| T-02-04 | Tampering | External social links | mitigate | All external links use `rel="noopener noreferrer"` to prevent reverse tabnabbing |
|
|
| T-02-05 | Spoofing | Locale switching | accept | setLocale only accepts 'fr' or 'en' — constrained by i18n config, no injection risk |
|
|
</threat_model>
|
|
|
|
<verification>
|
|
- `pnpm dev` starts and renders header + footer on localhost:3000
|
|
- Language toggle switches between FR/EN URLs
|
|
- Theme toggle switches dark/light classes
|
|
- Mobile hamburger opens UDrawer
|
|
- `curl http://localhost:3000` returns HTML with `<header>` and `<footer>` elements
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Header sticky with nav links, FR/EN toggle, dark/light toggle, mobile drawer
|
|
- Footer shows copyright and 3 social icon links
|
|
- Default layout renders header + page content + footer
|
|
- app.vue injects global hreflang/canonical metadata
|
|
- All interactive elements have focus rings and ARIA labels
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/02-ssr-shell/02-02-SUMMARY.md`
|
|
</output>
|