It adds the react-intl lib to support language specific strings. It also adds ESLint rules to nudge people to replace static strings with dynamic ones. Locale strings have support for basic HTML elements (b, i, ul, p, br).
The following components are introduced:
LocaleProvider which wraps the app and provides the correct messages for the current locale with EN as a fallback per message
Translate which receives a key and optional some values and renders the appropriate text
It also adds a useLocale hook to get the current locale and messages, all available locales, and a function to change the active locale.
Furthermore it adds a shell script that can be used to e.g. check PRs for divergency in locale keys.
Related Issues
30
How do I test this?
load page → should either use DE or EN depending on your OS settings
change locale on the footer → language should have changed
reload page → selected language should still be correct
Is there something controversial in your PR?
I removed all defaultMessage props from the Translate component to force devs to add new keys to at least one locale file. This promotes locale files to be the source of truth and enabled us to diff against them to find missing translations. On the other hand, it also makes the code harder to read and understand as one has to manually look up all texts from the locale files.
Unused locale keys are hard to detect and remove.
Github Workflow
As one cannot add GitHub workflows in a PR, maybe someone with access wants to adds this to .github/workflows/diff-locale-keys.yml
name: diff-locale-keys
on:
push:
paths:
- 'src/locale/*.json'
jobs:
generate-icons:
runs-on: ubuntu-latest
steps:
- name: checkout files
uses: actions/checkout@v2
with:
ref: ${{ github.head_ref }}
- name: generate diff
id: diff
run: |
OUTPUT=$(bash scripts/diff_locale_keys.sh)
OUTPUT="${OUTPUT//'%'/'%25'}"
OUTPUT="${OUTPUT//$'\n'/'%0A'}"
OUTPUT="${OUTPUT//$'\r'/'%0D'}"
echo "::set-output name=result::$OUTPUT"
- name: get number of PR
uses: jwalton/gh-find-current-pr@v1
id: finder
- name: comment on PR
if: ${{ steps.diff.outputs.result != '' }}
uses: marocchino/sticky-pull-request-comment@v2
with:
number: ${{ steps.finder.outputs.pr }}
header: diff
message: |
Thanks a lot for your PR! The following keys are not available in all locale files – maybe you could help to translate them?
This PR adds basic translation capabilities.
Description of change
It adds the
react-intl
lib to support language specific strings. It also adds ESLint rules to nudge people to replace static strings with dynamic ones. Locale strings have support for basic HTML elements (b
,i
,ul
,p
,br
).The following components are introduced:
LocaleProvider
which wraps the app and provides the correct messages for the current locale with EN as a fallback per messageTranslate
which receives a key and optional some values and renders the appropriate textIt also adds a
useLocale
hook to get the current locale and messages, all available locales, and a function to change the active locale.Furthermore it adds a shell script that can be used to e.g. check PRs for divergency in locale keys.
Related Issues
30
How do I test this?
Is there something controversial in your PR?
defaultMessage
props from theTranslate
component to force devs to add new keys to at least one locale file. This promotes locale files to be the source of truth and enabled us to diff against them to find missing translations. On the other hand, it also makes the code harder to read and understand as one has to manually look up all texts from the locale files.Github Workflow
As one cannot add GitHub workflows in a PR, maybe someone with access wants to adds this to
.github/workflows/diff-locale-keys.yml