Add support for internalization #7

lebaudantoine · 2024-07-03T16:21:00Z

Purpose

Fix various issues related to i18n.

Proposition

Add an i18n dependency (i18next?)
Fix i18n-crowdin CI steps
Fix frontend-i18n-* makefile commands
Validate Crowdin credentials works
Validate backend translation works

lebaudantoine · 2024-07-11T20:04:53Z

Huge challenge to support quickly the French, English and German translations.

manuhabitela · 2024-07-19T13:44:16Z

So I think this is mergeable as is.

The idea is:

use i18next in the frontend app with a global namespace and one namespace for each "feature" dir
have a script that checks for all t calls in the app and extracts the missing keys in the frontend/locales/xx/*.json translation files
in the CI, run this script, and send the updated "source" location files to Crowdin, which are the french translations. Came to the conclusion Crowdin needed a source language and we couldn't really edit translation strings of this source language in the Crowdin UI. Might be wrong but it'll do as is for now I guess :) So we have to remember french locale strings can only be changed through the code, not Crowdin.
note that the crowdin "push translations" CI job is currently set to run on every PR, that might create some conflicts. I say let's handle that when that poses any problem
When this is merged I'll be able to better test the new GH workflow I added: it listens to a webhook configured on Crowdin, to create pull requests when new things get translated in Crowdin.

@manuhabitela

Updated CI to use "npm" instead of yarn for the frontend project based on @manuhabitela's recommendations. Also updated the dependencies-related CI steps that were previously missed.

Fixed a typo and ensured all instances of "crowdin" are capitalized for consistent naming.

lebaudantoine · 2024-07-19T15:00:17Z

Should we open an issue to keep in mind?

note that the crowdin "push translations" CI job is currently set to run on every PR, that might create some conflicts. I say let's handle that when that poses any problem

With a low priority tag

src/frontend/package-lock.json

lebaudantoine · 2024-07-19T15:20:10Z

src/frontend/package.json

@@ -7,17 +7,24 @@
    "dev": "panda codegen && vite",
    "build": "panda codegen && tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "i18n:extract": "i18next -c i18next-parser.config.json"


I am a bit lost and don't know which make commands run ... should we write a bit of documentation in /docs it would be beneficial for all projects (Impress, Regie, etc..).

I would be more than happy to take this task

you can use the i18n:extract command (or make frontend-i18n-extract) if you want to generate missing translation keys in the json files (it checks all t calls in the react app). Handy while developing to make sure you didn't forget any new string to translate. But not actually necessary to use, you can also add your keys by hand while developing normally.

In the CI this is called to send translation keys to Crowdin.

lebaudantoine · 2024-07-19T15:25:37Z

src/frontend/src/locales/de/global.json

+  "backToHome": "",
+  "error": {
+    "heading": ""
+  },
+  "forbidden": {
+    "heading": ""
+  },
+  "app": "Meet",
+  "login": "Anmelden",
+  "logout": "",
+  "languageSelector": {
+    "popoverLabel": "",
+    "buttonLabel": ""
+  },
+  "loading": "",
+  "notFound": {
+    "heading": ""
+  },
+  "homepage": {
+    "heading": "",
+    "intro": "",
+    "createMeeting": "",
+    "login": "",
+    "or": "",
+    "copyMeetingUrl": ""
+  }


I am not sure what the best practices are for organizing translations. Any resource or tips to share?

I guess there are multiple ways to see it:

either have keys that are the actual text to translate. like Error: page not found,

either have keys that represent what we say. Like pageNotFound.

either have keys that represent in what context the string is used. Like notFound.heading

either have keys that are strictly tied to their use in the source code. Like layouts.NotFoundScreen.heading

First option goes a bit against how i18next works as it's more meant to be used with actual keys. So just changing a typo in an existing "key" makes us having to update the key in all languages.

I feel second option could quickly become a bit hard to manage, if lots of translation strings at the root level, maybe.

Fourth option makes translations extremely tied to our component structure. If we happen to use a different component for the not found page, we also have to change the key translation everywhere.

That's why I went with the notFound.heading style. It's a bit messier compared to fourth option I guess, but the fact our translations are not 1:1 match with components means the translations are more future proof.

And for now, all the "global" translation strings that are not really tied to a specific UI component are placed at the root of the global namespace.

We can figure this out as we go really!

src/frontend/src/locales/fr/global.json

lebaudantoine · 2024-07-19T16:51:46Z

Reading your PR I opened this issue #49

- dynamically load locale files for smaller footprint - have a namespace for each feature. At first I'd figured I'd put each namespace in its correct feature folder but it's kinda cumbersome to manage if we want to link that to i18n management services like crowdin…

the base path is actually not a secret so we'd rather have it outside secrets and see it easily

- upload local translation files on push - make crowdin create a pull request when new translations are made through the crowdin website (webhook configured on crowdin-end)

makes more sense i guess, maybe

lebaudantoine changed the title ~~Various fixes~~ fix various issues Jul 3, 2024

lebaudantoine added the noChangelog label Jul 3, 2024

lebaudantoine changed the title ~~fix various issues~~ fix i18n Jul 3, 2024

lebaudantoine assigned manuhabitela and lebaudantoine Jul 3, 2024

lebaudantoine changed the title ~~fix i18n~~ add support for internalization Jul 11, 2024

lebaudantoine changed the title ~~add support for internalization~~ Add support for internalization Jul 11, 2024

manuhabitela force-pushed the fix-crowdin-ci branch 8 times, most recently from ddf3a29 to c43b0f7 Compare July 19, 2024 12:55

lebaudantoine added 2 commits July 19, 2024 16:10

💚(CI) fix crowdin steps

7573d99

Updated CI to use "npm" instead of yarn for the frontend project based on @manuhabitela's recommendations. Also updated the dependencies-related CI steps that were previously missed.

✏️(makefile) fix "crowin" typo

75e4d31

Fixed a typo and ensured all instances of "crowdin" are capitalized for consistent naming.

manuhabitela force-pushed the fix-crowdin-ci branch from c43b0f7 to 3a53523 Compare July 19, 2024 14:10

lebaudantoine commented Jul 19, 2024

View reviewed changes

src/frontend/package-lock.json Show resolved Hide resolved

lebaudantoine commented Jul 19, 2024

View reviewed changes

manuhabitela force-pushed the fix-crowdin-ci branch from 3a53523 to 94c0410 Compare July 20, 2024 17:34

manuhabitela added 4 commits July 20, 2024 19:51

💚(crowdin) update to latest secrets to fix CROWDIN_BASE_PATH issue

e137809

the base path is actually not a secret so we'd rather have it outside secrets and see it easily

🌐(crowdin) make crowdin work with frontend translations

59cc554

- upload local translation files on push - make crowdin create a pull request when new translations are made through the crowdin website (webhook configured on crowdin-end)

♻️(frontend) put homepage in its own feature

2598076

makes more sense i guess, maybe

manuhabitela force-pushed the fix-crowdin-ci branch from 94c0410 to 2598076 Compare July 20, 2024 17:51

manuhabitela merged commit 789bce5 into main Jul 20, 2024
6 of 8 checks passed

manuhabitela deleted the fix-crowdin-ci branch July 20, 2024 18:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for internalization #7

Add support for internalization #7

lebaudantoine commented Jul 3, 2024 •

edited by manuhabitela

Loading

lebaudantoine commented Jul 11, 2024

manuhabitela commented Jul 19, 2024 •

edited

Loading

lebaudantoine commented Jul 19, 2024 •

edited

Loading

lebaudantoine Jul 19, 2024

manuhabitela Jul 20, 2024

lebaudantoine Jul 19, 2024

manuhabitela Jul 20, 2024 •

edited

Loading

lebaudantoine commented Jul 19, 2024

Add support for internalization #7

Add support for internalization #7

Conversation

lebaudantoine commented Jul 3, 2024 • edited by manuhabitela Loading

Purpose

Proposition

lebaudantoine commented Jul 11, 2024

manuhabitela commented Jul 19, 2024 • edited Loading

lebaudantoine commented Jul 19, 2024 • edited Loading

lebaudantoine Jul 19, 2024

Choose a reason for hiding this comment

manuhabitela Jul 20, 2024

Choose a reason for hiding this comment

lebaudantoine Jul 19, 2024

Choose a reason for hiding this comment

manuhabitela Jul 20, 2024 • edited Loading

Choose a reason for hiding this comment

lebaudantoine commented Jul 19, 2024

lebaudantoine commented Jul 3, 2024 •

edited by manuhabitela

Loading

manuhabitela commented Jul 19, 2024 •

edited

Loading

lebaudantoine commented Jul 19, 2024 •

edited

Loading

manuhabitela Jul 20, 2024 •

edited

Loading