i18n script and refactor to pull copy and gernerate translations from…

… lantern cms api

.gitignore

@@ -21,6 +21,7 @@ ui/.env.production
 ui/extension/dist
 ui/extension/packages
 ui/extension/.env
+ui/wp-plugin.zip
 
 # netstated globe web client
 netstate/d/webclients/globe/node_modules

README.md

@@ -172,6 +172,7 @@ Production:
    3. Set `REACT_APP_STORAGE_URL` to your intended iframe html for local storage of widget state and analytics. Most likely `https://embed.lantern.io/storage.html` or `/storage.html` if testing locally
    4. Set any `REACT_APP_*` variables as needed for your development environment. See [UI settings and configuration](#ui-settings-and-configuration) for more info.
    5. Configure the WASM client endpoints: `REACT_APP_DISCOVERY_SRV`, `REACT_APP_DISCOVERY_ENDPOINT`, `REACT_APP_EGRESS_ADDR` & `REACT_APP_EGRESS_ENDPOINT`
+   6. Configure the CMS and translations: `STRAPI_API_TOKEN` & `STRAPI_API_URL`
 
 3. Install the dependencies: `yarn`
 

ui/.env.development.example

@@ -41,3 +41,7 @@ REACT_APP_EGRESS_ENDPOINT=/ws
 # use http://localhost:8080/exec for local netstated
 # https://netstated-d7bbec1ed55b.herokuapp.com/exec for production netstated 
 REACT_APP_NETSTATED_URL=https://netstated-d7bbec1ed55b.herokuapp.com/exec
+
+# CMS and Translations
+STRAPI_API_TOKEN=<STRAPI_API_TOKEN>
+STRAPI_API_URL=https://cms.lantern.io/api

ui/.env.production.example

@@ -41,3 +41,7 @@ REACT_APP_EGRESS_ENDPOINT=/ws
 # use http://localhost:8080/exec for local netstated
 # https://netstated-d7bbec1ed55b.herokuapp.com/exec for production netstated 
 REACT_APP_NETSTATED_URL=https://netstated-d7bbec1ed55b.herokuapp.com/exec
+
+# CMS and Translations
+STRAPI_API_TOKEN=<STRAPI_API_TOKEN>
+STRAPI_API_URL=https://cms.lantern.io/api

ui/package.json

@@ -15,15 +15,20 @@
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
     "@webextension-toolbox/webextension-toolbox": "^5.2.2",
+    "axios": "^1.7.7",
     "dotenv": "^16.0.3",
     "gh-pages": "^4.0.0",
+    "i18next": "^23.15.2",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.2",
     "lottie-react": "^2.4.0",
     "mini-css-extract-plugin": "^2.6.1",
     "patch-package": "^6.5.0",
     "postinstall-postinstall": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-globe.gl": "^2.22.4",
+    "react-i18next": "^15.0.2",
     "react-scripts": "5.0.1",
     "react-tiny-popover": "^7.2.0",
     "rewire": "^6.0.0",

ui/public/locales/ar/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/en-US/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/en/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/es-419/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/fa/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/ru/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Присоединяйтесь к нашей сети цифровых волонтеров и помогайте разблокировать интернет по всему миру.",
+  "createdAt": "2024-10-10T11:51:26.104Z",
+  "updatedAt": "2024-10-10T18:14:28.151Z",
+  "locale": "ru",
+  "title": "Используйте свой браузер для борьбы с глобальной интернет-цензурой",
+  "status": "Статус:",
+  "keep": "Оставьте этот сайт открытым, чтобы продолжать делиться вашим подключением.",
+  "on": "ВКЛ",
+  "off": "ВЫКЛ",
+  "now": "Люди, которым вы помогаете прямо сейчас:",
+  "total": "Всего людей, которым помогли на сегодняшний день:",
+  "donate": "Пожертвовать Lantern",
+  "learn": "Узнать больше",
+  "peers": "{{count}} человек из {{country}}",
+  "installChrome": "Установить в Chrome",
+  "installFirefox": "Установить в Firefox",
+  "installCta": "Помогите ещё большему количеству людей, установив расширение",
+  "waiting": "Ожидание подключений",
+  "installCtaBtnLg": "Получите Browsers Unbounded для {{browser}}",
+  "installCtaBtnSm": "Добавить в {{browser}}",
+  "peer": "{{count}} человек из {{country}}",
+  "helping": "Помощь новому человеку в {{country}}"
+}

ui/public/locales/zh-Hans/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/zh-Hant-TW/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/public/locales/zh/translation.json

@@ -0,0 +1,24 @@
+{
+  "intro": "Join our network of digital volunteers and help unblock the internet around the world.",
+  "createdAt": "2024-10-10T11:03:23.027Z",
+  "updatedAt": "2024-10-10T18:13:49.982Z",
+  "locale": "en",
+  "title": "Use your browser to fight global internet censorship",
+  "status": "Status:",
+  "keep": "Keep this site open to continue sharing your connection.",
+  "on": "ON",
+  "off": "OFF",
+  "now": "People you're helping right now:",
+  "total": "Total people helped to date:",
+  "donate": "Donate to Lantern",
+  "learn": "Learn More",
+  "peers": "{{count}} people from {{country}}",
+  "installChrome": "Install on Chrome",
+  "installFirefox": "Install on Firefox",
+  "installCta": "Help even more people by installing the extension",
+  "waiting": "Waiting for connections",
+  "installCtaBtnLg": "Get Browsers Unbounded for {{browser}}",
+  "installCtaBtnSm": "Add to {{browser}}",
+  "peer": "{{count}} person from {{country}}",
+  "helping": "Helping a new person in {{country}}"
+}

ui/src/App.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'
+import React, {Suspense, useEffect, useLayoutEffect, useRef, useState} from 'react'
 import {settingsEmitter} from './index'
 import Layout from './layout'
 import Toast from './components/molecules/toast'
@@ -15,6 +15,7 @@ import useMessaging from './hooks/useMessaging'
 import {Targets, Layouts} from './constants'
 import {AppContextProvider} from './context'
 import useAutoUpdate, {AUTO_START_STORAGE_FLAG} from './hooks/useAutoUpdate'
+import './i18n'
 
 interface Props {
   appId: number
@@ -90,16 +91,18 @@ const App = ({appId, embed}: Props) => {
       { settings.target !== Targets.EXTENSION_POPUP && <Storage settings={settings} /> }
       { settings.editor && <Editor embed={embed} /> }
       <Layout>
-        <Toast />
-        { settings.layout === Layouts.BANNER && (
-          <Banner />
-        )}
-        { settings.layout === Layouts.PANEL && (
-          <Panel />
-        )}
-        { settings.layout === Layouts.FLOATING && (
-          <Floating />
-        )}
+        <Suspense fallback={'Loading..'}>
+          <Toast />
+          { settings.layout === Layouts.BANNER && (
+            <Banner />
+          )}
+          { settings.layout === Layouts.PANEL && (
+            <Panel />
+          )}
+          { settings.layout === Layouts.FLOATING && (
+            <Floating />
+          )}
+        </Suspense>
       </Layout>
     </AppContextProvider>
   );

ui/src/components/atoms/extensionButton/index.tsx

@@ -5,6 +5,7 @@ import {ChromeColor, FirefoxColor} from '../icons'
 import {useContext} from 'react'
 import {AppContext} from '../../../context'
 import {isFirefox} from '../../../utils/userAgent'
+import {useTranslation} from 'react-i18next'
 
 const StyledLink = styled.a`
 	display: flex;
@@ -27,6 +28,7 @@ interface Props {
 }
 
 const ExtensionButton = ({isSmall}: Props) => {
+	const {t} = useTranslation()
 	const {width} = useContext(AppContext)
 
 	const largePadding = width < 900 ? '12px 16px' : '12px 40px'
@@ -50,7 +52,7 @@ const ExtensionButton = ({isSmall}: Props) => {
 					lineHeight: '24px',
 				}}
 			>
-				{isSmall ? `Add to ${isFirefox() ? 'Firefox' : 'Chrome'}` : `Get Browsers Unbounded for ${isFirefox() ? 'Firefox' : 'Chrome'}`}
+				{isSmall ? `${t('installCtaBtnSm', {browser: isFirefox() ? 'Firefox' : 'Chrome'})}` : `${t('installCtaBtnLg', {browser: isFirefox() ? 'Firefox' : 'Chrome'})}`}
 			</Text>
 		</StyledLink>
 	)

ui/src/components/molecules/about/index.tsx

@@ -2,19 +2,21 @@ import {Text} from './styles'
 import {useContext, CSSProperties} from 'react'
 import {AppContext} from '../../../context'
 import {COLORS, Themes} from '../../../constants'
+import {useTranslation} from 'react-i18next'
 
 interface Props {
 	style?: CSSProperties
 }
 
 const About = ({style = {}}: Props) => {
+	const { t } = useTranslation();
 	const {theme, keepText, infoLink} = useContext(AppContext).settings
 	const color = theme === Themes.DARK ? COLORS.grey2 : COLORS.blue5
 	return(
 		<Text
 			style={{color, margin: 0, ...style}}
 		>
-			{'Join our network of digital volunteers and help unblock the internet around the world.'}
+			{t('intro')}
 			{/*<a style={{color: brand}} href={'https://lantern.io'} target={'_blank'} rel={'noreferrer'}>Lantern</a>.*/}
 			{ !!keepText && ' Keep this site open to continue sharing your connection.' }
 			{ !!infoLink.length && <span dangerouslySetInnerHTML={{__html: infoLink}} />}