Téléverser les fichiers vers "/"

This commit is contained in:
2026-08-02 19:59:34 +02:00
parent 8e5ffcb50c
commit a29f29c04e
+169
View File
@@ -0,0 +1,169 @@
# Chaînes de thème (navbar / footer / catégories) — flux Tolgee
> Ce document décrit **le vrai** cycle push/pull de Tolgee tel qu'il est câblé dans le projet
> (`.tolgeerc.json` + `tolgee/transform.mjs` + `@tolgee/cli`). Il ne concerne **pas** le contenu
> des pages `.mdx` (ça, c'est `translate.py` — voir `translate-README.md`).
## Deux systèmes de traduction, à ne pas confondre
| Ce qu'on traduit | Outil | Où ça atterrit |
|---|---|---|
| **Contenu des pages** (`.mdx`) | `translate.py` / manuel | `i18n/<lang>/docusaurus-plugin-content-docs/current/<page>` |
| **Chaînes de thème/UI** (navbar, footer, **labels de catégories** comme « Editor », **libellés de composants React** comme le widget IA) | **Tolgee** | `i18n/<lang>/docusaurus-theme-classic/*.json` + `.../current.json` + `code.json` |
« Editor » (label du menu de gauche) vient de `docs/editor/_category_.json` : c'est une **chaîne de thème**,
donc elle passe par **Tolgee**, pas par `translate.py`.
## Les pièces du dispositif
- **`.tolgeerc.json`** — config CLI : projet `4`, format `JSON_I18NEXT`, push/pull vers `tolgee-staging/{languageTag}/{namespace}.json`.
- **`tolgee/transform.mjs`** — pont entre le format Docusaurus (`{clé:{message}}`) et le format Tolgee/i18next (plat/imbriqué). Deux commandes :
- `flatten` : `i18n/en/<ns>``tolgee-staging/en/<ns>.json` (prépare la **source** anglaise à envoyer).
- `wrap` : `tolgee-staging/<locale>/<ns>.json``i18n/<locale>/<ns>` (réinjecte les **traductions** reçues).
- **`@tolgee/cli`** (devDependency) — `npx tolgee push` / `npx tolgee pull`. Auth via la variable d'env **`TOLGEE_API_KEY`** (clé du projet Tolgee) ou l'option `--api-key`.
- **Namespaces traduits** (objet `NS` de `transform.mjs`) : `navbar`, `footer`, `ai-agent` (libellés des composants React — widget IA `askAI.*` ; **fichier source imposé** = `code.json`). (`current`, labels de catégories du menu, est prévu en Phase 2.)
- **`PUSH_FILTER`** (dans `transform.mjs`) — pour un namespace donné, ne pousse vers Tolgee que les clés retenues. Utilisé pour `code` (voir la section dédiée plus bas).
> ️ `tolgee-staging/` est **volontairement exclu** de la sauvegarde (fichiers temporaires) : il est **régénéré**
> par `flatten` (côté en) et par `pull` (côté traductions). Rien à restaurer.
## PUSH — envoyer les chaînes source (anglais) vers Tolgee
```bash
cd ~/docs-src
source .env.tolgee # charge TOLGEE_API_KEY
# 1. (Si tu as changé la navbar / footer / des labels de catégories / un libellé de
# composant React — ex. le widget IA) régénère la source anglaise :
npm run write-translations -- --locale en
# 2. Convertis la source Docusaurus -> format Tolgee :
node tolgee/transform.mjs flatten # écrit tolgee-staging/en/<ns>.json
# 3. Envoie la source vers Tolgee :
npx tolgee push
```
Puis **traduis dans l'interface Tolgee** (https://tolgee.karaokeclip.video, projet 4) — à la main ou via la
traduction automatique de Tolgee — dans les 32 langues.
## PULL — récupérer les traductions et les câbler dans Docusaurus
```bash
cd ~/docs-src
source .env.tolgee # charge TOLGEE_API_KEY
# 1. Rapatrie toutes les langues :
npx tolgee pull # remplit tolgee-staging/<lang>/<ns>.json
# 2. Réinjecte au format Docusaurus :
node tolgee/transform.mjs wrap # écrit i18n/<lang>/docusaurus-theme-classic/*.json
# 3. Build + déploiement :
./deploy.sh
```
## Labels de catégories du menu (namespace `current`)
Les labels de catégories (ex. « Editor », qui vient de `docs/<dossier>/_category_.json`) vivent dans le
namespace **`current`**. Dès qu'ils apparaissent dans `i18n/en/docusaurus-plugin-content-docs/current.json`
(régénéré par `npm run write-translations -- --locale en`), ils suivent **exactement le même cycle
PUSH / PULL** que `navbar` / `footer` — rien de particulier à faire.
## Libellés des composants React (namespace `ai-agent`)
Les chaînes d'interface écrites avec `translate({id, message})` dans des **composants
React** (ex. le **widget « Ask AI »** de la doc, clés `askAI.*`) sont extraites par
`npm run write-translations` dans le fichier **imposé** `i18n/<locale>/code.json`
(`translate()` n'écrit que là). Dans Tolgee, elles apparaissent sous le namespace
**`ai-agent`** et suivent le **même cycle PUSH / PULL** que `navbar` / `footer`.
> ️ Comme `wrap` réécrit **tout** `code.json` depuis un namespace, `code.json` ne peut
> correspondre qu'à **UN seul** namespace (`ai-agent`) = « toutes les chaînes de
> composants React ». Aujourd'hui = uniquement l'agent IA.
> ⚠️ **Filtre indispensable.** `code.json` contient AUSSI des chaînes de **thème
> Docusaurus** (pagination, « Previous / Next »…). On ne pousse donc vers Tolgee que
> **nos** clés, grâce à `PUSH_FILTER` dans `transform.mjs` :
>
> ```js
> const PUSH_FILTER = { 'ai-agent': (k) => k.startsWith('askAI.') };
> ```
>
> Sans ce filtre, `wrap` réécrirait les chaînes de thème **en anglais** dans toutes les
> langues et **écraserait les traductions intégrées du thème**. Pour un nouveau composant
> traduit, ajoute son préfixe dans `PUSH_FILTER` (ou nomme ses clés `askAI.*`).
> ️ Ne lance **jamais** `write-translations` pour une locale **≠ `en`** : les autres
> langues sont remplies **uniquement** par `wrap` (depuis Tolgee). Sinon tu réinjecterais
> des chaînes de thème anglaises dans `i18n/<locale>/code.json`.
## Ce qui est traduit aujourd'hui (référence)
`i18n/en/docusaurus-theme-classic/navbar.json` (source) contient : `title`, `logo.alt`,
`item.label.Documentation`, `item.label.App`. `footer.json` : `copyright`, les liens
`Application` / `Site` / `KaraokeClip`. Ce sont exactement les chaînes visibles dans Tolgee et sur le site.
`i18n/en/code.json` (namespace Tolgee **`ai-agent`**, filtré) : les ~10 clés `askAI.*` du **widget « Ask AI »**
(`askAI.btn`, `askAI.title`, `askAI.placeholder`, `askAI.intro`, `askAI.thinking`,
`askAI.sources`, `askAI.send`, `askAI.supportPrompt`, `askAI.support`, `askAI.error`).
## Instructions d'ajout dans Tolgee des chaînes liées à l'agent IA :
Voilà — **rien à changer dans le widget** (mon `translate()` est la bonne mécanique). La **seule** modification nécessaire était `transform.mjs`, que je viens de faire : ajout du namespace `code` **avec un filtre `askAI.*`**. Le widget rejoint donc **exactement** ton flux navbar/footer.
## Ce que j'ai modifié
- `tolgee/transform.mjs` : namespace `code``code.json` + `PUSH_FILTER` (ne pousse que `askAI.*`, protège les traductions de thème). Syntaxe validée ✅.
- Rien d'autre. (Ton `index.jsx` widget est déjà correct.)
## Procédure complète (sur le VPS, `~/docs-src`)
**PUSH — envoyer les 10 chaînes anglaises vers Tolgee**
```bash
cd ~/docs-src
source .env.tolgee # charge TOLGEE_API_KEY
# 1. Extraire les chaînes du widget → crée/complète i18n/en/code.json
npm run write-translations -- --locale en
# 2. Convertir la source EN → format Tolgee (pour "code", ne pousse QUE askAI.*)
node tolgee/transform.mjs flatten # écrit tolgee-staging/en/{navbar,footer,ai-agent}.json
# 3. Envoyer vers Tolgee
npx tolgee push
```
**→ Traduire dans Tolgee** (projet 4, **namespace `ai-agent`**, les ~10 clés `askAI.*`) — à la main ou via l'auto-traduction Tolgee, dans les 32 langues. *(Le namespace `code` se crée tout seul au premier push.)*
**PULL — récupérer les traductions et builder**
```bash
cd ~/docs-src
source .env.tolgee
# 1. Rapatrier toutes les langues
npx tolgee pull # remplit tolgee-staging/<lang>/code.json
# 2. Réinjecter au format Docusaurus (écrit i18n/<lang>/code.json : askAI.* uniquement)
node tolgee/transform.mjs wrap
# 3. Build + déploiement
./deploy.sh
```
## Points de vigilance (importants)
- **`write-translations` uniquement pour `--locale en`.** Jamais pour les autres langues — c'est `wrap` (depuis Tolgee) qui les remplit. Sinon tu réinjecterais des chaînes de thème en anglais.
- Le **filtre `askAI.*`** fait que **seules tes 10 chaînes** partent dans Tolgee → les chaînes de thème Docusaurus gardent leurs **traductions intégrées**. C'est le point qui évite une régression.
- **Zéro retraduction de page, zéro OpenRouter.** Exactement le même cycle que navbar/footer.
---
Claude à mis à jour **`tolgee-README.md`** pour refléter le nouveau namespace `code` :
- **Tableau « Deux systèmes »** : ajout des libellés de composants React (widget IA) → `code.json`.
- **Pièces du dispositif** : `code` ajouté à la liste des namespaces + mention de `PUSH_FILTER`.
- **PUSH étape 1** : le commentaire inclut désormais « un libellé de composant React (ex. le widget IA) » comme déclencheur du `write-translations`.
- **Nouvelle section « Libellés des composants React (namespace `code`) »** : explique l'extraction dans `code.json`, le **filtre `askAI.*` indispensable** (avec le pourquoi : ne pas écraser les traductions de thème), et le rappel de ne jamais lancer `write-translations` pour une locale ≠ `en`.
- **« Ce qui est traduit aujourd'hui »** : liste des 10 clés `askAI.*`.
Le README décrit maintenant fidèlement le pipeline réel (navbar + footer + **code**), cohérent avec le `transform.mjs` modifié.