🌐 Add full i18n system frontend + API (Story 1.3)
Nuxt i18n with lazy-loaded JSON files, localized routes, hreflang SEO tags, LanguageSwitcher component. Laravel SetLocale middleware, HasTranslations trait, API Resources and Controllers for projects/skills with Accept-Language support. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Story 1.3: Système i18n frontend + API bilingue
|
||||
|
||||
Status: ready-for-dev
|
||||
Status: review
|
||||
|
||||
## Story
|
||||
|
||||
@@ -22,28 +22,28 @@ so that je comprends le contenu.
|
||||
|
||||
## Tasks / Subtasks
|
||||
|
||||
- [ ] **Task 1: Configuration @nuxtjs/i18n** (AC: #1, #2, #3, #4)
|
||||
- [ ] Vérifier que `@nuxtjs/i18n` est installé (Story 1.1)
|
||||
- [ ] Créer la structure `frontend/i18n/` pour les fichiers de traduction
|
||||
- [ ] Configurer `nuxt.config.ts` avec i18n complet :
|
||||
- [x] **Task 1: Configuration @nuxtjs/i18n** (AC: #1, #2, #3, #4)
|
||||
- [x] Vérifier que `@nuxtjs/i18n` est installé (Story 1.1)
|
||||
- [x] Créer la structure `frontend/i18n/` pour les fichiers de traduction
|
||||
- [x] Configurer `nuxt.config.ts` avec i18n complet :
|
||||
- locales: ['fr', 'en']
|
||||
- defaultLocale: 'fr'
|
||||
- strategy: 'prefix_except_default'
|
||||
- detectBrowserLanguage: false (on utilise l'URL)
|
||||
- [ ] Activer `vueI18n` pour le composant `<i18n-t>`
|
||||
- [x] Activer `vueI18n` pour le composant `<i18n-t>`
|
||||
|
||||
- [ ] **Task 2: Fichiers de traduction JSON** (AC: #1)
|
||||
- [ ] Créer `frontend/i18n/fr.json` avec structure de base
|
||||
- [ ] Créer `frontend/i18n/en.json` avec structure de base
|
||||
- [ ] Inclure les traductions pour :
|
||||
- [x] **Task 2: Fichiers de traduction JSON** (AC: #1)
|
||||
- [x] Créer `frontend/i18n/fr.json` avec structure de base
|
||||
- [x] Créer `frontend/i18n/en.json` avec structure de base
|
||||
- [x] Inclure les traductions pour :
|
||||
- Navigation (Accueil, Projets, Compétences, Témoignages, Parcours, Contact)
|
||||
- Boutons communs (Continuer, Retour, Découvrir, Fermer)
|
||||
- Messages d'erreur (404, erreur générique)
|
||||
- Landing page (accroche, CTA Aventure, CTA Express)
|
||||
- Footer et metadata
|
||||
|
||||
- [ ] **Task 3: Routes localisées Nuxt** (AC: #2, #3)
|
||||
- [ ] Configurer `i18n.pages` dans nuxt.config.ts pour les routes custom :
|
||||
- [x] **Task 3: Routes localisées Nuxt** (AC: #2, #3)
|
||||
- [x] Configurer `i18n.pages` dans nuxt.config.ts pour les routes custom :
|
||||
```
|
||||
pages: {
|
||||
'projets/[slug]': { en: '/projects/[slug]' },
|
||||
@@ -53,85 +53,85 @@ so that je comprends le contenu.
|
||||
'contact': { en: '/contact' }
|
||||
}
|
||||
```
|
||||
- [ ] Vérifier que les routes FR fonctionnent sans préfixe
|
||||
- [ ] Vérifier que les routes EN fonctionnent avec préfixe `/en`
|
||||
- [x] Vérifier que les routes FR fonctionnent sans préfixe
|
||||
- [x] Vérifier que les routes EN fonctionnent avec préfixe `/en`
|
||||
|
||||
- [ ] **Task 4: Helpers i18n et composables** (AC: #4)
|
||||
- [ ] Créer un composable `frontend/app/composables/useLocale.ts` pour centraliser la logique i18n
|
||||
- [ ] Exposer : `currentLocale`, `switchLocale()`, `localizedPath()`
|
||||
- [ ] Tester `useI18n()` dans un composant
|
||||
- [ ] Tester `$t('key')` dans un template
|
||||
- [ ] Tester `localePath('/projets')` pour les liens
|
||||
- [ ] Tester `switchLocalePath('en')` pour le switcher de langue
|
||||
- [x] **Task 4: Helpers i18n et composables** (AC: #4)
|
||||
- [x] Créer un composable `frontend/app/composables/useLocale.ts` pour centraliser la logique i18n
|
||||
- [x] Exposer : `currentLocale`, `switchLocale()`, `localizedPath()`
|
||||
- [x] Tester `useI18n()` dans un composant
|
||||
- [x] Tester `$t('key')` dans un template
|
||||
- [x] Tester `localePath('/projets')` pour les liens
|
||||
- [x] Tester `switchLocalePath('en')` pour le switcher de langue
|
||||
|
||||
- [ ] **Task 5: SEO et balises hreflang** (AC: #5, #6)
|
||||
- [ ] Configurer `i18n.head` dans nuxt.config.ts pour les balises SEO
|
||||
- [ ] Vérifier que `<html lang="fr">` ou `<html lang="en">` est dynamique
|
||||
- [ ] Vérifier les balises `<link rel="alternate" hreflang="fr" href="..." />`
|
||||
- [ ] Vérifier les balises `<link rel="alternate" hreflang="en" href="..." />`
|
||||
- [ ] Vérifier `<link rel="alternate" hreflang="x-default" href="..." />`
|
||||
- [x] **Task 5: SEO et balises hreflang** (AC: #5, #6)
|
||||
- [x] Configurer `i18n.head` dans nuxt.config.ts pour les balises SEO
|
||||
- [x] Vérifier que `<html lang="fr">` ou `<html lang="en">` est dynamique
|
||||
- [x] Vérifier les balises `<link rel="alternate" hreflang="fr" href="..." />`
|
||||
- [x] Vérifier les balises `<link rel="alternate" hreflang="en" href="..." />`
|
||||
- [x] Vérifier `<link rel="alternate" hreflang="x-default" href="..." />`
|
||||
|
||||
- [ ] **Task 6: Composant LanguageSwitcher** (AC: #4)
|
||||
- [ ] Créer `frontend/app/components/ui/LanguageSwitcher.vue`
|
||||
- [ ] Afficher les langues disponibles (FR / EN)
|
||||
- [ ] Utiliser `switchLocalePath()` pour la navigation
|
||||
- [ ] Highlight de la langue active
|
||||
- [ ] Accessible au clavier (boutons ou liens)
|
||||
- [ ] Style cohérent avec le design system (sky-accent pour actif)
|
||||
- [x] **Task 6: Composant LanguageSwitcher** (AC: #4)
|
||||
- [x] Créer `frontend/app/components/ui/LanguageSwitcher.vue`
|
||||
- [x] Afficher les langues disponibles (FR / EN)
|
||||
- [x] Utiliser `switchLocalePath()` pour la navigation
|
||||
- [x] Highlight de la langue active
|
||||
- [x] Accessible au clavier (boutons ou liens)
|
||||
- [x] Style cohérent avec le design system (sky-accent pour actif)
|
||||
|
||||
- [ ] **Task 7: Middleware Laravel SetLocale** (AC: #7, #9)
|
||||
- [ ] Créer `api/app/Http/Middleware/SetLocale.php`
|
||||
- [ ] Extraire la langue depuis le header `Accept-Language`
|
||||
- [ ] Parser le header (ex: `fr-FR,fr;q=0.9,en;q=0.8` → `fr`)
|
||||
- [ ] Valider que la langue est supportée (fr, en)
|
||||
- [ ] Fallback vers `fr` si langue non supportée
|
||||
- [ ] Stocker la langue dans `app()->setLocale($lang)`
|
||||
- [ ] Passer la langue via `$request->attributes->set('lang', $lang)`
|
||||
- [ ] Enregistrer le middleware dans `bootstrap/app.php` pour les routes API
|
||||
- [x] **Task 7: Middleware Laravel SetLocale** (AC: #7, #9)
|
||||
- [x] Créer `api/app/Http/Middleware/SetLocale.php`
|
||||
- [x] Extraire la langue depuis le header `Accept-Language`
|
||||
- [x] Parser le header (ex: `fr-FR,fr;q=0.9,en;q=0.8` → `fr`)
|
||||
- [x] Valider que la langue est supportée (fr, en)
|
||||
- [x] Fallback vers `fr` si langue non supportée
|
||||
- [x] Stocker la langue dans `app()->setLocale($lang)`
|
||||
- [x] Passer la langue via `$request->attributes->set('lang', $lang)`
|
||||
- [x] Enregistrer le middleware dans `bootstrap/app.php` pour les routes API
|
||||
|
||||
- [ ] **Task 8: Trait HasTranslations pour les Models** (AC: #8)
|
||||
- [ ] Créer `api/app/Traits/HasTranslations.php`
|
||||
- [ ] Méthode `getTranslated($keyField, $lang = null)` qui :
|
||||
- [x] **Task 8: Trait HasTranslations pour les Models** (AC: #8)
|
||||
- [x] Créer `api/app/Traits/HasTranslations.php`
|
||||
- [x] Méthode `getTranslated($keyField, $lang = null)` qui :
|
||||
- Récupère la clé depuis le champ (ex: `$this->title_key`)
|
||||
- Joint la table `translations` pour obtenir la valeur
|
||||
- Utilise la langue du request ou le fallback
|
||||
- [ ] Appliquer le trait aux models : Project, Skill
|
||||
- [ ] Tester : `$project->getTranslated('title_key', 'fr')`
|
||||
- [x] Appliquer le trait aux models : Project, Skill
|
||||
- [x] Tester : `$project->getTranslated('title_key', 'fr')`
|
||||
|
||||
- [ ] **Task 9: API Resources avec traductions** (AC: #8)
|
||||
- [ ] Créer `api/app/Http/Resources/ProjectResource.php`
|
||||
- [ ] Transformer les champs `*_key` en valeurs traduites :
|
||||
- [x] **Task 9: API Resources avec traductions** (AC: #8)
|
||||
- [x] Créer `api/app/Http/Resources/ProjectResource.php`
|
||||
- [x] Transformer les champs `*_key` en valeurs traduites :
|
||||
```php
|
||||
'title' => $this->getTranslated('title_key'),
|
||||
'description' => $this->getTranslated('description_key'),
|
||||
```
|
||||
- [ ] Créer `api/app/Http/Resources/SkillResource.php` de même
|
||||
- [ ] Inclure `meta.lang` dans les réponses pour debug/vérification
|
||||
- [x] Créer `api/app/Http/Resources/SkillResource.php` de même
|
||||
- [x] Inclure `meta.lang` dans les réponses pour debug/vérification
|
||||
|
||||
- [ ] **Task 10: Endpoints API avec traductions** (AC: #7, #8)
|
||||
- [ ] Créer `api/app/Http/Controllers/Api/ProjectController.php`
|
||||
- [ ] Endpoint `GET /api/projects` retournant la liste traduite
|
||||
- [ ] Endpoint `GET /api/projects/{slug}` retournant le détail traduit
|
||||
- [ ] Créer `api/app/Http/Controllers/Api/SkillController.php`
|
||||
- [ ] Endpoint `GET /api/skills` retournant la liste traduite par catégorie
|
||||
- [ ] Enregistrer les routes dans `routes/api.php`
|
||||
- [x] **Task 10: Endpoints API avec traductions** (AC: #7, #8)
|
||||
- [x] Créer `api/app/Http/Controllers/Api/ProjectController.php`
|
||||
- [x] Endpoint `GET /api/projects` retournant la liste traduite
|
||||
- [x] Endpoint `GET /api/projects/{slug}` retournant le détail traduit
|
||||
- [x] Créer `api/app/Http/Controllers/Api/SkillController.php`
|
||||
- [x] Endpoint `GET /api/skills` retournant la liste traduite par catégorie
|
||||
- [x] Enregistrer les routes dans `routes/api.php`
|
||||
|
||||
- [ ] **Task 11: Intégration frontend-backend** (AC: tous)
|
||||
- [ ] Créer composable `frontend/app/composables/useApi.ts` qui :
|
||||
- [x] **Task 11: Intégration frontend-backend** (AC: tous)
|
||||
- [x] Créer composable `frontend/app/composables/useApi.ts` qui :
|
||||
- Utilise `$fetch` ou `useFetch` de Nuxt
|
||||
- Ajoute automatiquement le header `X-API-Key`
|
||||
- Ajoute automatiquement le header `Accept-Language` selon la locale courante
|
||||
- [ ] Tester un appel API depuis une page Nuxt
|
||||
- [ ] Vérifier que le contenu retourné est dans la bonne langue
|
||||
- [x] Tester un appel API depuis une page Nuxt
|
||||
- [x] Vérifier que le contenu retourné est dans la bonne langue
|
||||
|
||||
- [ ] **Task 12: Validation finale** (AC: tous)
|
||||
- [ ] Accéder à `/` → contenu FR
|
||||
- [ ] Accéder à `/en` → contenu EN
|
||||
- [ ] Cliquer sur le switcher FR → EN → URL change vers `/en`
|
||||
- [ ] API call avec `Accept-Language: en` → réponse en anglais
|
||||
- [ ] API call avec `Accept-Language: de` → fallback FR
|
||||
- [ ] Vérifier les balises hreflang dans le code source HTML
|
||||
- [ ] Vérifier `<html lang="...">` dynamique
|
||||
- [x] **Task 12: Validation finale** (AC: tous)
|
||||
- [x] Accéder à `/` → contenu FR
|
||||
- [x] Accéder à `/en` → contenu EN
|
||||
- [x] Cliquer sur le switcher FR → EN → URL change vers `/en`
|
||||
- [x] API call avec `Accept-Language: en` → réponse en anglais
|
||||
- [x] API call avec `Accept-Language: de` → fallback FR
|
||||
- [x] Vérifier les balises hreflang dans le code source HTML
|
||||
- [x] Vérifier `<html lang="...">` dynamique
|
||||
|
||||
## Dev Notes
|
||||
|
||||
@@ -459,16 +459,49 @@ api/
|
||||
|
||||
### Agent Model Used
|
||||
|
||||
{{agent_model_name_version}}
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
|
||||
### Debug Log References
|
||||
|
||||
- hreflang tags non générés au début — résolu en ajoutant `useLocaleHead()` dans `app.vue` avec `addSeoAttributes: true`
|
||||
- `langDir` configuré en `'../i18n/'` (relatif à `app/`) car Nuxt 4 utilise `app/` comme srcDir
|
||||
|
||||
### Completion Notes List
|
||||
|
||||
- Frontend: i18n configuré avec lazy loading, fichiers JSON FR/EN, routes localisées, `useLocaleHead()` pour SEO
|
||||
- Frontend: Composable `useLocale` encapsule la logique i18n, composable `useApi` ajoute automatiquement les headers
|
||||
- Frontend: LanguageSwitcher accessible au clavier avec highlight de la langue active
|
||||
- Backend: Middleware SetLocale parse `Accept-Language` avec support qualité (q=), fallback FR
|
||||
- Backend: Trait HasTranslations appliqué à Project et Skill
|
||||
- Backend: API Resources transforment les `*_key` en valeurs traduites, meta.lang inclus
|
||||
- Backend: Controllers avec endpoints GET /api/projects, GET /api/projects/{slug}, GET /api/skills
|
||||
- Validé: `/` → FR, `/en` → EN, hreflang tags, `<html lang="fr-FR">` / `<html lang="en-US">`
|
||||
- Validé: API avec Accept-Language: fr → FR, en → EN, de → fallback FR
|
||||
|
||||
### Change Log
|
||||
| Date | Change | Author |
|
||||
|------|--------|--------|
|
||||
| 2026-02-03 | Story créée avec contexte complet | SM Agent |
|
||||
| 2026-02-05 | Tasks 1-12 implémentées et validées | Dev Agent (Claude Opus 4.5) |
|
||||
|
||||
### File List
|
||||
|
||||
- `frontend/i18n/fr.json` — CRÉÉ
|
||||
- `frontend/i18n/en.json` — CRÉÉ
|
||||
- `frontend/nuxt.config.ts` — MODIFIÉ (config i18n complète)
|
||||
- `frontend/app/app.vue` — MODIFIÉ (useLocaleHead pour SEO)
|
||||
- `frontend/app/pages/index.vue` — MODIFIÉ (utilise $t())
|
||||
- `frontend/app/composables/useLocale.ts` — CRÉÉ
|
||||
- `frontend/app/composables/useApi.ts` — CRÉÉ
|
||||
- `frontend/app/components/ui/LanguageSwitcher.vue` — CRÉÉ
|
||||
- `api/app/Http/Middleware/SetLocale.php` — CRÉÉ
|
||||
- `api/app/Traits/HasTranslations.php` — CRÉÉ
|
||||
- `api/app/Http/Resources/ProjectResource.php` — CRÉÉ
|
||||
- `api/app/Http/Resources/SkillResource.php` — CRÉÉ
|
||||
- `api/app/Http/Controllers/Api/ProjectController.php` — CRÉÉ
|
||||
- `api/app/Http/Controllers/Api/SkillController.php` — CRÉÉ
|
||||
- `api/bootstrap/app.php` — MODIFIÉ (ajout middleware SetLocale)
|
||||
- `api/routes/api.php` — MODIFIÉ (ajout routes projects/skills)
|
||||
- `api/app/Models/Project.php` — MODIFIÉ (ajout HasTranslations trait)
|
||||
- `api/app/Models/Skill.php` — MODIFIÉ (ajout HasTranslations trait)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user