feat: i18n (tapexyz#783)

* feat: lingui * style: Format code with prettier * chore: actions * chore: translate text * chore: translate text * chore: translate text * style: Format code with prettier * chore: cleanup * style: Format code with prettier * style: Format code with prettier * chore: update ci * chore: cleanup * style: Format code with prettier * chore: cleanup * chore: update gitignore --------- Co-authored-by: deepsource-autofix[bot] <62050782+deepsource-autofix[bot]@users.noreply.github.com>
touchasky · Apr 27, 2023 · 543f900 · 543f900
1 parent 7af1c9d
commit 543f900
Show file tree

Hide file tree

Showing 16 changed files with 871 additions and 26 deletions.
diff --git a/.github/workflows/crowdin.yml b/.github/workflows/crowdin.yml
@@ -0,0 +1,32 @@
+name: Crowdin Action
+
+on:
+ push:
+ branches: [ main ]
+
+jobs:
+ synchronize-with-crowdin:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+
+ - name: crowdin action
+ uses: crowdin/github-action@v1
+ with:
+ source: '/**/locales/en/*.po'
+ translation: '/**/locales/%two_letters_code%/%original_file_name%'
+ upload_sources: true
+ upload_translations: true
+ download_translations: true
+ localization_branch_name: i18n_crowdin_translations
+ create_pull_request: true
+ pull_request_title: 'chore(i18n): sync translations'
+ pull_request_body: 'New Crowdin translations by Crowdin GH Action'
+ pull_request_reviewers: 'sasicodes'
+ pull_request_base_branch_name: 'main'
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+ CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,4 @@ playwright/.cache/
 
 # cloudflare workers
 .dev.vars
+
diff --git a/README.md b/README.md
@@ -24,6 +24,9 @@
   <a href="https://status.lenstube.xyz">
   <img src="https://betteruptime.com/status-badges/v1/monitor/dfaw.svg" alt="Better Uptime">
  </a>
+ <a title="Crowdin" target="_blank" href="https://crowdin.com/project/lenstube">
+  <img src="https://badges.crowdin.net/lenstube/localized.svg">
+ </a>
  <span>
   <img src="https://img.shields.io/github/stars/lenstube-xyz/lenstube" alt="Stargazers">
  </span>

diff --git a/apps/web/.gitignore b/apps/web/.gitignore
@@ -0,0 +1,3 @@
+# lingui
+src/locales/**/*.js
+src/locales/_build/
diff --git a/apps/web/lingui.config.js b/apps/web/lingui.config.js
@@ -0,0 +1,11 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+ locales: ['en', 'es'],
+ catalogs: [
+ {
+ path: 'src/locales/{locale}/messages',
+ include: ['src']
+ }
+ ],
+ format: 'po'
+}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -5,7 +5,8 @@ const moduleExports = {
  reactStrictMode: process.env.NODE_ENV === 'production',
  experimental: {
  scrollRestoration: true,
- newNextLinkBehavior: true
+ newNextLinkBehavior: true,
+ swcPlugins: [['@lingui/swc-plugin', {}]]
  },
  async rewrites() {
  return [

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -8,7 +8,8 @@
  "build": "next build",
  "export": "next export",
  "start": "yarn build && next start --port 4783",
- "lint": "eslint . --ext .js,.ts,.tsx"
+ "lint": "eslint . --ext .js,.ts,.tsx",
+ "extract": "lingui compile; lingui extract"
  },
  "dependencies": {
  "@apollo/client": "^3.7.12",
@@ -18,6 +19,7 @@
  "@emoji-mart/react": "^1.1.1",
  "@headlessui/react": "^1.7.14",
  "@hookform/resolvers": "^3.1.0",
+ "@lingui/react": "^4.0.0",
  "@livepeer/react": "^2.4.3",
  "@rainbow-me/rainbowkit": "^0.12.9",
  "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -30,6 +32,7 @@
  "filereader-stream": "^2.0.0",
  "graphql": "^16.6.0",
  "interweave": "^13.1.0",
+ "make-plural": "^7.2.0",
  "mixpanel-browser": "^2.46.0",
  "next": "13.3.1",
  "next-themes": "^0.2.1",
@@ -46,6 +49,9 @@
  "zustand": "^4.3.7"
  },
  "devDependencies": {
+ "@lingui/cli": "^4.0.0",
+ "@lingui/macro": "^4.0.0",
+ "@lingui/swc-plugin": "^4.0.0",
  "@tailwindcss/typography": "^0.5.9",
  "@types/mixpanel-browser": "^2.38.1",
  "@types/node": "18.16.0",

diff --git a/apps/web/src/components/Common/Providers.tsx b/apps/web/src/components/Common/Providers.tsx
@@ -1,5 +1,7 @@
 import { ApolloProvider } from '@apollo/client'
 import apolloClient from '@lib/apollo'
+import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
 import { LivepeerConfig } from '@livepeer/react'
 import {
  connectorsForWallets,
@@ -19,8 +21,9 @@ import {
 } from '@rainbow-me/rainbowkit/wallets'
 import { ThemeProvider, useTheme } from 'next-themes'
 import type { ReactNode } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { IS_MAINNET, LENSTUBE_APP_NAME, POLYGON_RPC_URL } from 'utils'
+import { initLocale } from 'utils/functions/i18n'
 import { getLivepeerClient, videoPlayerTheme } from 'utils/functions/livepeer'
 import { configureChains, createClient, WagmiConfig } from 'wagmi'
 import { polygon, polygonMumbai } from 'wagmi/chains'
@@ -85,18 +88,26 @@ const RainbowKitProviderWrapper = ({ children }: { children: ReactNode }) => {
 }
 
 const Providers = ({ children }: { children: ReactNode }) => {
+ useEffect(() => {
+ initLocale()
+ }, [])
+
  return (
- <ErrorBoundary>
- <LivepeerConfig client={getLivepeerClient()} theme={videoPlayerTheme}>
- <WagmiConfig client={wagmiClient}>
- <ThemeProvider defaultTheme="dark" attribute="class">
- <RainbowKitProviderWrapper>
- <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
- </RainbowKitProviderWrapper>
- </ThemeProvider>
- </WagmiConfig>
- </LivepeerConfig>
- </ErrorBoundary>
+ <I18nProvider i18n={i18n}>
+ <ErrorBoundary>
+ <LivepeerConfig client={getLivepeerClient()} theme={videoPlayerTheme}>
+ <WagmiConfig client={wagmiClient}>
+ <ThemeProvider defaultTheme="dark" attribute="class">
+ <RainbowKitProviderWrapper>
+ <ApolloProvider client={apolloClient}>
+ {children}
+ </ApolloProvider>
+ </RainbowKitProviderWrapper>
+ </ThemeProvider>
+ </WagmiConfig>
+ </LivepeerConfig>
+ </ErrorBoundary>
+ </I18nProvider>
  )
 }
 

diff --git a/apps/web/src/components/Upload/Category.tsx b/apps/web/src/components/Upload/Category.tsx
@@ -1,6 +1,7 @@
 import CheckOutline from '@components/Common/Icons/CheckOutline'
 import { Listbox, Transition } from '@headlessui/react'
 import useAppStore from '@lib/store'
+import { Trans } from '@lingui/macro'
 import React, { Fragment } from 'react'
 import { CREATOR_VIDEO_CATEGORIES } from 'utils/data/categories'
 
@@ -12,7 +13,7 @@ const Category = () => {
  <>
  <div className="mb-1 flex items-center space-x-1.5">
  <div className="text-[11px] font-semibold uppercase opacity-70">
- Category
+ <Trans>Category</Trans>
  </div>
  </div>
  <Listbox

diff --git a/apps/web/src/locales/en/messages.po b/apps/web/src/locales/en/messages.po
@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-04-26 19:28+0530\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/components/Upload/Category.tsx:16
+msgid "Category"
+msgstr ""
diff --git a/apps/web/src/locales/es/messages.po b/apps/web/src/locales/es/messages.po
@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-04-26 19:28+0530\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: es\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/components/Upload/Category.tsx:16
+msgid "Category"
+msgstr ""
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
  "workers:deploy": "turbo run worker:deploy --parallel",
  "format": "prettier --write \"**/*.{ts,tsx,md}\"",
  "dev:test": "turbo run dev:test",
- "e2e:test": "start-server-and-test start 4783 dev:test"
+ "e2e:test": "start-server-and-test start 4783 dev:test",
+ "i18n:extract": "turbo run extract"
  },
  "devDependencies": {
  "danger": "11.2.6",

diff --git a/packages/utils/constants.ts b/packages/utils/constants.ts
@@ -120,6 +120,13 @@ export const ALLOWED_VIDEO_TYPES = [
  'video/mov'
 ]
 
+// i18n
+export const SUPPORTED_LOCALES = {
+ en: 'English',
+ es: 'Español'
+}
+export const DEFAULT_LOCALE = 'en'
+
 // other apps
 export const LENSTER_WEBSITE_URL = IS_MAINNET
  ? 'https://lenster.xyz'

diff --git a/packages/utils/functions/i18n.ts b/packages/utils/functions/i18n.ts
@@ -0,0 +1,30 @@
+import { i18n } from '@lingui/core'
+import dayjs from 'dayjs'
+import { en, es, kn, ru, ta, zh } from 'make-plural/plurals'
+
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '../constants'
+
+i18n.load({
+ en: { plurals: en },
+ es: { plurals: es },
+ ta: { plurals: ta },
+ zh: { plurals: zh },
+ kn: { plurals: kn },
+ ru: { plurals: ru }
+})
+
+export const setLocale = async (locale: string) => {
+ if (!Object.values(SUPPORTED_LOCALES).includes(locale)) {
+ locale = DEFAULT_LOCALE
+ }
+ localStorage.setItem('locale', JSON.stringify(locale))
+ const { messages } = await import(`src/locales/${locale}/messages`)
+ i18n.load(locale, messages)
+ i18n.activate(locale)
+ dayjs.locale(locale)
+}
+
+export const initLocale = () => {
+ const locale = localStorage.getItem('locale')
+ setLocale(locale ? JSON.parse(locale) : DEFAULT_LOCALE)
+}
diff --git a/turbo.json b/turbo.json
@@ -9,6 +9,7 @@
  "dependsOn": ["build"],
  "outputs": ["out/**"]
  },
+ "extract": { "outputs": [] },
  "start": { "cache": false },
  "e2e:test": { "dependsOn": ["^build"] },
  "worker:deploy": { "outputs": [] },