∺ Hingejs

i18n - internationalization

If your site needs to be translated into various language's, there is a setup with the use of i18next.com.

↩ Go Back

Sample code

      <script type="module">
          import { I18n } from 'https://cdn.jsdelivr.net/npm/@hingejs/services/index.min.js'

          (async () => {
            I18n.enableDocumentObserver()
          })()
          </script>
          <h1 data-i18n="global:header"></h1>

  

Working sample

Adding internationalization to a current project

If you are in a current project and now need to add internationalization please follow the steps below

1. Add a directory called locales to the assets folder: /assets/locales
2. Create a file called en.json and add some JSON key/values to start.

           {
             "global:header": "This is the home page",
           }
         

3. Add the following to the /src/main.js file

             import { I18n } from '@hingejs/services'
             I18n.enableDocumentObserver()
         

4. Now adding the attribute data-i18n to html tags will allow the key to be translated

             <h1 data-i18n="global:header"></h1>
         

5. Alternatively you can also use Javascript to translate keys

             const translate = await I18n.init()
             let result = translate('global:header')
         

6. A custom element can also be created and used. Note this is not included with the hingeJS web components package

           // file: components/translate-locale.js
            import I18n from '@hingejs/services'
   
            window.customElements.define('translate-locale', class extends HTMLElement {
   
              constructor() {
                super()
              }
   
              async generateTemplate() {
                const translate = await I18n.init()
                return translate(this.innerText)
              }
   
              async connectedCallback() {
                this.innerHTML = await this.generateTemplate()
              }
   
            })
   
         

   in the HTML

             <translate-locale>global:header</translate-locale>