feat(i18n): add French language support and enhance localization
All checks were successful
Deploy to production / deploy (push) Successful in 2m48s
All checks were successful
Deploy to production / deploy (push) Successful in 2m48s
- Introduced French as a supported language across the application, updating locale files and adding translations for various components. - Enhanced language handling logic to accommodate French, ensuring proper detection and fallback mechanisms. - Updated UI elements to include French language options, improving accessibility for French-speaking users. - Refactored SEO handling to include French in hreflang links, enhancing search engine indexing for multilingual content. - Added new scripts for managing French translations and ensuring consistency across language files.
This commit is contained in:
Torsten Schulz (local)
113
docs/KONZEPT_UI_SPRACHE_FRANZOESISCH.md
Normal file
113
docs/KONZEPT_UI_SPRACHE_FRANZOESISCH.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Konzept: Französisch (`fr`) als Bedien-/UI-Sprache
|
||||
|
||||
**Stand:** April 2026
|
||||
**Bezug:** Bestehende Locales `de`, `en`, `es`, `ceb` (Vue I18n, Store, SEO, Header).
|
||||
|
||||
---
|
||||
|
||||
## 1. Ziel
|
||||
|
||||
- Nutzer können die Oberfläche auf **Französisch** stellen (Endonym: **Français**).
|
||||
- **Vollständige Key-Parität** mit der deutschen Referenz (`de`), analog zu **Spanisch** (`es`): keine stillen Lücken, die nur über Fallback sichtbar werden.
|
||||
- **Locale-Code:** `fr` (BCP 47). Regionale Varianten (`fr-CA`, `fr-CH`) nur bei Bedarf später; vorerst eine gemeinsame `fr`-UI.
|
||||
|
||||
---
|
||||
|
||||
## 2. Inhaltliche Leitplanken
|
||||
|
||||
| Thema | Empfehlung |
|
||||
|--------|------------|
|
||||
| **Anrede** | Einheitlich festlegen: **„vous“** (formell) oder **„tu“** (duzt); für eine Community-Plattform oft **vous** bei Systemtexten, ggf. Ausnahmen in Spieldialogen abstimmen. **Umsetzung:** Die erste französische UI-Version wurde maschinell aus dem Deutschen erzeugt (`google-translate-api-x`); menschliche Nachbearbeitung sollte **vous** durchgängig prüfen (v. a. Social/Vocab/Falukant). |
|
||||
| **Referenz für Keys** | `de` als maßgebliche Struktur; Übersetzung nach Französisch. |
|
||||
| **Qualität** | Große Module (Falukant, Admin, Social/Vocab) iterativ oder durch TMS/Übersetzer; CI-Check auf Key-Parität `de` ↔ `fr`. |
|
||||
|
||||
---
|
||||
|
||||
## 3. Technische Umsetzung (Frontend)
|
||||
|
||||
### 3.1 Neue Übersetzungsdateien
|
||||
|
||||
- Ordner: `frontend/src/i18n/locales/fr/`
|
||||
- Dieselben **19 JSON-Dateien** wie unter `en` / `de` / `es` / `ceb` (z. B. `general.json`, `header.json`, … `seo.json`).
|
||||
|
||||
### 3.2 I18n-Bundling
|
||||
|
||||
- Datei: `frontend/src/i18n/index.js`
|
||||
- Alle `fr*` importieren.
|
||||
- Block `messages.fr = { ...frGeneral, …, ...frSeo }` analog zu `es`.
|
||||
- **`fallbackLocale`:** gesetzt als **`fr: ['de']`** (Lücken fallen auf Deutsch zurück).
|
||||
- **`ceb`** nutzt `deepMerge` über `en`+`ceb`; **`fr`** wie **`es`**: nur `fr`-Bundles, kein deepMerge nötig.
|
||||
|
||||
### 3.3 Zentrale Liste unterstützter UI-Locales
|
||||
|
||||
Aktuell mehrfach dieselbe Liste (`de`, `en`, `ceb`, `es`), u. a. in:
|
||||
|
||||
- `frontend/src/store/index.js`
|
||||
- `frontend/src/main.js` (`?lang=`, localStorage)
|
||||
- `frontend/src/components/AppHeader.vue`
|
||||
- `frontend/src/components/SettingsWidget.vue`
|
||||
- `frontend/src/utils/seo.js`
|
||||
|
||||
**Empfehlung:** Eine exportierte Konstante z. B. `frontend/src/i18n/supportedLocales.js` (`SUPPORTED_UI_LOCALES`, ggf. `SEO_UI_LOCALES` daraus ableiten oder gemeinsam pflegen) und alle Stellen darauf umstellen – **vor oder beim** Einführen von `fr`, damit keine Stelle vergessen wird.
|
||||
|
||||
### 3.4 Sprachauswahl UI
|
||||
|
||||
- **`AppHeader.vue`:** Option `{ value: 'fr', nativeLabel: 'Français' }`; `supported` aus Zentralmodul.
|
||||
- **`SettingsWidget.vue`:** Nach Speichern der Profil-Sprache Store synchron halten; `languagesList` aktuell unvollständig vs. Header – **alle** UI-Sprachen (`de`, `en`, `ceb`, `es`, `fr`) konsistent anbieten oder vollständig aus API-`setting.options` speisen.
|
||||
|
||||
### 3.5 Register / Einstellungen (JSON)
|
||||
|
||||
- In `settings.personal.language` (und falls nötig `register.languages`) in **allen** relevanten Locales den Eintrag **`fr`** / **„Français“** ergänzen.
|
||||
|
||||
### 3.6 SEO & Einstieg per URL
|
||||
|
||||
- **`frontend/src/utils/seo.js`:** `fr` in die Locale-Liste aufnehmen; `hreflang` für `fr`; `og:locale` / Alternates wie bei bestehenden Sprachen.
|
||||
- **`main.js`:** Query `?lang=fr` über zentrale erlaubte Locales freischalten.
|
||||
- **`index.html`:** falls hreflang/noscript manuell gepflegt wird – `fr` ergänzen.
|
||||
|
||||
### 3.7 Browser-Sprache (optional)
|
||||
|
||||
- In `store` / `main.js`: Wenn `navigator.language` mit `fr` beginnt (z. B. `fr`, `fr-FR`, `fr-BE`, `fr-CH`), Standard-UI auf `fr` setzen – analog zu bestehender Logik für Deutsch und Bisaya.
|
||||
|
||||
---
|
||||
|
||||
## 4. Backend
|
||||
|
||||
- Falls die **Account-Sprache** serverseitig validiert oder als feste Optionsliste ausgeliefert wird: **`fr`** zur Whitelist / zu den Optionen hinzufügen.
|
||||
- **Vocab-Sprachen** in der Datenbank (Kurse, Zielsprachen) sind unabhängig von der **UI-Locale**; keine Pflichtänderung für reines UI-Französisch.
|
||||
|
||||
---
|
||||
|
||||
## 5. Qualitätssicherung & Abnahme
|
||||
|
||||
- Skript: flache Key-Parität `de` vs. `fr` pro JSON-Datei (wie bereits für `es` genutzt).
|
||||
- `npm run build` ohne Fehler.
|
||||
- Manuell: `?lang=fr`, Wechsel im Header ohne vollständigen Reload, Smoke über Login, Einstellungen, eine Social-/Falukant-Ansicht.
|
||||
|
||||
---
|
||||
|
||||
## 6. Definition of Done (Checkliste)
|
||||
|
||||
- [x] `frontend/src/i18n/locales/fr/*.json` vollständig (Key-Parität zu `de`)
|
||||
- [x] `i18n/index.js`: `fr` eingebunden, `fallbackLocale` für `fr` gesetzt (`['de']`)
|
||||
- [x] Zentrale `SUPPORTED_UI_LOCALES` in `frontend/src/i18n/supportedLocales.js`; Store, `main.js`, Header, Settings-Widget, `seo.js` importieren daraus
|
||||
- [x] `AppHeader`, `main.js`, `store`, `seo.js`, `RegisterDialog` um `fr` / Browser-Erkennung `fr*` erweitert
|
||||
- [x] `settings` / `register` JSON: Sprache `fr` (und Register um `es` wo gefehlt) ergänzt
|
||||
- [x] `SettingsWidget`: `languagesList` über alle UI-Sprachen aus `SUPPORTED_UI_LOCALES`
|
||||
- [x] Backend: `initializeTypes` + `authService` + Migration `type.user_param_value` für `fr`
|
||||
- [x] SEO/hreflang/`?lang=fr` + `index.html` Alternate + noscript `lang="fr"`
|
||||
- [x] QA: `npm run i18n:check-parity` (de↔fr), `npm run build`
|
||||
- [x] Anrede / MT-Hinweis in Abschnitt 2 (Tabelle) und Skript `frontend/scripts/generate-fr-locale-from-de.mjs` für Regenerierung
|
||||
|
||||
---
|
||||
|
||||
## 7. Nächste Schritte (optional als Tickets)
|
||||
|
||||
1. **Infra:** `supportedLocales.js` + `fr` in allen technischen Stellen + leere/kopierte `fr`-JSONs aus `de` als Stub.
|
||||
2. **SEO:** hreflang, `seo.json` `fr`, `main.js` / `index.html`.
|
||||
3. **Übersetzung:** modulweise (Core → Social → Falukant → Admin).
|
||||
4. **QA & CI:** Key-Check im Workflow.
|
||||
|
||||
---
|
||||
|
||||
*Ende des Konzepts.*
|
||||
Reference in New Issue
Block a user