Add i18n and l10n with lingui and babel

.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

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

@@ -18,4 +18,10 @@ export default withMDX({
   images: {
     domains: ["raw.githubusercontent.com", "numpy.org", "dask.org", "chainer.org", ],
   },
+  i18n: {
+    // These are all the locales you want to support in
+    // your application
+    locales: ["en", "es", "pt"],
+    defaultLocale: "en",
+  },
 })

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "build-cards": "node build-cards.js",
-    "dev": "next dev",
-    "build": "next build",
+    "extract": "lingui extract",
+    "compile": "lingui compile",
+    "dev": "yarn compile && next dev",
+    "build": "yarn extract && yarn compile && next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -16,42 +18,48 @@
   "author": "Xarray Developers & Contributors",
   "license": "Apache 2.0",
   "dependencies": {
-    "@chakra-ui/icons": "^2.2.1",
-    "@chakra-ui/next-js": "^2.3.1",
-    "@chakra-ui/react": "^2.9.1",
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/next-js": "^2.4.2",
+    "@chakra-ui/react": "^2.10.9",
     "@chakra-ui/system": "^2.6.2",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@fontsource-variable/inter": "^5.2.5",
-    "@giscus/react": "^3.0.0",
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.14",
-    "apexcharts": "3.54.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@giscus/react": "^3.1.0",
+    "@lingui/babel-plugin-lingui-macro": "^5.6.0",
+    "@lingui/core": "^5.6.0",
+    "@lingui/react": "^5.6.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^14.2.33",
     "d3": "^7.9.0",
-    "date-fns": "^3.0.0",
+    "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
     "feed": "^5.1.0",
-    "framer-motion": "^11.9.0",
-    "glob": "^11.0.3",
+    "framer-motion": "^11.18.2",
+    "glob": "^11.1.0",
     "gray-matter": "^4.0.3",
-    "isomorphic-dompurify": "^2.16.0",
-    "next": "^14.2.30",
+    "isomorphic-dompurify": "^2.32.0",
+    "next": "^14.2.33",
     "next-mdx-remote": "^5.0.0",
     "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
+    "react-apexcharts": "^1.8.0",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-icons": "^5.5.0",
+    "react-syntax-highlighter": "^15.6.6",
     "rehype-slug": "^6.0.0",
-    "swr": "^2.2.5"
+    "swr": "^2.3.6",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
-    "eslint": "^9.25.1",
+    "@lingui/cli": "^5.6.0",
+    "@lingui/loader": "^5.6.0",
+    "@types/react": "^18.3.26",
+    "apexcharts": "^5.3.6",
+    "eslint": "^9.39.1",
     "eslint-config-next": "15.3.3",
-    "playwright": "^1.47.2",
-    "typescript": ">=5.9.2",
-    "webpack": "^5.101.0"
+    "playwright": "^1.56.1",
+    "typescript": "^5.9.3",
+    "webpack": "^5.102.1"
   }
 }

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>

src/components/dashboard/timeseries-agg-stats-card.js

@@ -4,10 +4,12 @@ import { Spinner, Text } from '@chakra-ui/react'
 import * as d3 from 'd3'
 import { isWithinInterval, lastDayOfMonth, startOfMonth } from 'date-fns'
 import useSWR from 'swr'
+import { useLingui } from '@lingui/react/macro'
 
 export const TimeseriesAggStatsCard = ({ query, title, icon }) => {
+  const { t } = useLingui()
   let { data, error } = useSWR(query, fetcher)
-  if (error) return <Text>failed to load</Text>
+  if (error) return <Text>{t`failed to load`}</Text>
   if (!data)
     return (
       <Spinner
@@ -43,16 +45,17 @@ export const TimeseriesAggStatsCard = ({ query, title, icon }) => {
 
   const change = {
     type: diffPercentage < 0 ? 'increase' : 'decrease',
-    value: `${d3.format('.2f')(Math.abs(diffPercentage))}% since last month`,
+    value:
+      `${d3.format('.2f')(Math.abs(diffPercentage))}% ` + t`since last month`,
   }
   return (
     <StatisticsCard
       title={title}
       icon={icon}
       stat={
         result <= 2
-          ? `${d3.format('.1f')(result * 24)} hours`
-          : `${d3.format('.1f')(result)} days`
+          ? `${d3.format('.1f')(result * 24)} ` + t`hours`
+          : `${d3.format('.1f')(result)} ` + t`days`
       }
       diff={change}
     />