TODO: CHANGE THIS LINE TO CONVENTIONAL COMMIT!

# 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](https://react.i18next.com/),

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:

    ```bash

    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:

    ```bash

    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:

    ```typescript

    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:

    ```bash

    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:

    ```bash

    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.

    - Version compatibility: tech/version-compatibility.md

    - LLM integration: tech/llm-integration.md

    - Sandbox environments: tech/sandbox.md

    - Localization: tech/localization.md

  - How to prepare an exercise?:

    - INJECT Process: INJECT_process/intro/overview.md

    - 01 Understand: