Add i18n

[Haibersut]

Taking into consideration the existing framework, I have briefly incorporated the corresponding i18n components. I have adapted much of the text within "index" and "config" to the i18n format; however, many template files have yet to be replaced.

There is still a significant amount of work to be done to complete the i18n translation.

I am sharing this to request assistance. Also looking for a better method to name JSON keys and would appreciate any suggestions.

Additionally, since new dependencies have been introduced, the package-lock.json file will need to be updated if you wish to run tests.

For translating text within JavaScript files using i18n, you simply need to ensure that i18n.js and its dependencies are loaded prior to the JavaScript files that require translation. Then use i18n.t().

For translating HTML text, you need to include the following three JavaScript files and place them before any other scripts in your HTML document.

<script src="[% c.url_for("/js/vendor/i18next.min.js") %]" type="text/JAVASCRIPT"></script>
<script src="[% c.url_for("/js/vendor/i18nextHttpBackend.min.js") %]" type="text/JAVASCRIPT"></script>
<script src="[% c.url_for("/js/i18n.js?$version") %]" type="text/JAVASCRIPT"></script>

follow these examples and the modified files as guidance for replacement.

1. Replacing Text Content Using the data-i18n Attribute

By adding the data-i18n attribute to HTML elements, you can instruct the i18next library to replace the content of those elements with translated text.

<p data-i18n="welcome.message"></p>

In JavaScript, after the translation is done, i18next.t('welcome.message') will replace the original text.

2. Replacing HTML Attributes Using the data-i18n-attr Attribute

The data-i18n-attr attribute allows you to insert translated text into specific HTML attributes. For example, to update a button's title attribute:

<button data-i18n="button.save" data-i18n-attr="title">Save</button>

In JavaScript, the setAttribute method will be used to update the specified attribute.

3. Handling Option Elements within Select Elements

For select elements, both the select tag itself and its internal option elements need the data-i18n attribute for translation.

<select data-i18n="select.options">
    <option data-i18n="option.first">First Option</option>
    <option data-i18n="option.second">Second Option</option>
</select>

In JavaScript, you should iterate through the option child elements of the select element and replace the text based on the data-i18n attribute.

4. Special Handling of Input Elements of Type Button

For input elements with a type of button, you need to set the translated text using the value attribute.

<input type="button" data-i18n="input.button.label" value="Click me" />

In JavaScript, update the translated text by setting the value attribute of the input element.

5. Replacing HTML Content Using the data-i18n-html Attribute

In some situations, you might need to replace the entire HTML content rather than just the text. Use the data-i18n-html attribute for this purpose.

<div data-i18n="div.content" data-i18n-html></div>

Following these guidelines will help you successfully and smoothly integrate i18n translation within your HTML content.