Files
yourpart3/docs/KONZEPT_UI_SPRACHE_FRANZOESISCH.md
Torsten Schulz (local) f7030bbabe
All checks were successful
Deploy to production / deploy (push) Successful in 2m48s
feat(i18n): add French language support and enhance localization
- 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.
2026-04-07 18:04:03 +02:00

114 lines
5.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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.*