Skip to content

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:

  1. i18n.js - loads the translations and returns i18n initialized object.
  2. main.js - i18n is loaded into all components rendered here.
  3. locales/en-us.json - for English translations.
  4. index.js - where we define languages we support.
  5. navigation.yaml - moved to data/en-us/. When we get other translations like German, we will need to create language specific folder under data.

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.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. 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).
    • Search archives + help text image
    • Filter by section

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.

Closes #172 (closed)

Edited by Hiru Fernando

Merge request reports

Loading