about summary refs log tree commit diff
path: root/docs/internationalization.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/internationalization.md')
-rw-r--r--docs/internationalization.md113
1 files changed, 0 insertions, 113 deletions
diff --git a/docs/internationalization.md b/docs/internationalization.md
deleted file mode 100644
index 3c1af7a4d..000000000
--- a/docs/internationalization.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# Internationalization
-
-We want the official Bluesky app to be supported in as many languages as possible. If you want to help us translate the app, please open a PR or issue on the [Bluesky app repo on GitHub](https://github.com/bluesky-social/social-app)
-
-## Tools
-We are using Lingui to manage translations. You can find the documentation [here](https://lingui.dev/).
-
-### Adding new strings
-When adding a new string, do it as follows:
-```jsx
-// Before
-import { Text } from "react-native";
-
-<Text>Hello World</Text>
-```
-
-```jsx
-// After
-import { Text } from "react-native";
-import { Trans } from "@lingui/macro";
-
-<Text><Trans>Hello World</Trans></Text>
-```
-
-The `<Trans>` macro will extract the string and add it to the catalog. It is not really a component, but a macro. Further reading [here](https://lingui.dev/ref/macro.html)
-
-However sometimes you will run into this case:
-```jsx
-// Before
-import { Text } from "react-native";
-
-const text = "Hello World";
-<Text accessibilityLabel="Label is here">{text}</Text>
-```
-In this case, you cannot use the `useLingui()` hook:
-```jsx
-import { msg } from "@lingui/macro";
-import { useLingui } from "@lingui/react";
-
-const { _ } = useLingui();
-return <Text accessibilityLabel={_(msg`Label is here`)}>{text}</Text>
-```
-
-If you want to do this outside of a React component, you can use the `t` macro instead (note: this won't react to changes if the locale is switched dynamically within the app):
-```jsx
-import { t } from "@lingui/macro";
-
-const text = t`Hello World`;
-```
-
-We can then run `yarn intl:extract` to update the catalog in `src/locale/locales/{locale}/messages.po`. This will add the new string to the catalog.
-We can then run `yarn intl:compile` to update the translation files in `src/locale/locales/{locale}/messages.js`. This will add the new string to the translation files. 
-The configuration for translations is defined in `lingui.config.js`
-
-So the workflow is as follows:
-1. Wrap messages in Trans macro
-2. Run `yarn intl:extract` command to generate message catalogs
-3. Translate message catalogs (send them to translators usually)
-4. Run `yarn intl:compile` to create runtime catalogs
-5. Load runtime catalog
-6. Enjoy translated app!
-
-### Common pitfalls
-These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing stale translations to be shown.
-
-```jsx
-import { msg } from "@lingui/macro";
-import { i18n } from "@lingui/core";
-
-const welcomeMessage = msg`Welcome!`;
-
-// ❌ Bad! This code won't work
-export function Welcome() {
-  const buggyWelcome = useMemo(() => {
-    return i18n._(welcomeMessage);
-  }, []);
-
-  return <div>{buggyWelcome}</div>;
-}
-
-// ❌ Bad! This code won't work either because the reference to i18n does not change
-export function Welcome() {
-  const { i18n } = useLingui();
-
-  const buggyWelcome = useMemo(() => {
-    return i18n._(welcomeMessage);
-  }, [i18n]);
-
-  return <div>{buggyWelcome}</div>;
-}
-
-// ✅ Good! `useMemo` has i18n context in the dependency
-export function Welcome() {
-  const linguiCtx = useLingui();
-
-  const welcome = useMemo(() => {
-    return linguiCtx.i18n._(welcomeMessage);
-  }, [linguiCtx]);
-
-  return <div>{welcome}</div>;
-}
-
-// 🤩 Better! `useMemo` consumes the `_` function from the Lingui context
-export function Welcome() {
-  const { _ } = useLingui();
-
-  const welcome = useMemo(() => {
-    return _(welcomeMessage);
-  }, [_]);
-
-  return <div>{welcome}</div>;
-}
-```
\ No newline at end of file