Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement react i18next #9261

Merged
merged 30 commits into from
Mar 6, 2023
Merged

Implement react i18next #9261

merged 30 commits into from
Mar 6, 2023

Conversation

pettinarip
Copy link
Member

@pettinarip pettinarip commented Jan 21, 2023

This PR implements react-i18next and creates & loads the locales in a different way than #8866 to avoid having memory consumption problems.

Description

Preview deploy: https://ethereumorgwebsitei18nrework.gatsbyjs.io/en/

In short, instead of mergeTranslations in one big file, all the json files under src/intl are loaded as they are, keeping the same namespaces. Then, on each page, we query only the necessary namespace that that page needs.

To do this efficiently, we had to reorder some translations from one namespace to another. Basically to avoid loading an entire namespace just for 1 translation. For example, adding new strings on common.json is very expensive since that file is loaded on all the pages we have (at the moment 12k pages), so I tried my best to reduce that file to the minimum.

Other things done in this PR:

  • createLocales script was completely redone. Check docs/locale-process.md for more information
  • mergeTranslations script is not more needed and it was deleted
  • new utility unusedTranslations script added
  • new utility reorgIntlFiles script added
  • yarn.lock was regenerated with latest packages versions (this one mitigates a wall of warnings we had on dev env)
  • refactored page queries to fetch locales using the correct namespaces

Note: for ease to review purposes, I didn't run the reorgIntl script yet. I'll include that on a different PR. What that script is going to do is to apply the same reorgs I did on src/intl/en to all the other languages.


Note2: stress tests were executed here #9455

@github-actions github-actions bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies review needed 👀 tooling 🔧 Changes related to tooling of the project labels Jan 21, 2023
@pettinarip pettinarip force-pushed the i18n-rework branch 2 times, most recently from 6f6cbf2 to 40e1bf9 Compare February 4, 2023 18:17
@pettinarip pettinarip changed the title WIP i18n rework Implement react i18next Feb 4, 2023
@@ -243,7 +243,7 @@ export const query = graphql`
locales: allLocale(
filter: {
language: { in: $languagesToFetch }
ns: { in: ["src-templates-docs", "components", "common"] }
ns: { in: ["page-developers-docs", "common"] }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now the namespaces have the same name as the files under src/intl.

@@ -189,8 +189,6 @@ const StaticPage = ({
const { editContentUrl } = siteData.siteMetadata || {}
const absoluteEditPath = `${editContentUrl}${relativePath}`

const slug = mdx.fields?.slug || ""
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This slug is incorrrect. This slug is always the /en/ version. To fix this, now we are getting it from the pageContext.

@pettinarip pettinarip marked this pull request as ready for review February 4, 2023 19:31
Copy link
Member

@corwintines corwintines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! This really improves load times from some testing. Noticed a couple things. Happy to sync up and talk about this.

src/intl/en/page-developers-docs.json Show resolved Hide resolved
src/pages/upgrades/get-involved/index.tsx Show resolved Hide resolved
Copy link
Member

@corwintines corwintines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, approving since dev will be merged into this branch that will include #9537

@konopkja
Copy link
Contributor

konopkja commented Mar 1, 2023

@pettinarip @corwintines reviewed light / dark themes, mobile layouts and 2 different languages. Mostly looks goods, only few things down here:

  1. find wallet page select box shows code string
    Screenshot 2023-03-01 at 17 27 33

  2. stablecoins page doesnt show button as prod version
    Screenshot 2023-03-01 at 17 32 50
    vs prod version

Screenshot 2023-03-01 at 17 32 46

3.tutorials "clear" button shows as string instead
Screenshot 2023-03-01 at 17 36 03

@pettinarip
Copy link
Member Author

Thanks @konopkja for the review 💪🏼

  1. Good catch.
  2. This branch is pretty old. Soon I'll update it and we should see the same buttons as in prod 👍🏼
  3. Good catch.

tldr, I'll fix those missing translations & update the branch.

@pettinarip pettinarip merged commit 69a045d into i18n-extract-strings Mar 6, 2023
@pettinarip pettinarip deleted the i18n-rework branch March 6, 2023 19:49
@pettinarip pettinarip mentioned this pull request Mar 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants