Problem

We are using Vue-i18n for translations. With it, it is easy to use a key that doesn't exist in the locale file or to forget to remove a key that is not used anymore. This can lead to incorrect texts on the pages or even errors.

Description

We should re-add a CI step that checks the locale file for missing or unused keys. The steps that will need to be done are:

1. Add the following code to .github/workflows/ci.yaml (removed in Use saved locale files required for CI from test/locales openverse-frontend#1575):
   https://github.com/WordPress/openverse-frontend/blob/f3f03b4039035f8e7887cde99460d7a45fd6b5d1/.github/workflows/ci.yml#L66-L76

2. Update the package.json i18n:check script to add --ci flag to it.

3. The largest set of work is to replace all the dynamic keys (such as filters.${filterType}.title) with static ones (like filters.licenses.title) to prevent them from being reported as unused.

Alternatives

We can regularly run the i18n:check manually.

Additional context

Prior to WordPress/openverse-frontend#1575, we had the Check translations step that logged the report with the missing/unused keys but would not fail the CI. The reason for it is that vue-i18n-extract that we used for it does not compile the templates. So, when we have a dynamic key like i18n.t(filters.${kebab(filterType)}.title), all its variants are reported as missing.
See WordPress/openverse-frontend#1575 (comment) for even more context on this.

Implementation

• 🙋 I would be interested in implementing this feature.