Add language selector for multi-language support

Lauren Barkerrequested to merge
gitlab-com/localization/tech-docs-forked-projects/prod/gitlab-docs:barker/feature-language-selector into main

What does this MR do and why?

This MR implements a language selector component that allows users to switch between available language translations on the GitLab documentation site.

Why was this MR needed?

Currently, users have no easy way to switch between language versions when multiple translations are available. With Japanese (ja-JP) and English (en-US) languages now configured, we need a user-friendly interface for language switching.

How

  1. Conditional Display: Language selector only appears when 2 or more translations exist for a page
  2. Hugo Template Integration: Uses .AllTranslations to detect available translations
  3. Vue Component: Implements language_selector.vue component that uses GlCollapsibleListbox from "@gitlab/ui"

Related Issues

  1. Closes gitlab-com/localization/docs-site-localization#253 (closed)
  2. Related gitlab-com/localization/docs-site-localization#39 (closed)

Screen_Recording_2025-06-02_at_10.17.41_AM

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.
  2. Check out this branch.
  3. In config/_default/hugo.yaml set languages.ja-jp.disabled to false using the functionality added in !767 (merged). This will enable the japanese site to be built.
  4. Run make view
  5. Any page that has translations available, will display the language selector component in the header 4. For example /api/ 4 If no translations are available, the language selector does not display.
    1. For example /user/gitlab_duo/
  6. Toggle between english and japanese versions if a page
  7. Close server, change languages.ja-jp.disabled to true
  8. Verify the language selector never displays

Note - This feature allows the user to switch between available language variants of the current page using the language selector.

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.

Edited by Lauren Barker

Merge request reports