Add localization

[maxbeier]

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 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

• Feature: Add Localization #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?
            ```
            ${{ steps.diff.outputs.result }}
            ```

[pajowu]

😍

[maxbeier]

@pajowu PR is ready for review ✌️

[AntonLydike]

I would shy away from using ls src/locale/*.json (it's weird with some file names, see this)

I would suggest to use LOCALE_FILES=(src/locale/*.json) instead, as it handles a lot of edge cases much better (and is much better to read, since you can skip the IFS parts around it)

[AntonLydike]

I think you missed a spot here?

[AntonLydike]

I think you missed a translate call here?

[maxbeier]

would consider it a technical term and not translate it

[AntonLydike]

You define defaultValue as an argument of the function safeJsonParse, but ignore it here and instead use || initialValue, which will handle edge cases such as falsy JSON values (such as null or []) differently.

I am not saying this is the wrong way, it's just something that should probably be cleaned up before merging.

[AntonLydike]

Is this really necessary? It just evaluates to any in every place it is used in this project, or am I missing something?

[maxbeier]

ok, removed it