Add i18n and l10n with lingui and babel (#772)

* Add i18n and 10n with lingui and babel

* Adapt strings for localization

* Update language switcher

* Add local storage and fix language switcher

* Add more strings, fix language swithcer routing and add more translations

* Add additional strings

* remove uneeded router

* Add unique key to menuitems

* Remove files from version control

* Remoe other file and update gititnore and package.json

* Remove comment

* Fix translations in blog

* Try to resolve dependency issues in npm

* Apply suggestions from Copilot code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

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

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

* Remove unused Trans

* Add information about translations to README.md

* Trying to fix blog display

* Add link

* Update yarn.lock

* Add compiled messages for babel

* Apply code review suggestion

* Update dependencies

* Revert changes to yarn.lock

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

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

* Resolve eslint log error

* Set default locale for blog posts

* First try

* Always serve english versions of blog posts

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

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

* Update packages

* Add compile script for lingui

* Remove language switcher from blog

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

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

* Adjust header elements fit

---------

Co-authored-by: Melissa Weber Mendonça <melissawm@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 4 people

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": ["@lingui/babel-plugin-lingui-macro"]
+}

.gitignore

@@ -47,3 +47,12 @@ yarn-error.log*
 
 .yarn
 .vscode/
+
+# Lingui
+src/locales/**/*.mo
+src/locales/**/*.js
+
+# RSS
+atom.xml
+rss.json
+rss.xml

README.md

@@ -51,6 +51,14 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
   />
 </a>
 
+## Translations
+
+Translations are managed through Crowdin at https://scientific-python.crowdin.com. The xarray project is part of the [Scientific Python](https://scientific-python.org/) organization on Crowdin, which also includes projects such as NumPy, SciPy, and others.
+
+When creating new content or editing existing content, only the english version of the content should be modified directly in this repository. Once this new content is merged into the main branch of the xarray.dev website, the Crowdin integration will automatically pick up the changes and notify translators that new translations are needed. Once the translation is completed, a pull request will be automatically created in this repository to add the new translated content.
+
+For more details on how the integration works, see https://scientific-python-translations.github.io/docs/. For more details on how to translate the website, see https://scientific-python-translations.github.io/translate/.
+
 ## Authoring blog post tips
 
 1. To create a new blog post a good place to start is copying a subfolder under `src/posts/`, so, for example https://xarray.dev/blog/flox is written here https://github.com/xarray-contrib/xarray.dev/blob/e04905f5ea039eb2eb848c0b4945beee323900e4/src/posts/flox/index.md

lingui.config.js

@@ -0,0 +1,17 @@
+const nextConfig = require('./next.config')
+
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+  locales: nextConfig.i18n.locales,
+  pseudoLocale: 'pseudo',
+  sourceLocale: nextConfig.i18n.defaultLocale,
+  fallbackLocales: {
+    default: 'en',
+  },
+  catalogs: [
+    {
+      path: 'src/locales/{locale}/messages',
+      include: ['src/'],
+    },
+  ],
+}

next.config.mjs

@@ -1,5 +1,6 @@
 import nextMDX from "@next/mdx"
 import rehypeSlug from "rehype-slug"
+import { i18nConfig } from "./src/config/i18n.mjs"
 
 const withMDX = nextMDX({
   extension: /\.mdx?$/,
@@ -18,4 +19,6 @@ export default withMDX({
   images: {
     domains: ["raw.githubusercontent.com", "numpy.org", "dask.org", "chainer.org", ],
   },
+  // Available locales for the application
+  i18n: i18nConfig,
 })

package.json

@@ -7,7 +7,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "compile": "lingui compile"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,9 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource-variable/inter": "^5.2.5",
     "@giscus/react": "^3.0.0",
+    "@lingui/babel-plugin-lingui-macro": "^5.9.0",
+    "@lingui/loader": "^5.9.0",
+    "@lingui/react": "^5.9.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.14",

src/components/array-libraries.js

@@ -3,9 +3,10 @@ import React from 'react'
 import { IoIosGlobe, IoLogoGithub } from 'react-icons/io'
 
 import { Image } from '@/components/mdx'
-import { Libraries as data } from '@/data/array-libraries'
+import { getLibraries } from '@/data/array-libraries'
 
 import { SocialLink } from '@/components/social-link'
+import { useLingui } from '@lingui/react/macro'
 
 const Library = ({ name, description, repo, url, logo }) => {
   return (
@@ -41,12 +42,13 @@ const Library = ({ name, description, repo, url, logo }) => {
 }
 
 export const ArrayLibraries = () => {
+  const { t } = useLingui()
+  let data = getLibraries()
   const libraries = React.useMemo(() => data, [])
   return (
     <Box my={8}>
       <Text fontSize={'lg'}>
-        Xarray supports multiple array backends, allowing users to choose array
-        types that work best for their application.
+        {t`Xarray supports multiple array backends, allowing users to choose array types that work best for their application.`}
       </Text>
 
       <SimpleGrid

src/components/dashboard/issue-tracker.js

@@ -4,25 +4,27 @@ import { GiDuration } from 'react-icons/gi'
 import { TimelinePlotContainer } from '@/components/dashboard/timeline-plot-container'
 import { TimeseriesAggStatsCard } from '@/components/dashboard/timeseries-agg-stats-card'
 import { Heading } from '@/components/mdx'
+import { useLingui } from '@lingui/react/macro'
 
 export const IssueTracker = () => {
+  const { t } = useLingui()
   return (
     <Box as='section' id='issue-tracker'>
       <Container maxW='container.lg'>
         <Heading as='h2' size='xl' textAlign={'center'}>
-          Xarray Issue Tracker
+          {t`Xarray Issue Tracker`}
         </Heading>
         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
           {' '}
           <TimeseriesAggStatsCard
-            title={'Median time a pull request is open'}
+            title={t`Median time a pull request is open`}
             query={
               'https://xarray-datasette.fly.dev/github.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27pull%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
             }
             icon={<GiDuration size={'3em'} />}
           />
           <TimeseriesAggStatsCard
-            title={'Median time an issue is open'}
+            title={t`Median time an issue is open`}
             icon={<GiDuration size={'3em'} />}
             query={
               'https://xarray-datasette.fly.dev/github.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27issue%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'

src/components/dashboard/project-metrics.js

@@ -5,15 +5,16 @@ import { fetcher } from '@/lib/data-fetching'
 import { Box, Container, SimpleGrid, Spinner } from '@chakra-ui/react'
 import { BsPeople, BsPerson } from 'react-icons/bs'
 import { GoBook, GoPackage, GoStar, GoTag } from 'react-icons/go'
+import { useLingui } from '@lingui/react/macro'
 import useSWR from 'swr'
 
 export const ProjectMetrics = () => {
   const { data, error } = useSWR(
     'https://raw.githubusercontent.com/andersy005/xarray-datasette/a73704d803350a2ec059bec1b4cce601cd9efdd9/data/docs-monthly-views.json',
     fetcher,
   )
-
-  if (error) return <div>failed to load data</div>
+  const { t } = useLingui()
+  if (error) return <div>{t`failed to load data`}</div>
   if (!data)
     return (
       <Spinner
@@ -36,17 +37,17 @@ export const ProjectMetrics = () => {
       <Container maxW='container.lg'>
         {' '}
         <Heading as='h2' size='xl' textAlign={'center'}>
-          Xarray Project Metrics
+          {t`Xarray Project Metrics`}
         </Heading>
         <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
           <StatisticsCard
-            title={'Core Maintainers'}
+            title={t`Core Maintainers`}
             stat={'15'}
             icon={<BsPerson size={'3em'} />}
             link={'https://docs.xarray.dev/en/stable/team.html'}
           />
           <DatasetteStatsCard
-            title={'Contributors'}
+            title={t`Contributors`}
             query={
               'https://xarray-datasette.fly.dev/github/_analyze_tables_/contributors,user_id.json?_shape=array'
             }
@@ -55,7 +56,7 @@ export const ProjectMetrics = () => {
           />
 
           <DatasetteStatsCard
-            title={'Stargazers'}
+            title={t`Stargazers`}
             icon={<GoStar size={'3em'} />}
             query={
               'https://xarray-datasette.fly.dev/github/_analyze_tables_/stars,user.json?_shape=array'
@@ -64,20 +65,20 @@ export const ProjectMetrics = () => {
           />
 
           <StatisticsCard
-            title={'Dependent Packages/Repos'}
+            title={t`Dependent Packages/Repos`}
             stat={21275}
             icon={<GoPackage size={'3em'} />}
             link={'https://github.com/pydata/xarray/network/dependents'}
           />
 
           <StatisticsCard
-            title={`${month}/${year} Docs Visitors`}
+            title={t`Docs Visitors` + ` - ${month}/${year}`}
             stat={monthlyViews.users}
             icon={<GoBook size={'3em'} />}
           />
 
           <DatasetteStatsCard
-            title={'Releases'}
+            title={t`Releases`}
             query={
               'https://xarray-datasette.fly.dev/github/_analyze_tables_/releases,id.json?_shape=array'
             }

src/components/dashboard/timeline-plot-container.js

@@ -10,6 +10,7 @@ import {
   Tabs,
   Text,
 } from '@chakra-ui/react'
+import { useLingui } from '@lingui/react/macro'
 import * as d3 from 'd3'
 import useSWR from 'swr'
 
@@ -18,8 +19,8 @@ export const TimelinePlotContainer = () => {
     'https://pydata-datasette.fly.dev/open_pulls_and_issues.json?_shape=array&&sql=select%0D%0A++time%2C%0D%0A++open_issues%2C%0D%0A++open_pull_requests%0D%0Afrom%0D%0A++open_pulls_and_issues%0D%0Awhere%0D%0A++project+%3D+%27pydata%2Fxarray%27%0D%0Aorder+by%0D%0A++time',
     fetcher,
   )
-
-  if (error) return <div>failed to load data</div>
+  const { t } = useLingui()
+  if (error) return <div>{t`failed to load data`}</div>
   if (!data)
     return (
       <Spinner
@@ -37,16 +38,15 @@ export const TimelinePlotContainer = () => {
   return (
     <Box my={8}>
       <Text fontSize={'md'} align={'center'}>
-        This is a timeline of how many open issues and pull requests Xarray has
-        on Github over time from {new Date(start).toLocaleDateString()} to{' '}
+        {t`This is a timeline of how many open issues and pull requests Xarray has on Github over time from ${new Date(start).toLocaleDateString()} to `}
         {new Date(end).toLocaleDateString()}.
       </Text>
       <br />
       <br />
       <Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
         <TabList>
           <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
-            Pull Requests
+            {t`Pull Requests`}
           </Tab>
           <Tab _selected={{ color: 'white', bg: 'teal.500' }}>Issues</Tab>
         </TabList>