Internationalization

Glint comes with built-in support for internationalization using i18next along with react-i18next. These packages allow you to manage multiple languages in your project without hardcoding text directly into components. Instead, all translatable text is stored in language-specific JSON files that can be easily extended as per your project needs.

By default, we have included sample translations for French, Arabic, and Hebrew (currently applied to the Sidebar). You can add or update translations by editing the JSON files located in the public/locales folder. The structure follows the i18next convention:

    public/
      locales/
        en/
          translation.json
        fr/
          translation.json
        ar/
          translation.json
        he/
          translation.json
  

When the user switches the language, i18next automatically loads the corresponding file and applies translations across the app. You can add as many languages as your project requires by simply creating new folders and JSON files in the same structure.

Additionally, Glint also supports directional changes for right-to-left (RTL) languages like Arabic and Hebrew. When these languages are selected, the layout automatically switches from LTR (Left-to-Right) to RTL (Right-to-Left) using the custom direction function inside the Customizer. This ensures the interface looks and feels correct in RTL contexts.

In short, you can easily maintain multiple languages by editing the translation files, and Glint will take care of updating the UI text and direction (LTR/RTL) dynamically.