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

• 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 ✌️