From fa492150782d6dc91e74243e446e7e1a396623ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Fri, 18 Oct 2024 00:50:31 -0300 Subject: [PATCH] chore: add internationalization guidelines to CONTRIBUTING.md (#8755) --- CONTRIBUTING.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5229ddfdfd6..6a517ab7ce8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -122,3 +122,19 @@ This is how you can preview changes you made locally to the docs: 4. Add a `DOCS_DIR` environment variable to the `.env` file which points to the absolute path of your modified docs folder. For example `DOCS_DIR=/Users/yourname/Documents/GitHub/payload/docs` 5. Run `yarn run fetchDocs:local`. If this was successful, you should see no error messages and the following output: _Docs successfully written to /.../website/src/app/docs.json_. There could be error messages if you have incorrect markdown in your local docs folder. In this case, it will tell you how you can fix it 6. You're done! Now you can start the website locally using `yarn run dev` and preview the docs under [http://localhost:3000/docs/](http://localhost:3000/docs/) + +## Internationalization (i18n) + +If your PR adds a string to the UI, we need to make sure to translate it into all the languages ​​that Payload supports. To do that: + +- Find the appropriate internationalization file for your package. These are typically located in `packages/translations/src/languages`, although some packages (e.g., richtext-lexical) have separate i18n files for each feature. +- Add the string to the English locale "en". +- Translate it to other languages. You can use the `translateNewKeys` script if you have an OpenAI API key in your `.env` (under `OPENAI_KEY`), or you can use ChatGPT or Google translate - whatever is easier for you. For payload core translations (in packages/translations) you can run the `translateNewKeys` script using `cd packages/translations && pnpm translateNewKeys`. For lexical translations, you can run it using `cd packages/richtext-lexical && pnpm translateNewKeys`. External contributors can skip this step and leave it to us. + +To display translation strings in the UI, make sure to use the `t` utility of the `useTranslation` hook: + +```ts +const { t } = useTranslation() +// ... +t('yourStringKey') +```