Feat/i18n
Hey,
I've been working on the internationalization feature implementation because the last PR is 6 years old and I think the feature would benefits to a lot of users, it includes:
- Language selection under the user settings dropdown
- Default locale configuration based on user's navigator and then stored in local storage if the user wants to change it
- Wowhead tooltips and links changing based on locale
- Rewriting of some variables and naming in the data that were litteral english to translation key
I only added french translation because it is my main language but it should be easy to add new ones.
To add new locales:
- Create a new translation file in the
src/localesfolder (template.jsonis the empty file that can be used as base) - Register the file in
src/util/i18n.js
I tried to reduce the size of the translation files as much as I could but it still ended up pretty big 😩
Please let me know if you have any question or feedback on the feature or the translation 😃
Thanks, that's impressive work. I'm wondering if this is really the correct way of doing translation though. The way I'm familiar with is to have .po files storing the translation, which avoids having to store text through multiple indirections like you're doing here. Have you investigated translation libraries based on .po files?
Thanks, that's impressive work. I'm wondering if this is really the correct way of doing translation though. The way I'm familiar with is to have .po files storing the translation, which avoids having to store text through multiple indirections like you're doing here. Have you investigated translation libraries based on .po files?
I've only ever done translation via json files on javascript frontend projects (on react mainly) before as this is what most of the big i18n libs work with. I'm not familiar with gettext at all but I will look into it. What would be the way you see it ?
- Generate a json file from the .po with CLI tools (manually or via CI/CD) (e.g with something like https://www.npmjs.com/package/i18next-conv) ?
- Generate it at runtime with something like https://www.npmjs.com/package/po2json ?
- Or do you have a example of a svelte i18n lib that handles po files natively ?
I don't know either what's the "correct" way of doing it, I might need to look into that more. However the convenient thing about gettext-based methods is that you can write all your code normally in English without caring about the translation at all, and the translation is just an overlay on your English text, entirely in separate .po files. This feels better than having codenames for all the strings, from a programming point of view.
I see your point, gettext seems to make code and transaltion more readable in general. I tried keeping plain english in code at first but I encountered issues with words translating to something else depending and context and not switching to translation key would have produced a lot of duplication. I've seen that gettext seems to handle a context along the translation so that would take care of that problem.
From the little research I've done it seems that the .po file has to be converted to a json file to be readable by the browser, this can be done either at build time (with webpack plugin, but we use vite) or beforehand with CLI tools (Which could be automated to be run on commit or during deployment ?). (Or at runtime but that seems to be a bad idea because of performances)