@blablatec/i18n-js

I18n-js

Translations library for any javascript based app, using Blablatec.com.

Plain Javascript

index.html

<script type="module" src="https://unpkg.com/@blablatec/i18n-js/dist/i18n-js/i18n-js.esm.js"></script>
<script nomodule src="https://unpkg.com/@blablatec/i18n-js/dist/i18n-js/i18n-js.js"></script>

<i18n-t t-data='{"name": "blablatec!", "url": "https://blablatec.com"}'>Visit us: <a href="(%url)">(%name)</a></i18n-t>

<script>
    // Get it from https://blablatec.com
    const i18nConfig = {
        apiUrl: `https://blablatec.com/api/v1/application/5f7...`,
        appId: 'your-app-id',
        appSecret: 't8GTsNsd...',
    };
    Translator.init(availableLangs, defaultLanguage, i18nConfig);
</script>

Example of use with stencil.js app

app.ts config file:

import { Translator } from '@blablatec/i18n-js';

import './app.deps';

const envConfig: IEnvironmentConfig = {
    env: 'production',
};

const i18nConfig = {
    apiUrl: 'https://blablatec.com/api/v1/application/5f72ea4c19e7f1653faed129',
    appId: 'com.bfidel',
    // eslint-disable-next-line max-len
    appSecret: 't8GTsNsdrBzEO-twbIlZve1OfLIz9Iv3VbNRScMy20sXAO_mt6jsXxbfFbgicBfJr_0fPBaDjxEYhrNFp1ccf4hkTmfmyML_Gk0ZPnVvKpTzqV5hXrXYk8gun2NP2eWpLHB2Jir_bn',
};

export default () => {
    Translator.init(availableLangs, defaultLanguage, i18nConfig);
};

app.deps.ts:

import '@blablatec/i18n-js';
...

your-awesome-component.ts:

import { Component, h, State, Prop } from '@stencil/core';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
})
export class AppHome {
    render() {
        const tData = {
            url: 'https://blablatec.com',
            name: 'blablatec!',
        };
        return <p><i18n-t t-data={JSON.stringify(tData)}>Visit us: <a href="(%url)">(%name)</a></i18n-t></p>;
    }
}