Localization

The Inject Exercise Platform (IXP) supports multiple languages through its localization features. This allows users to interact with the platform in their preferred language, enhancing accessibility and user experience. The localization system is built using the i18next library, which provides a robust framework for managing translations and internationalization (i18n) in web applications.

The language can be set by the user in the user settings. Note that only the frontend is localized, so the language setting does not affect any errors returned by the backend. Additionally, the language of an exercise depends on the content created in the exercise definition, so it may not always match the user's selected language.

Note

Localization is currently supported for the whole trainee and instructor views. The analyst view and the editor are not localized.

Adding a New Language

The localization is handled entirely on the frontend in a dedicated locale package. To add a new language to the IXP, you need to follow these steps:

1. Clone the Frontend Repository: If you haven't already, clone the frontend repository to your local machine using Git:

   git clone https://gitlab.fi.muni.cz/inject/frontend.git
   

2. Create a new Branch: Create a new branch from the main branch to work on adding the new language:

   git checkout -b add-new-language
   

3. Create a New Directory: In the frontend repository, in the locale/resources/ directory, create a new folder named after the language code (e.g., fr for French).

4. Add Translation Files: Inside the new language folder, create JSON files for each namespace (e.g., frontend.json, shared.json). Populate these files with key-value pairs for the translations.

5. Update i18n Configuration: In the locale/i18n.ts file, import the new translation resources and add them to the RESOURCES object. This will make the new language available in the application. For example, if you added French, you would import the resources and add them like this:

   export const RESOURCES = {
     en: {
       shared: enSharedResources,
       frontend: enFrontendResources,
     },
     cs: {
       shared: csSharedResources,
       frontend: csFrontendResources,
     },
     fr: {
       shared: frSharedResources,
       frontend: frFrontendResources,
     },
   } as const;
   

6. Validate Translations: Ensure that all translation keys are properly defined and that there are no missing or duplicate keys. You can use the prepared script by running this command:

   yarn # Install dependencies
   yarn validate-translations # Run the validation script
   

7. Commit Changes: Create a commit with your changes and push them to the remote repository:

   git add .
   git commit -m "Add support for [Language Name]"
   git push origin add-new-language
   

8. Create a Merge Request: Open a merge request to merge your branch into the main branch. We'll review your changes and merge them if everything looks good.

Warning

The resources for each language are not automatically generated or updated. When new keys are added to the frontend, they need to be manually added to each language's translation files. Therefore, we cannot guarantee that all languages are always fully up to date with the latest frontend changes. This may lead to some missing translations, which will fall back to the default language (English) in the application.