Localization

[AxelSkye]

It would be great to have the website and documentation in different languages.

[kelvin-hey]

I would like to work on the website localization task. Is that possible?

[mirkobrombin]

Sure, we do not have a localization system, feel free to propose a solution. Better if you write your idea before coding it

[kelvin-hey]

I tested it in the local environment using the vue-i18n plugin, which allows for dynamic translations in Vue.js applications.

Plugin: https://kazupon.github.io/vue-i18n/

VanillaOs_Localization.mp4

Explanation

The original text for the pages is stored in a JSON file, and from this file, translations can be generated for different languages.

English

Portuguese

To implement the translations, simply replace the text inside each tag with $t('key').

The $t function is used to access the translations. For example, {{ $t('welcomeMessage') }} will display "is your next Operating System." in English or "é o seu novo Sistema Operacional." in Portuguese, depending on the selected language.

[mirkobrombin]

@kbdharun what do you think about this? In terms of Weblate.

[GabsEdits]

vue-i18n

vue-i18n is pretty good, used it on a few projects, I'll give a + for it.

Edit: It seems vue-i18n v8 has reached end of life. Check out v9: https://vue-i18n.intlify.dev/

[GabsEdits]

@kbdharun what do you think about this? In terms of Weblate.

Weblate supports the json format, which can be intigrated with vue-i18n 9: https://docs.weblate.org/en/latest/formats/json.html

[kbdharun]

@kbdharun what do you think about this? In terms of Weblate.

Website translations (for various languages) are supported by Weblate and it's doable since we have a lot of strings left in our libre plan limit.

We previously didn't implement it since our Weblate had a lot of strings that used up the limit, from multiple languages added from an add-on which ensured that all components had a translation file for added languages (we have since removed the add-on and have removed empty translation files).

My only concern is that translations for the website component could eventually add up to the overall libre plan string limit, so I would suggest making only the non-blog post strings translatable (and keeping the blog posts in English).

[kelvin-hey]

From what I understand, the necessary steps would be as follows:

1. Create the project/component on Weblate for the website.

In this case, both the creation of the project on Weblate and the integration with the GitHub repository would be done by the project administrator, correct?

2. Generate the JSON file with the mapped strings from the pages, using the vue-i18n plugin in the project.

Here, I would be responsible for finishing the mapping of the page strings, except for the blog pages.

3. Upload the translation files in JSON format to Weblate.

4. Translate the strings into other languages on Weblate.

So for now, I should finish mapping the strings with i18n and, once completed, share the changes for review?

[mirkobrombin]

@kbdharun what do you think about this? In terms of Weblate.

Website translations (for various languages) are supported by Weblate and it's doable since we have a lot of strings left in our libre plan limit.

We previously didn't implement it since our Weblate had a lot of strings that used up the limit, from multiple languages added from an add-on which ensured that all components had a translation file for added languages (we have since removed the add-on and have removed empty translation files).

My only concern is that translations for the website component could eventually add up to the overall libre plan string limit, so I would suggest making only the non-blog post strings translatable (and keeping the blog posts in English).

Agree with this and with @GabsEdits concerns about the EOL