--- phase: 02-ssr-shell plan: 01 type: execute wave: 1 depends_on: [] files_modified: - nuxt.config.ts - app.config.ts - app/assets/css/main.css - app/locales/fr.json - app/locales/en.json - public/og-image.png autonomous: true requirements: [I18N-01, I18N-02, I18N-04, I18N-05, THEME-02, THEME-03, SEO-03] must_haves: truths: - "Color mode cookie config is FOUC-free with dark default" - "i18n baseUrl is set for absolute canonical/hreflang URLs" - "fr.json and en.json contain nav, footer, seo, and a11y translation keys" - "Sitemap generates with hreflang alternates" - "Brand color #85cb85 is defined as CSS theme variable and referenced in app.config.ts" artifacts: - path: "app/assets/css/main.css" provides: "@theme with --color-brand-* shades" contains: "--color-brand-500" - path: "app.config.ts" provides: "Nuxt UI primary color mapping" contains: "primary: 'brand'" - path: "app/locales/fr.json" provides: "French translations for Phase 2" contains: "nav" - path: "app/locales/en.json" provides: "English translations for Phase 2" contains: "nav" key_links: - from: "app.config.ts" to: "app/assets/css/main.css" via: "brand color name reference" pattern: "primary.*brand" - from: "nuxt.config.ts" to: "app/assets/css/main.css" via: "css config array" pattern: "css.*main.css" --- Configure the design system, color-mode, i18n translations, and sitemap for SSR-safe rendering. Purpose: Lay the cross-cutting foundation (colors, translations, cookies) that the header/footer/SEO plans depend on. Output: nuxt.config.ts with color-mode, app.config.ts with brand color, main.css with @theme, enriched fr.json/en.json, static og:image. @~/.claude/get-shit-done/workflows/execute-plan.md @~/.claude/get-shit-done/templates/summary.md @.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.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 Task 1: Design system + color-mode + sitemap config app/assets/css/main.css, app.config.ts, nuxt.config.ts - nuxt.config.ts (current module list — do NOT duplicate color-mode) - .planning/phases/02-ssr-shell/02-RESEARCH.md (Pattern 5 for CSS @theme, Pattern 1 for colorMode config) - .planning/phases/02-ssr-shell/02-UI-SPEC.md (color section for exact hex values) - src/config/site.ts (site URL: https://killiandalcin.fr) 1. Create `app/assets/css/main.css` with Tailwind v4 + Nuxt UI imports and brand color @theme: ```css @import "tailwindcss"; @import "@nuxt/ui"; @theme { --color-brand-50: #f0faf0; --color-brand-100: #dcf3dc; --color-brand-200: #bbe8bb; --color-brand-300: #8dd98d; --color-brand-400: #a3d6a3; --color-brand-500: #85cb85; --color-brand-600: #5aaa5a; --color-brand-700: #3f8c3f; --color-brand-800: #2e6b2e; --color-brand-900: #1f4f1f; --color-brand-950: #122d12; } ``` 2. Create `app.config.ts`: ```typescript export default defineAppConfig({ ui: { colors: { primary: 'brand', }, }, }) ``` 3. Update `nuxt.config.ts` — add these keys (do NOT add @nuxtjs/color-mode to modules[]): - `css: ['~/assets/css/main.css']` - `colorMode` block: `{ preference: 'dark', fallback: 'dark', storage: 'cookie', storageKey: 'nuxt-color-mode', cookieName: 'nuxt-color-mode', classSuffix: '' }` - `i18n.baseUrl: 'https://killiandalcin.fr'` - `site: { url: 'https://killiandalcin.fr', name: 'Killian' DAL-CIN - Developpeur Full Stack' }` Do NOT touch existing modules array or i18n locale config — they are correct from Phase 1. 4. Copy or create a static og:image file at `public/og-image.png` (1200x630). If no real image available, create a placeholder text file noting it needs a real image. Per user decision: static image in public/, no nuxt-og-image module. grep -q "color-brand-500" app/assets/css/main.css && grep -q "primary.*brand" app.config.ts && grep -q "colorMode" nuxt.config.ts && grep -q "baseUrl" nuxt.config.ts && grep -q "css:" nuxt.config.ts && echo "PASS" || echo "FAIL" - app/assets/css/main.css contains `--color-brand-500: #85cb85` - app/assets/css/main.css contains `@import "tailwindcss"` and `@import "@nuxt/ui"` - app.config.ts contains `primary: 'brand'` - nuxt.config.ts contains `colorMode:` with `storage: 'cookie'` and `preference: 'dark'` - nuxt.config.ts contains `baseUrl: 'https://killiandalcin.fr'` inside i18n block - nuxt.config.ts contains `site:` with `url: 'https://killiandalcin.fr'` - nuxt.config.ts does NOT contain `'@nuxtjs/color-mode'` in modules array - nuxt.config.ts contains `css: ['~/assets/css/main.css']` - public/og-image.png exists Design system configured: brand color in CSS @theme, Nuxt UI maps primary to brand, color-mode uses cookie with dark default, i18n baseUrl and site.url set for absolute SEO URLs, static og:image in public/. Task 2: Migrate i18n translations for Phase 2 scope app/locales/fr.json, app/locales/en.json - app/locales/fr.json (currently empty {}) - app/locales/en.json (currently empty {}) - src/locales/fr.ts (source translations to migrate — nav, footer keys) - src/locales/en.ts (source EN translations) - .planning/phases/02-ssr-shell/02-UI-SPEC.md (Copywriting Contract table — exact copy for all nav, footer, a11y keys) - app/data/projects.ts (check which i18n keys projects reference — those need translation entries too) Enrich app/locales/fr.json and app/locales/en.json with ALL keys needed by Phase 2 (header, footer, SEO metadata, accessibility labels). Also migrate existing project/page translation keys from src/locales/ that are already referenced by data files. **Phase 2 keys to add (from UI-SPEC Copywriting Contract):** fr.json top-level structure: ```json { "nav": { "home": "Accueil", "projects": "Projets", "about": "A propos", "contact": "Contact", "fiverr": "Fiverr", "formation": "Formation" }, "footer": { "copyright": "© 2026 Killian' DAL-CIN" }, "a11y": { "logoLabel": "Killian' DAL-CIN — Developpeur Full Stack — Retour a l'accueil", "openMenu": "Ouvrir le menu de navigation", "closeMenu": "Fermer le menu de navigation", "closeDrawer": "Fermer le menu", "langToggle": "Changer la langue — actuellement Francais", "themeDark": "Activer le mode clair", "themeLight": "Activer le mode sombre", "github": "GitHub de Killian' DAL-CIN (nouvelle fenetre)", "linkedin": "LinkedIn de Killian' DAL-CIN (nouvelle fenetre)", "fiverr": "Fiverr de Killian' DAL-CIN (nouvelle fenetre)" }, "seo": { "home": { "title": "Killian' DAL-CIN — Developpeur Full Stack Freelance", "description": "Portfolio de Killian' DAL-CIN, developpeur full stack freelance specialise en Vue.js, React et Node.js. Applications web performantes et solutions sur-mesure." }, "projects": { "title": "Projets — Killian' DAL-CIN", "description": "Decouvrez mes realisations en developpement web : applications Vue.js, API Node.js, bots Discord et solutions d'entreprise." }, "about": { "title": "A propos — Killian' DAL-CIN", "description": "Biographie et competences de Killian' DAL-CIN, developpeur full stack freelance base en France." }, "contact": { "title": "Contact — Killian' DAL-CIN", "description": "Contactez Killian' DAL-CIN pour discuter de votre projet de developpement web." }, "fiverr": { "title": "Services Fiverr — Killian' DAL-CIN", "description": "Services de developpement disponibles sur Fiverr : bots Discord, plugins Minecraft, applications web." }, "formation": { "title": "Formation — Killian' DAL-CIN", "description": "Formations et cours proposes par Killian' DAL-CIN en developpement web." } } } ``` en.json same structure with English translations: ```json { "nav": { "home": "Home", "projects": "Projects", "about": "About", "contact": "Contact", "fiverr": "Fiverr", "formation": "Training" }, "footer": { "copyright": "© 2026 Killian' DAL-CIN" }, "a11y": { "logoLabel": "Killian' DAL-CIN — Full Stack Developer — Back to homepage", "openMenu": "Open navigation menu", "closeMenu": "Close navigation menu", "closeDrawer": "Close menu", "langToggle": "Change language — currently English", "themeDark": "Switch to light mode", "themeLight": "Switch to dark mode", "github": "Killian' DAL-CIN on GitHub (opens in new tab)", "linkedin": "Killian' DAL-CIN on LinkedIn (opens in new tab)", "fiverr": "Killian' DAL-CIN on Fiverr (opens in new tab)" }, "seo": { "home": { "title": "Killian' DAL-CIN — Freelance Full Stack Developer", "description": "Portfolio of Killian' DAL-CIN, freelance full stack developer specializing in Vue.js, React and Node.js. High-performance web applications and custom solutions." }, "projects": { "title": "Projects — Killian' DAL-CIN", "description": "Discover my web development projects: Vue.js applications, Node.js APIs, Discord bots and enterprise solutions." }, "about": { "title": "About — Killian' DAL-CIN", "description": "Biography and skills of Killian' DAL-CIN, freelance full stack developer based in France." }, "contact": { "title": "Contact — Killian' DAL-CIN", "description": "Contact Killian' DAL-CIN to discuss your web development project." }, "fiverr": { "title": "Fiverr Services — Killian' DAL-CIN", "description": "Development services available on Fiverr: Discord bots, Minecraft plugins, web applications." }, "formation": { "title": "Training — Killian' DAL-CIN", "description": "Training and courses offered by Killian' DAL-CIN in web development." } } } ``` ALSO: migrate all existing translation keys from src/locales/fr.ts and src/locales/en.ts that are referenced by app/data/*.ts files (project titles, descriptions, testimonials, FAQ, techstack categories, home page content, etc.). Merge them into the same fr.json/en.json files under their existing key structure (e.g., `projects.xinko.title`, `home.title`, etc.). Per D-06: one file per language, enrich existing files. node -e "const fr=require('./app/locales/fr.json'); const en=require('./app/locales/en.json'); const checks=['nav.home','footer.copyright','a11y.logoLabel','seo.home.title','seo.projects.title']; const ok=checks.every(k=>{const p=k.split('.'); let v=fr; for(const s of p) v=v?.[s]; return !!v}) && checks.every(k=>{const p=k.split('.'); let v=en; for(const s of p) v=v?.[s]; return !!v}); console.log(ok?'PASS':'FAIL')" - app/locales/fr.json contains keys: nav.home, nav.projects, nav.about, nav.contact, nav.fiverr, nav.formation - app/locales/fr.json contains keys: footer.copyright, a11y.logoLabel, a11y.openMenu, a11y.themeDark - app/locales/fr.json contains keys: seo.home.title, seo.home.description, seo.projects.title - app/locales/en.json contains the same key structure with English values - en.json nav.formation value is "Training" (not "Formation") - Both files are valid JSON (node -e "require('./app/locales/fr.json')" exits 0) - Existing i18n keys referenced by app/data/*.ts are present in both locale files Both fr.json and en.json contain all nav, footer, a11y, seo keys from UI-SPEC copywriting contract plus migrated keys from src/locales/ for data file references. ## Trust Boundaries | Boundary | Description | |----------|-------------| | Cookie → Server | i18n and color-mode cookies read by server to determine locale/theme | ## STRIDE Threat Register | Threat ID | Category | Component | Disposition | Mitigation Plan | |-----------|----------|-----------|-------------|-----------------| | T-02-01 | Tampering | color-mode cookie | accept | Cookie only controls CSS class (dark/light) — no security impact if tampered | | T-02-02 | Tampering | i18n cookie | accept | Cookie only controls locale (fr/en) — no security impact if tampered | | T-02-03 | Information Disclosure | site.url in nuxt.config | accept | Public URL, no secret information | - `npx nuxi typecheck` passes - `pnpm dev` starts without errors - fr.json and en.json are valid JSON with all Phase 2 keys - Brand color #85cb85 registered as Nuxt UI primary - Color-mode configured with cookie storage, dark default, no FOUC - i18n baseUrl set for absolute hreflang/canonical URLs - All Phase 2 translation keys present in both locale files - Static og:image exists in public/ After completion, create `.planning/phases/02-ssr-shell/02-01-SUMMARY.md`