vavilon.js

A quick, lightweight and easy-to-use i18n engine for static websites

## How to Install To use `vavilon.js` on your website you should connect the script in your webpage's ``. Here are some ways to get this going: ### via CDN (recommended) You can get `vavilon.js` via jsDelivr. This is the fastest and the most reliable way: ```html ``` ### via NPM If you use NPM with your static website, you can install `vavilon.js` using npm: ```sh npm install vavilon ``` Then you can include the script in your webpage like so: ```html ``` ### Manual download You can find latest version of `vavilon.js` in [Releases][releases] section on GitHub. Download either the minified or the uncompressed version and include it in your document: ```html ``` ## How to use 1. Create your HTML page on open the one you've already created. Set the `lang` attribute in your `` tag: ```html Hello World!

How are you?

``` If you rely on multiple versions of the same language (like US and UK English), you can user the country-specific lang codes (i.e. `en-us`, `en-uk`) 2. Give unique IDs to every string on your HTML page that you want to have translated. Put the IDs inside the `data-vavilon` attribute and add the `vavilon` class to these elements: ```html Hello World!

How are you?

``` 3. Create JSON dictionary files for the languages you want to support. Each file should be an object, with the keys being the unique string IDs and values being the translated strings. Here's an example for Russian language: ```json { "hello-world": "Привет мир!", "how-are-you": "Как дела?" } ``` 4. Connect the dictionaries inside `` element. Add the `data-vavilon-dict` attribute to specify the dictionaries language: ```html ``` 5. [Download and connect](#how-to-install) the latest version of `vavilon.js`. Upon doing so, your page now will automatically change its language based on the end user's browser locale. 6. If you want your user to be able to switch languages, you can set it up by using the `setLang` function: ```html ``` ## Caveats As you may have guessed from the major version number being 0, the library is not completely finished. Here are some things that are not supported or don't work as expected: ### Styling and inline tags Right now `vavilon.js` replaces the _text_ of the elements, not their HTML code, which means that the code like ```html

Hello world!

``` will not have the word "world" written in bold. The support for styling your strings will come in future releases. If this is crucial for you, you can use a workaround like this: ```html

Hello world!

``` This way you can define separate IDs for the words "Hello" and "world" inside your dictionary file. ### Framework compatibility While it is possible to create static websites using frameworks like Vue.js, React and Svelte, the support for those has not been tested at all. If you use these frameworks I would highly recommend you use something other than `vavilon.js`, like the i18n plugins created specifically for these frameworks. With regard to jQuery, it has not been tested yet either, but I guess it should work just fine. If you want to play around with `vavilon.js` and jQuery, I encourage you do so. ---- If you encounter any bugs, don't hesitate [filing an issue][issues] [releases]: https://github.com/vavilon-js/vavilon.js/releases [issues]: https://github.com/vavilon-js/vavilon.js/issues