Change intl gatsby plugin #7022

pettinarip · 2022-07-12T13:59:34Z

Description

Replace gatsby-plugin-intl with gatsby-theme-i18n to fix memory issues.

Test:
https://ethereumorgwebsitedev01-gatsbythemei18n.gtsb.io/

Context:

gatsby-plugin-intl was populating the pageContext with all the translation strings. Not good since Gatsby put that data on each page-data.json file generated.
gatsby-theme-i18n avoids that by doing a require of the messages on the wrapPageElement hook. There are 2 packages:
- https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n
- https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n-react-intl

TODO:

fix localized links
fix banner's logic
check redirects

gatsby-cloud · 2022-07-12T14:37:38Z

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 27m

pettinarip · 2022-07-14T17:05:18Z

gatsby-browser.tsx

+    const queryParams = search || ""
+    const newUrl = withPrefix(`/${detected}${originalPath}${queryParams}`)
+    window.localStorage.setItem("eth-org-language", detected)
+    window.location.replace(newUrl)


As the comment says, this is only used in dev envs. This was extracted from what the previous plugin was doing https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/wrap-page.js#L74

The new plugin doesn't do this for us.

pettinarip · 2022-07-14T17:06:12Z

gatsby-config.ts

+        prefixDefault: true,
+        locales: supportedLanguages.length
+          ? supportedLanguages.join(" ")
+          : null,


Can't pass an empty array here []. We must pass null if we want to build all the langs.

pettinarip · 2022-07-14T17:08:10Z

gatsby-node.ts

            path: langSlug,
            component: path.resolve(`src/templates/${template}.tsx`),
            context: {
+              language: lang,


Keeping most of these context values for backward compatibility. I'll probably refactor this in next iterations.

pettinarip · 2022-07-14T17:09:15Z

gatsby-node.ts

-                language: lang,
-                defaultLanguage,
-                languages: supportedLanguages,
-                messages: getMessages("./src/intl/", lang),


THE only reason why we are changing the plugin. This is causing memory issues.

pettinarip · 2022-07-14T17:11:07Z

i18n/config.json

+    "name": "English",
+    "localName": "English",
+    "langDir": "ltr",
+    "dateFormat": "MM/DD/YYYY"


In next iterations, we need to start using these values.

pettinarip · 2022-07-14T17:11:46Z

package.json

@@ -62,6 +64,7 @@
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-instantsearch-dom": "^6.6.0",
+    "react-intl": "^3.12.1",


Current version is v6. We keep using v3 to avoid changing too many things.

pettinarip · 2022-07-14T17:18:13Z

src/components/Link.tsx

@@ -222,4 +224,17 @@ const Link: React.FC<IProps> = ({
  )
 }

+export function navigate(


New plugin doesn't provide this function. Implemented a similar approach as the previous one was doing https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/link.js#L42

…act-intl

wackerow

@pettinarip This is awesome! To the team, hopped on a call with Pablo to walk through this and test it out. Redirects seems to be working appropriately and all the languages are loading as expected.

Build this from scratch locally with 16GB RAM with all languages and it built in under 11 minutes, and node never used over 2-3 GB RAM at any given time. Just one test case, but this is orders of magnitude faster than before.

Given our master branch deploy build is currently failing as a result of immense RAM demands, going to bring this in and get a patch deploy out immediately following.

SOLID WORK!! This is going to help tremendously 🎉 💪

wackerow · 2022-07-14T20:10:27Z

Edit on above: master build is not currently failing fortunately, since the re-triggered build ended up passing. This buys some time from rushing a deploy to master, but still going to bring this into dev so we can start taking advantage of its efficiencies and test it out before it goes live.

samajammin · 2022-07-14T21:26:47Z

gatsby-browser.tsx

+
+  const [, pathLocale] = pathname.split("/")
+
+  // client side redirect on paths that don't have a locale in them. Most useful


@nhsz @wackerow should we take a similar approach on the blog?

samajammin · 2022-07-14T21:28:39Z

gatsby-browser.tsx

+    const queryParams = search || ""
+    const newUrl = withPrefix(`/${detected}${originalPath}${queryParams}`)
+    window.localStorage.setItem("eth-org-language", detected)
+    window.location.replace(newUrl)


Not sure if it matters but should we use the Gatsby navigate helper here instead of the window API? https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#how-to-use-the-navigate-helper-function

That's a good idea. I think we could do that, yes.

samajammin · 2022-07-14T21:34:30Z

gatsby-browser.tsx

+      })
+
+    if (!isLang(detected)) {
+      detected = defaultLanguage


Should we always fallback to defaultLanguage? Better option might be to inspect the user's browser preference (that's what gatsby-plugin-intl did).

Looks like this is what gatsby-plugin-intl uses:
https://github.com/wiziple/browser-lang/blob/master/src/index.js

We could (probably?) do something simpler, e.g. by just using the Navigator.language API:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language

See: https://phrase.com/blog/posts/detecting-browser-language-preference-with-javascript/

Looks like we already added browser-lang as a dependency in package.json anyway?

Yes, a few lines above this (line 48) we are using browser-lang. This was taken from gatsby-plugin-intl.

samajammin · 2022-07-14T21:38:32Z

i18n/config.json

+    "name": "Arabic",
+    "localName": "العربية",
+    "langDir": "rtl",
+    "dateFormat": "MM/DD/YYYY"


Shouldn't date formatting vary by language?

Not sure if we need to rely on these? We have the getLocaleTimestamp helper for displaying date formats.

Yes, I've added these fields because they were required by the gatsby-theme-i18n plugin. For now, we are not using langDir and dateFormat from here. Those things are still working as before.

I agree we should not use dateFormat from this file. We should keep using what we currently have.

However, I think we could consume langDir from this config file instead of what we are currently doing (function isLangRightToLeft).

Gotcha - I'm on board.

samajammin · 2022-07-14T21:41:53Z

i18n/config.json

+    "hrefLang": "en",
+    "name": "English",
+    "localName": "English",
+    "langDir": "ltr",


Doesn't appear that we actually use langDir for anything - should we?

I know we use the isLangRightToLeft helper for that currently.

Exactly. Related to prev comment. I haven't done that yet because I didn't want to add too many changes but I think that for langDir we should use it from here as the source of truth.

pettinarip added 2 commits July 12, 2022 10:52

use official gatsby i18n theme

be58015

Merge branch 'dev' into gatsby-theme-i18n

2dd09cb

github-actions bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies review needed 👀 labels Jul 12, 2022

create root pages only on dev

b5d06f6

pettinarip self-assigned this Jul 12, 2022

pettinarip added 12 commits July 12, 2022 19:29

fix

534f1b6

cleanup

b721bbc

Merge branch 'dev' into gatsby-theme-i18n

cb5db9c

throw error if relative path is not defined in templates

947a8f5

add navigate function to support localization

435df40

downgrade react-intl to match our current version

48308dc

Merge branch 'dev' into gatsby-theme-i18n

9741375

Merge branch 'dev' into gatsby-theme-i18n

f7a5c7d

cleanup

037d353

improve i18n langs config

9c12c9e

use i18n config file to build internal languages metadata

b7c2032

refactor code in favor of using isLang function

4f9aeb7

pettinarip commented Jul 14, 2022

View reviewed changes

remove resolutions

0104761

pettinarip commented Jul 14, 2022

View reviewed changes

revert changes on Translation component since we are not upgrading re…

b01902b

…act-intl

pettinarip changed the title ~~[WIP] Change intl gatsby plugin~~ Change intl gatsby plugin Jul 14, 2022

pettinarip marked this pull request as ready for review July 14, 2022 17:59

pettinarip requested review from samajammin, wackerow, corwintines and minimalsm as code owners July 14, 2022 17:59

wackerow approved these changes Jul 14, 2022

View reviewed changes

wackerow merged commit 58968e2 into dev Jul 14, 2022

wackerow deleted the gatsby-theme-i18n branch July 14, 2022 20:11

wackerow mentioned this pull request Jul 14, 2022

Deploy v4.8.0 #7070

Merged

samajammin reviewed Jul 14, 2022

View reviewed changes

This was referenced Jul 17, 2022

Pages 404 if no language path is specified #7097

Closed

404 redirect bug #6356

Closed

pettinarip mentioned this pull request Jul 25, 2022

Build improvements #6586

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change intl gatsby plugin #7022

Change intl gatsby plugin #7022

pettinarip commented Jul 12, 2022 •

edited

gatsby-cloud bot commented Jul 12, 2022 •

edited

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

pettinarip Jul 14, 2022

wackerow left a comment

wackerow commented Jul 14, 2022

samajammin Jul 14, 2022

samajammin Jul 14, 2022

pettinarip Jul 18, 2022

samajammin Jul 14, 2022

samajammin Jul 14, 2022

samajammin Jul 14, 2022

pettinarip Jul 18, 2022

samajammin Jul 14, 2022

samajammin Jul 14, 2022

pettinarip Jul 18, 2022

samajammin Jul 19, 2022

samajammin Jul 14, 2022

samajammin Jul 14, 2022

pettinarip Jul 18, 2022


		const [, pathLocale] = pathname.split("/")

		// client side redirect on paths that don't have a locale in them. Most useful

Change intl gatsby plugin #7022

Change intl gatsby plugin #7022

Conversation

pettinarip commented Jul 12, 2022 • edited

Description

gatsby-cloud bot commented Jul 12, 2022 • edited

Gatsby Cloud Build Report

Build Details

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wackerow left a comment

Choose a reason for hiding this comment

wackerow commented Jul 14, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pettinarip commented Jul 12, 2022 •

edited

gatsby-cloud bot commented Jul 12, 2022 •

edited