Add i18n and l10n with lingui and babel #772

goanpeca · 2025-05-01T06:00:57Z

Hello, folks!

This PR adds a language switcher and some logic to deal with multiple languages on the xarray website. Using lingui and babel.

Currently, as part of the Scientific Python grant, we have the site 100% translated into Portuguese (Brazilian) and Spanish. Other languages may follow soon - having the infrastructure set up will hopefully help us recruit new translators 😄

We have been working on the automation process for the sync between crowdin and the websites and can help answer any questions you might have.

This PR is a proof of concept and we are happy to adapt to any specific format or needs you might have here. Feedback is appreciated.

Thanks!

Desktop

Mobile

Moving forward

Ensure all translatable strings are wrapped up in the t macro. Yarn build will extract and compile the translations strings

and the rest of the work will happen automatically on https://github.com/Scientific-Python-Translations/xarray-translations and crowding with the volunteer contributors.

For components and pages

import { useLingui } from '@lingui/react/macro'

const Team = () => {
  const { t } = useLingui()
  return ({t`Current core maintainers 🤝`})

For data: convert the object to a function so the `t` macro can work.

import { useLingui } from '@lingui/react/macro'

export const getLibraries = () => {
  const { t } = useLingui()
  let Libraries = [
    {
      name: 'NumPy',
      description: t`NumPy is the fundamental package for array computing with Python.`,
      url: 'https://numpy.org',
      repo: 'https://github.com/numpy/numpy',
      logo: '/libraries/numpy_logo.svg',
    },
...
}

vercel · 2025-05-01T06:01:02Z

@goanpeca is attempting to deploy a commit to the xarray Team on Vercel.

A member of the Team first needs to authorize it.

melissawm · 2025-05-01T13:34:16Z

For context, here's some initial discussion around this topic: pydata/xarray#9094

goanpeca · 2025-05-02T03:17:42Z

The PR has now selected all localizable strings. I added a simple dropdown but I need some help in getting it to actually change the language.

goanpeca · 2025-05-05T10:44:52Z

Hi @andersy005 :)

Wanted to know what we could do to help move this forward

Thanks!

andersy005 · 2025-05-06T19:59:06Z

thank you for your patience, @goanpeca! very cool to see this addition to the site! let's remove the RSS feed files (atom.xml, rss.json, rss.xml) from git. these aren't meant to be pushed.

@jhamman, i no longer have permissions to approve the vercel deployment. do you mind authorizing it so we can check how it looks in staging? after that, we can merge to prod.

goanpeca · 2025-05-06T20:47:58Z

Hi @andersy005 thanks!

Will make the changes and ping you :)

goanpeca · 2025-05-07T12:06:04Z

thank you for your patience, @goanpeca! very cool to see this addition to the site! let's remove the RSS feed files (atom.xml, rss.json, rss.xml) from git. these aren't meant to be pushed.

I made the updates @andersy005 ! Thanks 🚀

cc @jhamman 🙈

next.config.mjs

andersy005

this looks solid, @goanpeca! thank you for putting it together. looking forward to other translations

waiting for @jhamman to authorize the preview, when he gets a moment

vercel · 2025-05-08T15:00:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xarray-dev	❌ Failed (Inspect)			May 8, 2025 3:01pm

goanpeca · 2025-05-08T15:30:50Z

Thanks @jhamman , there seems to be some issue but I cannot access the logs, any pointers to debug this?

Thanks

jhamman · 2025-05-08T18:29:17Z

Here are the logs:

[08:00:55.456] Running build in Washington, D.C., USA (East) – iad1
[08:00:55.482] Cloning github.com/xarray-contrib/xarray.dev (Branch: add-i18n, Commit: a89f645)
[08:00:57.628] Cloning completed: 2.146s
[08:01:00.884] Restored build cache from previous deployment (5tdvhbKSYoayVgx2MA7LLnnudq8u)
[08:01:01.928] Running "vercel build"
[08:01:02.351] Vercel CLI 41.7.3
[08:01:05.911] yarn config v1.22.19
[08:01:05.950] success Set "enableGlobalCache" to "false".
[08:01:05.951] Done in 0.04s.
[08:01:05.960] Installing dependencies...
[08:01:06.152] yarn install v1.22.19
[08:01:06.231] [1/4] Resolving packages...
[08:01:21.212] [2/4] Fetching packages...
[08:01:51.677] error @lingui/[email protected]: The engine "node" is incompatible with this module. Expected version ">=20.0.0". Got "18.20.6"
[08:01:51.689] error Found incompatible module.
[08:01:51.689] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[08:01:51.753] Error: Command "yarn install" exited with 1
[08:01:52.336] 
[08:01:55.468] Exiting build container

andersy005 · 2025-05-08T18:49:52Z

[08:01:51.677] error @lingui/[email protected]: The engine "node" is incompatible with this module. Expected version ">=20.0.0". Got "18.20.6"

@jhamman, can we bump the node version in our vercel settings?

goanpeca · 2025-05-21T13:09:25Z

Hi @jhamman and @andersy005, wanted to ask if the vercel configuration could be updated 😄 ?

Thanks! 🚀

jhamman · 2025-05-29T17:02:54Z

I've bumped our node version to 20.x. The (re)deployment ran and reported this error:

 ⨯ ESLint: Invalid Options: - Unknown options: useEslintrc, extensions - 'extensions' has been removed.

@andersy005 - do you have bandwidth this week to help unblock here?

ianhi · 2025-10-29T14:41:04Z

Hi,

We've moved to netlfiy and now use node version v20.19.5 which runs without error. So I suspect with a rebase and conflict resolution this will work. @goanpeca are you still interested in working on this? I think this is a valuable thing and would like to help see it through.

melissawm · 2025-10-30T02:13:28Z

I can help push this forward - thanks for the ping!

I am traveling at the moment but can take a look probably around Nov 10. Does that work?

ianhi · 2025-10-30T14:33:41Z

I am traveling at the moment but can take a look probably around Nov 10. Does that work?

sounds great! I've left a note on my calendar to check back then. Excited to to work to get this in.

melissawm · 2025-11-18T13:57:40Z

Thanks for the ping! I'm currently working on the rebase, will ping you once I have it solved. Cheers!

…ions

melissawm · 2025-11-19T13:53:37Z

Ok! I think I got it but I can't push to this PR - @goanpeca would you mind giving me access to your fork so I can finish this up? Thanks a bunch! 😄

goanpeca · 2025-11-19T14:47:48Z

would you mind giving me access to your fork so I can finish this up? Thanks a bunch! 😄

Done @melissawm !

netlify · 2025-11-19T14:58:04Z

✅ Deploy Preview for xarraydev ready!

Name	Link
🔨 Latest commit	`6e2ccea`
🔍 Latest deploy log	https://app.netlify.com/projects/xarraydev/deploys/6922095eadbced0008eb4621
😎 Deploy Preview	https://deploy-preview-772--xarraydev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull Request Overview

This PR adds internationalization (i18n) and localization (l10n) infrastructure to the xarray website using Lingui and Babel. The site is currently translated into Portuguese (Brazilian) and Spanish, with the framework in place for additional languages.

Key changes:

Integration of Lingui for message extraction and translation management
Addition of language switcher component for users to select their preferred language
Conversion of static strings to translatable strings using the t macro throughout the codebase

Reviewed Changes

Copilot reviewed 35 out of 37 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
yarn.lock	Added Lingui packages (@lingui/cli, @lingui/core, @lingui/react, @lingui/loader, @lingui/babel-plugin-lingui-macro) and updated various dependencies
src/i18n.ts	Created i18n initialization logic and catalog loading functionality
src/pages/_app.js	Wrapped app with I18nProvider and added translation loading via useLinguiInit
src/locales/pt/messages.po	Added Portuguese (Brazilian) translations
src/locales/es/messages.po	Added Spanish translations
src/pages/index.js	Added getStaticProps for translation loading and wrapped strings with t macro
src/pages/team.js	Wrapped translatable strings with t macro
src/pages/dashboard.js	Wrapped translatable strings with t macro
src/data/projects.js	Converted from static export to function returning translated data
src/data/menu-items.js	Converted from static export to function returning translated data
src/data/footer-items.js	Converted from static export to function returning translated data
src/data/features.js	Converted from static export to function returning translated data
src/components/sponsors.js	Wrapped translatable strings with t macro

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/donate.js

src/components/language-switcher.js

src/components/layout.js

Copilot · 2025-11-19T15:00:27Z

src/components/layout.js

+   */
+  const { t } = useLingui()
+  const router = useRouter()
+  const { pathname, asPath, query } = router


Unused variable asPath.

Suggested change

const { pathname, asPath, query } = router

const { pathname, query } = router

Copilot · 2025-11-19T15:00:27Z

src/components/layout.js

+   */
+  const { t } = useLingui()
+  const router = useRouter()
+  const { pathname, asPath, query } = router


Unused variable query.

Suggested change

const { pathname, asPath, query } = router

Copilot · 2025-11-19T15:00:27Z

src/pages/dashboard.js

@@ -1,12 +1,14 @@
 import { IssueTracker, ProjectMetrics } from '@/components/dashboard'
 import { Layout } from '@/components/layout'
+import { Trans, useLingui } from '@lingui/react/macro'


Unused import Trans.

src/components/language-switcher.js

melissawm · 2025-11-19T15:06:55Z

Thank you @goanpeca ❤️ ❤️

I will take a look at the copilot review and try to address it shortly.

ianhi

This seems to have broken the display of blog articles. The listing of them is still fine (although only avaiable in english) but the actual articles are giving me a 500 error:

https://deploy-preview-772--xarraydev.netlify.app/es/blog/xarray-napari-plan

that happens with or without the language code in the url

ianhi · 2025-11-19T16:02:51Z

Also, what would be the steps after this PR for someone who wanted to make a change to the wording on the site. Would they only need to change the english version in the code, or do they also need to do things on the translation website and update the .po files?

We should include the documentation of how to do so in the README

melissawm · 2025-11-19T16:03:21Z

Hmmm let me check - I did test the blog locally and it worked, but it may be something else.

ianhi · 2025-11-19T16:15:54Z

One more thing. On this PR, but not on main, npm install fails for me with the following error (yarn install works)

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/apexcharts
npm error   apexcharts@"3.54.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer apexcharts@">=4.0.0" from [email protected]
npm error node_modules/react-apexcharts
npm error   react-apexcharts@"^1.8.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/ian/.npm/_logs/2025-11-19T16_15_56_681Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/ian/.npm/_logs/2025-11-19T16_15_56_681Z-debug-0.log

Co-authored-by: Copilot <[email protected]>

for more information, see https://pre-commit.ci

melissawm · 2025-11-22T19:12:46Z

Ok - I tried solving the npm issues and I can confirm it builds without error for me with both npm and yarn. The blog also works fine for me locally, although I did see it fail on the netlify deployment. Not sure what's going on there... This PR doesn't touch the blog at all so I will have to think about how to debug this.

I also realized it looks like I requested a copilot review but I in fact didn't (not explicitly, anyways) so I tried addressing the issues (which were mostly fair) but not sure if there's anything else I can do there.

I will work on some documentation but right now we have it all set up so that translations will not come through this repo at all. All the translation work happens on scientific-python.crowdin.com (see https://github.com/Scientific-Python-Translations/xarray-translations), and gets synced through one PR from the scientificpythontranslations bot when new translations are created. We have some documentation here but I'm happy to add a note explaining it all to your docs as well.

Cheers!

goanpeca changed the title ~~Add i18n and 10n with lingui and babel~~ WIP: Add i18n and 10n with lingui and babel May 1, 2025

goanpeca force-pushed the add-i18n branch 2 times, most recently from aadbd9f to 405cf9f Compare May 1, 2025 13:08

dcherian requested a review from andersy005 May 1, 2025 13:47

goanpeca force-pushed the add-i18n branch from 33c8570 to 881f36d Compare May 2, 2025 01:52

goanpeca force-pushed the add-i18n branch from 2350768 to 72d7571 Compare May 2, 2025 04:24

goanpeca changed the title ~~WIP: Add i18n and 10n with lingui and babel~~ Add i18n and 10n with lingui and babel May 2, 2025

goanpeca marked this pull request as ready for review May 2, 2025 04:25

goanpeca force-pushed the add-i18n branch from 710d118 to d40df96 Compare May 3, 2025 18:39

goanpeca mentioned this pull request May 6, 2025

Translations of xarray core project website pydata/xarray#9094

Open

goanpeca changed the title ~~Add i18n and 10n with lingui and babel~~ Add i18n and l10n with lingui and babel May 7, 2025

andersy005 reviewed May 8, 2025

View reviewed changes

next.config.mjs Show resolved Hide resolved

andersy005 approved these changes May 8, 2025

View reviewed changes

vercel bot had a problem deploying to Preview May 8, 2025 15:01 Failure

goanpeca and others added 11 commits November 19, 2025 10:44

Adapt strings for localization

71c788d

Update language switcher

81c9b75

Add local storage and fix language switcher

b3aa1f1

Add more strings, fix language swithcer routing and add more translat…

6545974

…ions

Add additional strings

e92251b

remove uneeded router

c0bcbc9

Add unique key to menuitems

733e41e

Remove files from version control

f65fd69

Remoe other file and update gititnore and package.json

23499c8

Remove comment

c436ad2

Fix translations in blog

987c099

Copilot AI review requested due to automatic review settings November 19, 2025 14:57

melissawm force-pushed the add-i18n branch from a89f645 to 987c099 Compare November 19, 2025 14:57

Copilot started reviewing on behalf of melissawm November 19, 2025 14:58 View session

Copilot finished reviewing on behalf of melissawm November 19, 2025 14:58

Copilot AI reviewed Nov 19, 2025

View reviewed changes

ianhi requested changes Nov 19, 2025

View reviewed changes

melissawm and others added 4 commits November 22, 2025 15:37

Try to resolve dependency issues in npm

84c1c9b

Apply suggestions from Copilot code review

e38551a

Co-authored-by: Copilot <[email protected]>

[pre-commit.ci] auto fixes from pre-commit.com hooks

07c0ee6

for more information, see https://pre-commit.ci

Remove unused Trans

6e2ccea

	const { pathname, asPath, query } = router
	const { pathname, query } = router

Add i18n and l10n with lingui and babel #772

Are you sure you want to change the base?

Add i18n and l10n with lingui and babel #772

Conversation

goanpeca commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Desktop

Mobile

Moving forward

For components and pages

For data: convert the object to a function so the t macro can work.

Uh oh!

vercel bot commented May 1, 2025

Uh oh!

melissawm commented May 1, 2025

Uh oh!

goanpeca commented May 2, 2025

Uh oh!

goanpeca commented May 5, 2025

Uh oh!

andersy005 commented May 6, 2025

Uh oh!

goanpeca commented May 6, 2025

Uh oh!

goanpeca commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

andersy005 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel bot commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

goanpeca commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jhamman commented May 8, 2025

Uh oh!

andersy005 commented May 8, 2025

Uh oh!

goanpeca commented May 21, 2025

Uh oh!

jhamman commented May 29, 2025

Uh oh!

ianhi commented Oct 29, 2025

Uh oh!

melissawm commented Oct 30, 2025

Uh oh!

ianhi commented Oct 30, 2025

Uh oh!

melissawm commented Nov 18, 2025

Uh oh!

melissawm commented Nov 19, 2025

Uh oh!

goanpeca commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for xarraydev ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

goanpeca commented May 1, 2025 •

edited

Loading

For data: convert the object to a function so the `t` macro can work.

goanpeca commented May 7, 2025 •

edited

Loading

andersy005 left a comment •

edited

Loading

vercel bot commented May 8, 2025 •

edited

Loading

goanpeca commented May 8, 2025 •

edited

Loading

goanpeca commented Nov 19, 2025 •

edited

Loading

netlify bot commented Nov 19, 2025 •

edited

Loading

melissawm commented Nov 22, 2025 •

edited

Loading