mdn
Implement localization support into Yari (and localize BCD tables)
This PR introduces localization of the Yari platform itself, so that translators can localize the platform's common elements as well as the content. It utilizes react-i18next to do as such, a top rated localization package for all of NodeJS. (This is a pretty big change as it introduces a brand new API for handling strings.) As a proof-of-concept, I have made the compatibility tables localizable.
Design
For the strings, the i18next format is used, which handles variable interpolation, formatting, pluralization, arrays, and more. While i18next uses the handlebars format (that is, {{ }}), TypeScript wasn't happy with this, so I switched the delimiters to two square brackets ([[ ]]).
The setup also takes advantage of the multi-file structure provided by i18next, which means that translations may be separated into multiple folders for each language, and multiple files for each group of strings (called "contexts"). In other words, strings specific to the BCD tables may be stored in bcd.json, while navigation bar strings may be stored in navigation.json. With the multi-file structure in mind, I've set it up so that localization may live in mdn-translated-content rather than here in Yari. All translations will live in one repository, with files for Yari's platform localization stored in files/<locale>/_yari/<namespace>.json.
Translation Steps
To translate the strings for the Yari platform, translators may perform the following:
- Copy a file from
mdn/yari/client/i18n/in this repository and paste it inmdn/translated-content/files/<locale>/_yari/ - Translate each string within the JSON file
- Any strings missing from the copied file will default to English
- Repeat for each file in the
i18nfolder
This pull request has merge conflicts that must be resolved before we can merge this.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
(I've got no clue why the Developing with Yari test isn't working...I'm not having any problems with it on my end.)
I now see that the same test script is failing in other PRs as well:
https://github.com/mdn/yari/runs/6502514714?check_suite_focus=true https://github.com/mdn/yari/runs/6464968135?check_suite_focus=true
So I'm not worried about that test run any longer.
This pull request has merge conflicts that must be resolved before we can merge this.
Hey @queengooborg! Thank you so much for this pull request. This is amazing work. We are discussing this internally and will reach out to you soon.
This pull request has merge conflicts that must be resolved before we can merge this.
This pull request has merge conflicts that must be resolved before we can merge this.
This pull request has merge conflicts that must be resolved before we can merge this.
This pull request has merge conflicts that must be resolved before we can merge this.
@queengooborg Thank you. We had some discussions around this topic, healthy ones. We'll review and work on this next week. But this might take a while to land as this is not the highest priority. Glancing over this PR it looks great, the big missing piece to this is SSR. That's currently hard to build and might take some time.
This pull request has merge conflicts that must be resolved before we can merge this.
@fiji-flo Thank you! I started some work on SSR but backed out of it due to build failures for now -- I'd be happy to try again should we want to go forward with this!
This pull request has merge conflicts that must be resolved before it can be merged.
