From 6f229291fa96f724cc190b98d3255aa7da58cce1 Mon Sep 17 00:00:00 2001
From: Matthieu Fesselier <matthieu.fesselier@gmail.com>
Date: Thu, 27 Aug 2020 15:01:13 +0200
Subject: [PATCH] update: add component translation
---
.../Developping-with-SibTemplateElement.rst | 72 ++++++++++++++++++-
1 file changed, 71 insertions(+), 1 deletion(-)
diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index e0a8196..8e7e01a 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
--
GitLab