Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments

1 files changed, 14 insertions, 6 deletions

diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx
index 67453f111..05e72a2e6 100644
--- a/src/view/com/auth/SplashScreen.tsx
+++ b/src/view/com/auth/SplashScreen.tsx
@@ -5,6 +5,8 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {CenteredView} from '../util/Views'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -14,14 +16,18 @@ export const SplashScreen = ({
   onPressCreateAccount: () => void
 }) => {
   const pal = usePalette('default')
+  const {_} = useLingui()
+
   return (
     <CenteredView style={[styles.container, pal.view]}>
       <SafeAreaView testID="noSessionView" style={styles.container}>
         <ErrorBoundary>
           <View style={styles.hero}>
-            <Text style={[styles.title, pal.link]}>Bluesky</Text>
+            <Text style={[styles.title, pal.link]}>
+              <Trans>Bluesky</Trans>
+            </Text>
             <Text style={[styles.subtitle, pal.textLight]}>
-              See what's next
+              <Trans>See what's next</Trans>
             </Text>
           </View>
           <View testID="signinOrCreateAccount" style={styles.btns}>
@@ -30,10 +36,10 @@ export const SplashScreen = ({
               style={[styles.btn, {backgroundColor: colors.blue3}]}
               onPress={onPressCreateAccount}
               accessibilityRole="button"
-              accessibilityLabel="Create new account"
+              accessibilityLabel={_(msg`Create new account`)}
               accessibilityHint="Opens flow to create a new Bluesky account">
               <Text style={[s.white, styles.btnLabel]}>
-                Create a new account
+                <Trans>Create a new account</Trans>
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -41,9 +47,11 @@ export const SplashScreen = ({
               style={[styles.btn, pal.btn]}
               onPress={onPressSignin}
               accessibilityRole="button"
-              accessibilityLabel="Sign in"
+              accessibilityLabel={_(msg`Sign in`)}
               accessibilityHint="Opens flow to sign into your existing Bluesky account">
-              <Text style={[pal.text, styles.btnLabel]}>Sign In</Text>
+              <Text style={[pal.text, styles.btnLabel]}>
+                <Trans>Sign In</Trans>
+              </Text>
             </TouchableOpacity>
           </View>
         </ErrorBoundary>