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

Author: goanpeca

package.json

@@ -7,7 +7,7 @@
     "extract": "lingui extract",
     "compile": "lingui compile",
     "dev": "next dev",
-    "build": "yarn extract && next build",
+    "build": "yarn extract && yarn compile && next build",
     "start": "next start",
     "lint": "next lint"
   },

public/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://xarray.dev/blog</id>
     <title>Xarray Blog Feed</title>
-    <updated>2025-05-03T18:37:55.874Z</updated>
+    <updated>2025-05-04T15:06:18.664Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <link rel="alternate" href="https://xarray.dev/blog"/>
     <link rel="self" href="https://xarray.dev/atom.xml"/>

public/rss.xml

@@ -4,7 +4,7 @@
         <title>Xarray Blog Feed</title>
         <link>https://xarray.dev/blog</link>
         <description>The latest news, insights, and practices about Xarray from the Xarray team</description>
-        <lastBuildDate>Sat, 03 May 2025 18:37:55 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 04 May 2025 15:06:18 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

src/components/dashboard/issue-tracker.js

@@ -17,14 +17,14 @@ export const IssueTracker = () => {
         <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

@@ -41,13 +41,13 @@ export const ProjectMetrics = () => {
         </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'
             }
@@ -56,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'
@@ -65,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/timeseries-agg-stats-card.js

@@ -7,6 +7,7 @@ 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>{t`failed to load`}</Text>
   if (!data)
@@ -52,8 +53,8 @@ export const TimeseriesAggStatsCard = ({ query, title, icon }) => {
       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}
     />

src/components/language-switcher.js

@@ -1,19 +1,39 @@
 'use client'
-import { Select } from '@chakra-ui/react'
 import { useLingui } from '@lingui/react/macro'
 import { i18n } from '@lingui/core'
 import { useRouter, usePathname } from 'next/navigation'
-import { useState, useEffect } from 'react'
+import { useEffect } from 'react'
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Link,
+  Button,
+} from '@chakra-ui/react'
+
+function getLocales() {
+  const { t } = useLingui()
+  return [
+    { locale: 'en', label: t`English` },
+    { locale: 'es', label: t`Spanish` },
+    { locale: 'pt', label: t`Portuguese` },
+  ]
+}
+
+function getLocaleLabel(locale) {
+  const locales = getLocales()
+  const localeObject = locales.find((object) => object.locale === locale)
+  return localeObject ? localeObject.label : locale
+}
 
 export const LanguageSwitcher = () => {
   const { t } = useLingui()
   const router = useRouter()
   const pathname = usePathname()
-  const [selectedValue, setSelectedValue] = useState('')
 
-  async function changeLocale(event) {
-    const localeString = event.target.value
-    setSelectedValue(localeString)
+  async function changeLocale() {
+    const localeString = i18n.locale
     localStorage.setItem('locale', localeString)
     const catalog = await import(`../locales/${localeString}/messages.js`)
     i18n.load(localeString, catalog.messages)
@@ -28,16 +48,19 @@ export const LanguageSwitcher = () => {
     }
   }, [])
   return (
-    <Select
-      name='selectedLocale'
-      variant='flushed'
-      size='xs'
-      value={selectedValue}
-      onChange={changeLocale}
-    >
-      <option value='en'>{t`English`}</option>
-      <option value='es'>{t`Spanish`}</option>
-      <option value='pt'>{t`Portuguese`}</option>
-    </Select>
+    <Menu>
+      <MenuButton as={Button} size='xs' variant='outline'>
+        {getLocaleLabel(i18n.locale)}
+      </MenuButton>
+      <MenuList>
+        {getLocales().map((object) => (
+          <Link href={'/' + object.locale + pathname} onClick={changeLocale}>
+            <MenuItem as={Button} size='xs' command={object.locale}>
+              {object.label}
+            </MenuItem>
+          </Link>
+        ))}
+      </MenuList>
+    </Menu>
   )
 }