simple-i18n-solution

A simplified version of what I have for my website for i18n localization.

1. About

I spent enormous effort trying to figure out the most convenient ways to provide i18n solutions, and this is what I came up with.

Basic Ideas

Basically, this is how it goes:

1. Server app uses some kind of a template engine.
2. Prepare 2 templates for English and Japanese.
3. Include them in one page.
4. Use JS to switch between the DOM elements.

I'm not saying you should go back to the 90s. From designers perspective, they don't want to deal with a collection of random texts scattered around in JSON format. Instead, they want HTML, or to work on a group of DOM elements as a chunk.

So, the idea behind is this:
Pass the data as DOM elements from the server-side.

In reality, I am using SolidJS to provide the feature as a WebComponent widget.
Whenever I want translations for a page, I embed the widget, and the widget takes care everything.
(Check out my website for one of the pages)

Advantages

• Always have 2 templates for 2 languages which is intuitive to manage.
• You can avoid hundreds of locale files scattered around the project which is hard to grasp.
  (which happens when managing i18n on JS side)
• Designers get to work on the page as HTML, not meaningless JSON key-values.

2. Instructions

# Install NPM packages for server apps
cd server
npm install

# Launch the Express server
cd ../
make watch.server

3. License

Dual-licensed under either of the followings.
Choose at your option.

• The UNLICENSE (LICENSE.UNLICENSE)
• MIT license (LICENSE.MIT)