diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst index e0a8196d719623aac20cf5c7e871a431808b3109..8e7e01aea90dec50920107dc121c7e05dee9bdb8 100644 --- a/source/import_documentation/Developping-with-SibTemplateElement.rst +++ b/source/import_documentation/Developping-with-SibTemplateElement.rst @@ -246,12 +246,82 @@ If your component uses some core component like ``solid-display``, don't forget </html> 6. Test your component: +----------------------- .. code:: bash npm run serve -7. Does it work well? +7. Translate your component +--------------------------- + +To translate the static strings of your components, follow these steps: + +- In your component, create a folder which contains all the translation files. You can name it ``locales`` for example. Inside, create one file per language, with the structure ``[code_language].json``, for example: ``fr.json``. +- In each file, add one line per string to translate. Your file should look like this: + +.. code:: json + + { + "title": "Solid FAQ", + "label.question": "Your question is not here ?" + } + + +- In the constructor of your component, define the path of your folder: + +.. code:: js + + const base_url = "https://unpkg.com/@startinblox/solid-faq"; // url of your component + + export class SolidFAQ extends SolidTemplateElement { + + constructor() { + ... + + this.setTranslationsPath(`${base_url}/locales`); + } + + ... + + } + +- Use the ``localize`` method to show the translated strings in your template: + +.. code:: js + + const base_url = "https://unpkg.com/@startinblox/solid-faq"; // url of your component + + export class SolidFAQ extends SolidTemplateElement { + + ... + + template( { dataSrc, title, moderatorEmail } ) { + if (!dataSrc) return ''; + let tmpl = ` + ... + <a href='mailto:p.${moderatorEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'> + ${this.localize('label.question')} + </a> + `; + return tmpl + } + } + + +As a developer who uses a component, you can also add you own translation files by targeting you translation folder. +Like for the component, this folder should contain one file per language: + +.. code:: html + + <sib-conversation + data-src="./data/conversations.jsonld" + extra-translations-path="http://my_app/locales" + ></sib-conversation> + + +8. Does it work well? +--------------------- .. image:: ./../../_static/images/import_documentation/faq.gif :alt: A FAQ component as example