Skip to content

An example to showcase Kraken's ability to use localized content bundles

Notifications You must be signed in to change notification settings

lensam69/Kraken_Example_Localization

Repository files navigation

Kraken_Localization

A sample application to show the localization features of Kraken If you'd like to see a non-trivial application, check out a shopping cart built on kraken

What we'll be doing

Starting with a plain vanilla application, we're going to set up content bundles to greet the customer in different (random) languages!

Running this example

Clone this repo: git clone https://github.com/lensam69/Kraken_Example_Localization.git

Install the dependencies: npm install

Start the server: npm start

Relevant code

Logic

./controllers/index.js defines the / route. It populates a model with a name parameter, and calls the index template for rendering

Template

./public/templates/index.dust Is the template that greets the user.

Within it, we have the following entry: <h1>{@pre type="content" key="index.greeting"/}</h1>

This dust tag, tells the framework that it should be populated from the index.greeting key in the index bundles,

Content Bundle

./locales/ is where the content bundles are located. Initially we only have one: /locales/US/en/index.properties. As you can see, content bundles are nothing more than properties files, stored according to locality (In this case, /US/en/)

This content bundle only has one entry: index.greeting=Hello, {name}!

Which will be used by the template to greet the user.

Changing the code!

Adding more locales

Let's add a few more languages (Spanish, French Canadian and Klingon) so that we can greet the user. To add a locale, you need to create the appropriate folders in ./locales/, by country and language. (Even if fictional). Next, we'll add the content bundle for each locale. This is nothing more than creating index.properties files for each, with the right content:

Locale Folder to create index.properties
Spanish (es_ES) /ES/es index.greeting=Hola, {name}!
French Canadian (fr_CA) /CA/fr index.greeting=Bonjour, {name}!
Klingon (tlh_US) /US/tlh index.greeting=nuqneH, {name}!

See the changes here

Setting the locality

Finally, we need to let kraken know what language we want to use. This is done by adding a context to the response. This context will include the locality we want to use. We'll make this change inline on the routing logic ./controllers/index.js before invoking the template

res.locals.context = {
            locality: <locale_to_use>
        };

See the changes here

Seeing the changes in action

Restart your application, and visit http://localhost:8000/

Everytime you refresh the page, you will be greeted in a random language!

Is Klingon a thing?

According to Wikipedia there are 12 fluent speakers in the world. Isn't it nice that you can greet them?

About

An example to showcase Kraken's ability to use localized content bundles

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published