Add localisation (#196)

.env.production

@@ -2,4 +2,4 @@
 # To override locally, make a copy called `.env.production.local`
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
-NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_OONI_API=https://api.ooni.org

Readme.md

@@ -26,16 +26,3 @@ Create a build:
 ```
 yarn run build
 ```
-
-
-Upload a release:
-
-```
-yarn run release
-```
-
-Generate a OONI Run link:
-
-```
-yarn run genurl -- path/to/list.csv
-```

components/Footer.tsx

@@ -41,7 +41,7 @@ const Footer = () => {
               </div>
             </div>
           </div>
-          <div className="py-6 w-1/2 md:w-1/5">
+          <div className="py-6 w-1/2 md:w-1/5 px-1">
             <FooterHead>
               {intl.formatMessage({ id: 'Footer.Heading.About' })}
             </FooterHead>
@@ -66,7 +66,7 @@ const Footer = () => {
               label={intl.formatMessage({ id: 'Footer.Link.Contact' })}
             />
           </div>
-          <div className="py-6 w-1/2 md:w-1/5">
+          <div className="py-6 w-1/2 md:w-1/5 px-1">
             <FooterHead>
               {intl.formatMessage({ id: 'Footer.Heading.OONIProbe' })}
             </FooterHead>
@@ -83,11 +83,11 @@ const Footer = () => {
               label={intl.formatMessage({ id: 'Footer.Link.Code' })}
             />
             <FooterLink
-              href="https://api.ooni.io/"
+              href="https://api.ooni.org/"
               label={intl.formatMessage({ id: 'Footer.Link.API' })}
             />
           </div>
-          <div className="py-6 w-1/2 md:w-1/5">
+          <div className="py-6 w-1/2 md:w-1/5 px-1">
             <FooterHead>
               {intl.formatMessage({ id: 'Footer.Heading.Updates' })}
             </FooterHead>

components/LocaleSwitcher.tsx

@@ -3,12 +3,39 @@ import { getDirection } from 'pages/_app'
 import type { ReactNode } from 'react'
 import { useIntl } from 'react-intl'
 
+import '@formatjs/intl-displaynames/polyfill'
+
+import '@formatjs/intl-displaynames/locale-data/ar'
+import '@formatjs/intl-displaynames/locale-data/de'
+import '@formatjs/intl-displaynames/locale-data/en'
+import '@formatjs/intl-displaynames/locale-data/id'
+// import '@formatjs/intl-displaynames/locale-data/es'
+// import '@formatjs/intl-displaynames/locale-data/fa'
+// import '@formatjs/intl-displaynames/locale-data/fr'
+import '@formatjs/intl-displaynames/locale-data/km'
+// import '@formatjs/intl-displaynames/locale-data/my'
+// import '@formatjs/intl-displaynames/locale-data/pt'
+import '@formatjs/intl-displaynames/locale-data/ru'
+// import '@formatjs/intl-displaynames/locale-data/sw'
+// import '@formatjs/intl-displaynames/locale-data/th'
+import '@formatjs/intl-displaynames/locale-data/tr'
+// import '@formatjs/intl-displaynames/locale-data/vi'
+import '@formatjs/intl-displaynames/locale-data/zh-Hans'
+import '@formatjs/intl-displaynames/locale-data/zh-Hant'
+
+
+const getLocale = (locale: string) => {
+  if (locale === 'zh-cn') return 'zh-Hans'
+  // if (locale === 'pt-BR') return 'pt'
+  return locale
+}
+
 export const getLocalisedLanguageName = (
   regionCode: string,
   locale: string,
 ) => {
   try {
-    return new Intl.DisplayNames([locale], { type: 'language' }).of(
+    return new Intl.DisplayNames([getLocale(locale)], { type: 'language' }).of(
       String(regionCode),
     )
   } catch (e) {
@@ -51,32 +78,6 @@ const LanguageSelect = (props: LanguageSelectProps) => (
   </div>
 )
 
-// const LanguageSelect = styled.select`
-//   color: ${(props) => props.theme.colors.white};
-//   background: none;
-//   border: none;
-//   text-transform: capitalize;
-//   cursor: pointer;
-//   font-family: inherit;
-//   font-size: inherit;
-//   padding: 0;
-//   padding-bottom: 6px;
-//   padding-right: 10px;
-//   outline: none;
-//   appearance: none;
-//   -webkit-appearance: none;
-//   -moz-appearance: none;
-//   -ms-appearance: none;
-//   -o-appearance: none;
-//   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-//   background-size: .6em;
-//   background-position: 100% 0.2rem;
-//   background-repeat: no-repeat;
-//   html[dir="rtl"] &, body[dir="rtl"] &: {
-//     background-position: 0, 0.2rem;
-//   },
-// `
-
 const LocaleSwitcher = () => {
   const router = useRouter()
   const { pathname, asPath, query } = router

components/NavBar.tsx

@@ -1,4 +1,4 @@
-// import LocaleSwitcher from "components/LocaleSwitcher"
+import LocaleSwitcher from 'components/LocaleSwitcher'
 import useUser from 'hooks/useUser'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -97,7 +97,7 @@ export const NavBar = () => {
                 </StyledNavItem>
               </>
             )}
-            {/* <LocaleSwitcher /> */}
+            <LocaleSwitcher />
           </div>
         </div>
       </div>

components/form/AdminNettestFields.tsx

@@ -55,7 +55,7 @@ const AdminNettestFields = ({ name }: FieldsPropTypes) => {
             <InputsFields name={`${name}[${index}].inputs`} />
             <div className="mt-4">
               <button
-                className="appearance-none cursor-pointer text-blue-500 hover:text-blue-900"
+                className="appearance-none cursor-pointer text-blue-500 hover:text-blue-900 text-start"
                 type="button"
                 onClick={() => setShowV1Modal(true)}
               >

components/form/IntlFields.tsx

@@ -81,7 +81,7 @@ const IntlFields = ({ name }: FieldsPropTypes) => {
                 </div>
                 <button
                   type="button"
-                  className="btn btn-primary mb-3 ml-2"
+                  className="mb-3 ml-2"
                   onClick={() => remove(index)}
                 >
                   <FaRegTrashCan size={20} />

components/form/NettestFields.tsx

@@ -36,7 +36,7 @@ const NettestFields = ({ name }: FieldsPropTypes) => {
             <InputsFields name={`${name}[${index}].inputs`} />
             <div className="mt-4">
               <button
-                className="appearance-none cursor-pointer text-blue-500 hover:text-blue-900"
+                className="appearance-none cursor-pointer text-blue-500 hover:text-blue-900 text-start"
                 type="button"
                 onClick={() => setShowV1Modal(true)}
               >

components/login/LoginForm.tsx

@@ -22,7 +22,6 @@ export const LoginForm = ({ onLogin, redirectTo }: LoginFormProps) => {
 
   const onSubmit = useCallback(
     (data: { email_address: string }) => {
-      console.log('data', data)
       const { email_address } = data
       const registerApi = async (email_address: string) => {
         try {

components/v2/MetaTags.tsx

@@ -31,7 +31,7 @@ const MetaTags = ({
       {title && <meta name="og:title" content={title} />}
       <meta
         name="og:image"
-        content="https://run.ooni.io/static/images/Run-VerticalColorW400px.png"
+        content="https://run.ooni.org/static/images/Run-VerticalColorW400px.png"
       />
       {description && <meta name="og:description" content={description} />}
 
@@ -49,7 +49,7 @@ const MetaTags = ({
 
       <meta
         name="twitter:image"
-        content="https://run.ooni.io/static/images/Run-VerticalColorW400px.png"
+        content="https://run.ooni.org/static/images/Run-VerticalColorW400px.png"
       />
       <meta name="twitter:app:name:iphone" content={mobileApp.iPhoneName} />
       <meta name="twitter:app:id:iphone" content={mobileApp.iPhoneID} />

hooks/useUser.tsx

@@ -68,19 +68,23 @@ export const UserProvider = ({ children }: UserProviderProps) => {
       .finally(() => setLoading(false))
   }
 
-  const afterLogin = useCallback(() => {
-    setTimeout(() => {
-      router.push('/create')
-    }, 2000)
-  }, [router])
+  const afterLogin = useCallback(
+    (redirectTo: string) => {
+      const locale = new URL(redirectTo)?.pathname || ''
+      setTimeout(() => {
+        router.push(`${locale}/create`)
+      }, 2000)
+    },
+    [router],
+  )
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (token && router.pathname === '/login') {
       loginUser(token)
-        .then(() => {
+        .then((data) => {
           getUser()
-          afterLogin()
+          afterLogin(data?.redirect_to)
         })
         .catch((e) => {
           console.log(e)

lib/api.ts

@@ -105,14 +105,14 @@ export const getList = (params = {}, config = {}) => {
 
 export const registerUser = async (
   email_address: string,
-  redirectUrl = 'https://run.ooni.io',
+  redirectUrl = 'https://run.ooni.org',
 ) => {
   // current testing setup does not enable us to check process.env.NODE_ENV (it's set to production
   // in headless mode), therefore custom NEXT_PUBLIC_IS_TEST_ENV is used
   const redirectTo =
     process.env.NODE_ENV === 'development' ||
     process.env.NEXT_PUBLIC_IS_TEST_ENV
-      ? 'https://run.test.ooni.org/'
+      ? `https://run.test.ooni.org${new URL(redirectUrl)?.pathname || ''}`
       : redirectUrl
   return await postAPI(apiEndpoints.USER_LOGIN, {
     email_address,

package.json

@@ -20,7 +20,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.3.0",
-    "react-intl": "^6.6.8",
+    "react-intl": "^6.8.2",
     "react-outside-click-handler": "^1.3.0",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2",
@@ -59,7 +59,6 @@
     "test": "playwright test",
     "build:analyze": "ANALYZE=true next build",
     "extract": "node ./scripts/extract '{pages,components,utils}/*.{js,ts,tsx}'",
-    "genurl": "babel-node scripts/genurl.js",
     "script:build-translations": "node ./scripts/build-translations.js"
   },
   "msw": {

pages/404.tsx

@@ -1,17 +1,17 @@
-import Head from "next/head"
-import { useRouter } from "next/router"
-import { FormattedMessage, useIntl } from "react-intl"
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { FormattedMessage, useIntl } from 'react-intl'
 
-import OONIRunHero from "components/OONIRunHero"
-import OONI404 from "public/static/images/OONI_404.svg"
+import OONIRunHero from 'components/OONIRunHero'
+import OONI404 from 'public/static/images/OONI_404.svg'
 
 const Custom404 = () => {
   const router = useRouter()
   const intl = useIntl()
   return (
     <>
       <Head>
-        <title>{intl.formatMessage({ id: "Error.404.PageNotFound" })}</title>
+        <title>{intl.formatMessage({ id: 'Error.404.PageNotFound' })}</title>
       </Head>
       <OONIRunHero />
       <div className="container">
@@ -21,10 +21,7 @@ const Custom404 = () => {
               <FormattedMessage id="Error.404.Heading" />
             </h4>
             <div className="mb-3">
-              <FormattedMessage
-                id="Error.404.Message"
-                defaultMessage="We could not find the content you were looking for."
-              />
+              <FormattedMessage id="Error.404.Message" />
             </div>
           </div>
           <div className="p-32">

pages/login.tsx

@@ -16,7 +16,9 @@ const Login = () => {
   const [submitted, setSubmitted] = useState(false)
 
   const redirectTo =
-    typeof window !== 'undefined' ? window.location.origin : undefined
+    typeof window !== 'undefined'
+      ? `${window.location.origin}/${intl.locale}`
+      : undefined
 
   const { user, loading, error } = useUser()