Extract translatable English strings from Vue components
What does this MR do and why?
This MR sets up i18n (localization) in Vue components.
Primarily, it uses the notation $t('component-name.field-name') as we are using Vue2 instead of Vue3. When we switch to Vue3, we will have to change it to this format.
Structure of implementation:
-
i18n.js- loads the translations and returns i18n initialized object. -
main.js- i18n is loaded into all components rendered here. -
locales/en-us.json- for English translations. -
index.js- where we define languages we support. -
navigation.yaml- moved todata/en-us/. When we get other translations like German, we will need to create language specific folder underdata.
Screenshots, screen recordings, or links to review app
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Check the following components (both UI text AND accessibility labels like aria-label:
- Archive banner
- Sidebar menu
- Versions menu in header
- Clipboard copy
- Contribute/Solutions badge
- Update deprecation page - http://localhost:1313/update/deprecations/
- Search results pages for both pagefind (
CI_COMMIT_REF_NAME=17.8 make view-archive) and Elastic (for this one, also check filters and versions dropdown).
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #172 (closed)
Edited by Hiru Fernando
