feature(www): Localize text through react-intl

[tesseralis]

Description

Make text in various components localize-able using react-intl. For this PR, I focused on the components and pages that are visible in all gatsby pages (like the navigation) and most crucial to the docs (like the table of contents, sidebar "expand/collapse"). I didn't do components that we might want to disable for non-English languages, such as the feedback form and the email form.

Rationale

See this comment for why we're going with this library in particular.

Issues

• react-intl is 48.2 kB. We need to figure out a way to only import the components we need or switch to a different library
• Once we start loading text for pages, we need to find a way to only load critical keys and not load the page text until needed.

TODOs

• Decide if we want to support nested keys
• Translate more components
• Write documentation for site maintainers and translators on how to translate strings
• Decide if we're okay with the raw react-intl API or if we want to make more convenient wrappers

Related Issues

Fixes: #20803

[tesseralis]

Trying to decide if we should support nested keys like gatsby-plugin-intl. The implementation shouldn't be too difficult. Regardless, it would be good to have some sort of namespacing to delineate different parts of the website (docs vs search vs feedback widget).

[LekoArts]

Did you run into issues with the RSS feed or what's the context here?

[tesseralis]

Yeah, it broke because it tried to compile and couldn't find for the translated text in the blog page. We'd need to figure out how to fix this.

[LekoArts]

react-intl is 48.2 kB. We need to figure out a way to only import the components we need or switch to a different library

Since I read up on LinguiJS yesterday and it has a smaller footprint. Would you be up for considering this instead of react-intl? It's certainly not a blocker, I'm just interested in seeing myself if we could use it instead.

Write documentation for site maintainers and translators on how to translate strings

Should this be a follow-up or part of this PR?

---

I looked through it and LGTM 👍 I like the solution for translations files and nested namespaces, that makes it easier to write!

[tesseralis]

Since I read up on LinguiJS yesterday and it has a smaller footprint. Would you be up for considering this instead of react-intl? It's certainly not a blocker, I'm just interested in seeing myself if we could use it instead.

I’ve looked at lingui and it looks cool, especially the CLI. I’d want to play around with it and see what the workflow would be like for us and translators.

Should this be a follow-up or part of this PR?

Probably a follow-up. I’m still not sure what would be the right workflow (edit in the monorepo or move to translation repos) so i want to solidify that before I write docs for it

[tesseralis]

Closed in favor of #21633