Langues

Les langues livrées

Chaque application est livrée en anglais, la langue par défaut, et en arabe, affiché de droite à gauche. Chaque application conserve ses propres traductions :

Un namespace correspond à une zone de l'application, comme layouts, auth ou courses. Certains sont des dossiers imbriqués, par exemple messages/dashboard/courses/en.json.

Comment la langue est choisie

La langue est la première partie de l'adresse : /en/courses ou /ar/courses. Il n'y a ni cookie de langue ni détection à partir du navigateur.

• Une adresse sans langue est redirigée vers la langue par défaut, l'anglais : /courses mène à /en/courses. Dans le tableau de bord admin, / mène à /en/dashboard.
• Le sélecteur de langue ouvre la même page sous l'autre préfixe.
• Chaque requête vers l'API transmet la langue de la page dans l'en-tête Accept-Language, pour que l'API réponde dans cette langue.

Pour ouvrir en arabe par défaut, définissez defaultLocale sur "ar" dans src/config/locales.ts sur le site étudiant, et dans src/proxy.ts dans le tableau de bord admin.

Modifier une chaîne

Chaque mot affiché provient d'un fichier de messages. Recherchez le texte que vous voyez pour trouver sa clé, puis modifiez-le dans chaque langue.

grep -rn "All rights reserved" messages

Cette recherche trouve la ligne de copyright du pied de page, clé footer.copyright dans messages/layouts/en.json. Modifiez la même clé dans ar.json :

"footer": {
  "copyright": "© {year} Learnio. All rights reserved."
}

• Conservez tels quels les placeholders comme {year} et les balises comme <brand>. Le code les remplit.
• Modifiez la clé dans chaque fichier de langue. Une clé absente d'une langue affiche son chemin au lieu du texte.
• yarn dev prend la modification en compte. Un build de production inclut les messages : reconstruisez-le donc.

Il en va de même pour les notifications : l'API n'enregistre qu'un type, comme enrollment_created, et chaque application le formule à partir de ses propres fichiers. Dans le tableau de bord admin, elles se trouvent sous header.notifications.types dans messages/dashboard/<locale>.json ; sur le site étudiant, sous notifications.types dans le même fichier.

Cours, articles et autres contenus

Le texte que vous saisissez dans le tableau de bord admin, comme les titres de cours, les leçons, les catégories, les articles de blog et les profils des formateurs, est enregistré une seule fois avec les deux langues, sous forme de valeur JSON avec une clé en et une clé ar :

{ "en": "Project Management", "ar": "إدارة المشاريع" }

• Les formulaires du tableau de bord admin affichent un onglet anglais et un onglet arabe pour chacun de ces champs.
• L'API renvoie les deux valeurs, et chaque frontend affiche celle de la langue de la page. Si celle-ci est vide, il affiche l'autre : un cours n'est donc jamais sans nom.
• Les résultats de recherche sont déjà résolus par l'API, à partir de l'en-tête Accept-Language.
• Dans les données de démonstration créées par yarn seed, les catégories, les articles de blog, les profils des formateurs, les quiz et les titres des sections de cours ont un texte arabe. Les titres et descriptions des cours ainsi que les titres des leçons contiennent le texte anglais sous les deux clés : traduisez-les donc dans le tableau de bord admin.

Ce que l'API traduit

• Les messages de réponse, comme les textes de succès et d'erreur que le tableau de bord admin affiche dans ses alertes, proviennent de src/i18n/translations/<locale>/<namespace>.json via I18nService dans src/i18n/i18n.service.ts.
• Les e-mails sont rédigés dans mail.json. Les e-mails de vérification et de réinitialisation du mot de passe utilisent la langue de la requête. Les reçus et les confirmations d'inscription utilisent la langue dans laquelle la commande a été passée. Les e-mails en arabe s'affichent de droite à gauche.
• Les noms de pays se trouvent dans countries.json.

La langue est lue dans l'en-tête Accept-Language. Un code régional comme ar-SA compte comme ar. Une requête sans en-tête, ou dans une langue que l'API ne prend pas en charge, reçoit la langue par défaut. Une clé absente d'une langue se replie sur son texte dans la langue par défaut, puis sur la clé elle-même.

• La langue par défaut est l'entrée Default Language (default_locale) de l'onglet App Settings de Settings dans le tableau de bord admin, en dans les données initiales. Une modification s'applique à la requête suivante, sans redémarrage. L'API refuse une valeur qui n'est pas l'une de ses langues : une faute de frappe ne peut donc pas la faire répondre dans une langue sans traductions.
• L'API lit ses fichiers de traduction une seule fois, au démarrage : redémarrez-la après en avoir modifié un. yarn build les copie dans dist/.

Ajouter une langue au site étudiant

Les étapes prennent le français, fr, comme exemple. Utilisez un code de deux lettres en minuscules : plusieurs helpers reconnaissent la langue comme un premier segment de deux lettres dans l'adresse. Les chemins sont relatifs à frontend/.

1. 01

   Ajoutez le code à la liste des langues

   src/config/locales.ts est la seule liste que lit le site étudiant : les routes, la redirection, le chargeur de messages, le script qui définit lang et dir avant le premier affichage, le sélecteur de langue, les requêtes à l'API, la redirection de connexion, les métadonnées des pages, le sitemap, et chaque nombre et chaque date qu'il met en forme. Ajoutez le code à locales, puis donnez-lui une entrée dans les trois tables voisines. Le compilateur signale celles que vous oubliez.

   frontend/src/config/locales.tsCopier

   export const locales = ["en", "ar", "fr"] as const;
   
   export const OG_LOCALES: Record<Locale, string> = { en: "en_US", ar: "ar_AE", fr: "fr_FR" };
   export const LOCALE_FLAGS: Record<Locale, FlagIconCode> = { en: "US", ar: "AE", fr: "FR" };
   export const LOCALE_FORMAT_TAGS: Record<Locale, string> = { en: "en-US", ar: "ar-EG", fr: "fr-FR" };

   Entrée	Ce qu'elle définit
   OG_LOCALES	La langue de la carte de partage de la page (og:locale)
   LOCALE_FLAGS	Le drapeau qu'affiche le sélecteur de langue, sous forme de code pays
   LOCALE_FORMAT_TAGS	La façon d'écrire les nombres et les dates. Utilisez une étiquette avec région, comme fr-FR, pour que les chiffres et les noms de mois ne dépendent pas du navigateur.
   RTL_LOCALES	Ajoutez le code pour une langue écrite de droite à gauche.
   JOINING_SCRIPT_LOCALES	Ajoutez le code pour une écriture dont les lettres se lient, comme l'arabe. Le logotype de la page d'accueil est alors dessiné en contours, car Safari laisse ces lettres déliées dans le texte SVG.
2. 02

   Créez les fichiers de messages

   Copiez chaque fichier anglais à côté de lui-même sous le nouveau code, puis traduisez les valeurs. Conservez les clés.

   Terminaldans frontendCopier

   find messages -name en.json -exec sh -c 'cp "$1" "$(dirname "$1")/fr.json"' _ {} \;

   Dans PowerShell :

   Terminaldans frontendCopier

   Get-ChildItem messages -Recurse -Filter en.json | ForEach-Object { Copy-Item $_.FullName (Join-Path $_.DirectoryName 'fr.json') }
3. 03

   Vérifiez les polices

   Inter est chargée avec le sous-ensemble latin dans src/app/layout.tsx, qui couvre le français, l'espagnol ou l'allemand. Ajoutez latin-ext pour des langues comme le polonais, le tchèque ou le turc. Pour une autre écriture, chargez-y une police adaptée et ajoutez une règle pour son lang dans src/styles/base.css, comme pour l'arabe.
4. 04

   Ouvrez la nouvelle langue

   Redémarrez yarn dev et ouvrez localhost:3030/frLocal.

   Résultat attendu: La page affiche votre texte traduit, le sélecteur liste la nouvelle langue, et chaque page la cite dans ses alternatives hreflang et dans le sitemap.

Ajouter une langue au tableau de bord admin

Le tableau de bord admin conserve sa liste de langues dans trois fichiers. Les étapes utilisent fr ; tenez-vous-en à un code de deux lettres en minuscules. Les chemins sont relatifs à admin-dashboard/.

1. 01

   Ajoutez le code aux trois listes

   • locales dans src/config/i18n.ts, qui charge les messages.
   • locales dans src/proxy.ts, qui redirige les adresses sans langue.
   • locales dans src/app/[locale]/layout.tsx, qui détermine quelles adresses existent.
2. 02

   Créez les fichiers de messages

   Copiez chaque fichier anglais sous le nouveau code, puis traduisez les valeurs.

   Terminaldans admin-dashboardCopier

   find messages -name en.json -exec sh -c 'cp "$1" "$(dirname "$1")/fr.json"' _ {} \;
3. 03

   Mettez à jour les helpers

   • src/hooks/locale/useLocale.ts accepte en, fr, es et ar. Ajoutez votre code s'il n'en fait pas partie.
   • src/hooks/locale/useDirection.ts ne traite que ar comme une langue de droite à gauche. Étendez la vérification pour une autre langue de droite à gauche.
   • src/lib/api/client-utils/locale.ts et src/lib/api/client-utils/auth.ts ne reconnaissent que en et ar dans l'adresse. Ajoutez votre code.
4. 04

   Ajoutez-la au sélecteur de langue

   Dans src/components/LanguageSwitcher.tsx, importez le drapeau depuis country-flag-icons/react/3x2 et ajoutez une entrée à languages.

   admin-dashboard/src/components/LanguageSwitcher.tsxCopier

   import { US, SA, FR } from "country-flag-icons/react/3x2";
   
   const languages = [
     { code: "en", country: "US" as const, Flag: US },
     { code: "ar", country: "SA" as const, Flag: SA },
     { code: "fr", country: "FR" as const, Flag: FR },
   ];
5. 05

   Vérifiez les polices

   Les polices sont chargées dans src/app/layout.tsx, et src/styles/base.css passe à la police arabe pour html[lang="ar"]. Une langue dans une autre écriture a besoin de sa propre police et d'une règle correspondante.

Les noms de marque dans src/config/brand.config.ts n'ont que des valeurs en et ar, et la valeur anglaise s'affiche pour toute autre langue.

Ajouter une langue à l'API

Les chemins sont relatifs à back-end/.

1. 01

   Copiez le dossier de traduction

   Traduisez ensuite les 18 fichiers qu'il contient.

   Terminaldans back-endCopier

   cp -R src/i18n/translations/en src/i18n/translations/fr

   Dans PowerShell :

   Terminaldans back-endCopier

   Copy-Item -Recurse src/i18n/translations/en src/i18n/translations/fr
2. 02

   Ajoutez le code à la liste des langues prises en charge

   SUPPORTED_LOCALES dans src/i18n/locales.ts est la seule liste de l'API. Les traductions, la validation du paiement, la langue figée sur chaque commande, les pages de paiement, les e-mails et leurs liens vers les deux frontends la lisent tous. Tant que le code n'y figure pas, les requêtes dans la nouvelle langue reçoivent la langue par défaut.

   back-end/src/i18n/locales.tsCopier

   export const SUPPORTED_LOCALES = ['en', 'ar', 'fr'] as const;
3. 03

   Vérifiez les deux endroits qui testent l'arabe

   src/modules/mail/templates/layout.ts met en page un e-mail de droite à gauche pour ar uniquement ; étendez-le pour une autre langue écrite de droite à gauche. Les deux recherches, src/modules/search/search.service.ts et src/modules/public/student-search.service.ts, lisent un titre enregistré en arabe ou en anglais seulement, car le contenu a deux langues. Listez-les :

   Terminaldans back-endCopier

   grep -rn "=== 'ar'" src
4. 04

   Redémarrez l'API

   Elle lit les fichiers de traduction au démarrage. Pour la production, yarn build les copie dans dist/.