Add simple translation example to common showcase

packages/common/README.md

@@ -37,7 +37,58 @@ You can use this web component to show translated html.
 </dbp-translated>
 ```
 
-The English or German text will be shown according to the `lang` attribute. 
+The English or German text will be shown according to the `lang` attribute.
+
+## Translation Web Component
+
+You can use this web component to translate text with i18next.
+The English or German text will be shown according to the subscribed `lang` attribute.
+Additionally, this component subscribes the `lang-dir` attribute to retrieve the directory where the i18n translation files are located.
+To get the translation of the key `test`, the component can be used like this:
+```html
+<dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation>
+```
+The i18next translation files are namespaced with the tag name of the component which requests translations. In this case the tag name is `dbp-translation`.
+Thus, the translation files for english and german will look like this:
+```json
+{
+  "dbp-translation": {
+    "test": "Hallo"
+  }
+}
+```
+```json
+{
+  "dbp-translation": {
+    "test": "Hello"
+  }
+}
+```
+Furthermore, the component allows interpolation and unsafe translations. Thus, HTML can be injected, if the unsafe attribute is set. **Therefore, this feature has to be used with caution!**
+
+To use the component to display a link, interpolation and unsafe can be used like this:
+```html
+<dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+```
+Where the translation files for english and german will look like this:
+```json
+{
+  "dbp-translation": {
+    "test": "Hallo",
+    "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>"
+  }
+}
+```
+```json
+{
+  "dbp-translation": {
+    "test": "Hello",
+    "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>"
+  }
+}
+```
+
+The resulting translations can be seen in the section Translation Demo further down the page.
 
 ## Overriding slots in nested web components
 

packages/common/dbp-common-demo.js

@@ -303,12 +303,19 @@ html {
                             </div>
                         </dbp-translated>
                     </div>
-                    <div class="control" id="dbp-translation-demo">
+                    <div class="control" id="dbp-translation-text">
                         <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
                         <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
                         <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
                     </div>
                 </div>
+                <div class="content">
+                    <h2>Translation Demo</h2>
+                    <div class="control" id="dbp-translation-demo">
+                        <dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation><br/>
+                        <dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+                    </div>
+                </div>
             </section>
         `;
     }

toolkit-showcase/assets/translation-overrides/de/translation.json

@@ -3,7 +3,9 @@
       "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
       "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\" class=\"link\">interpolation</a> und escaping dargestellt werden.",
       "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
-      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
+      "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>",
+      "test": "Hallo"
     },
     "dbp-theme-switcher": {
       "color-mode": "Theme ändern",

toolkit-showcase/assets/translation-overrides/en/translation.json

@@ -3,7 +3,9 @@
       "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
       "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\" class=\"link\">interpolation</a> and escaping.",
       "color-mode": "This text is not supposed to be displayed. It is only here for testing.",
-      "intro": "This text is not supposed to be displayed. It is only here for testing."
+      "intro": "This text is not supposed to be displayed. It is only here for testing.",
+      "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>",
+      "test": "Hello"
     },
     "dbp-theme-switcher": {
       "color-mode": "Change theme",