Add i18n-js gem

[rosle]

What happened

✅ Add I18n-js gem

✅ Add devise-i18nand rails-i18n gems that is optional for including many languages translations for Devise and Rails (Suggested by Yutna 👍)

Insight

Due to issue #6 , we would like to add the i18n-js by default because we use it on most of the project.

I18n Configurations

The files locate at:

• The library - vendor/assets/javascripts/i18n.js
• The translation file - app/assets/javascripts/translations/translations.js

On config/development.rb, add config.middleware.use I18n::JS::Middleware, so it will regenerate translations file.

For production we should run rake i18n:js:export before deployment.

Proof Of Work

Configuration added:

• config/development.rb
  

• app/assets/javascripts/application.js
  

The translation file gets generated when running the site on development

I create a simple page for test and alert a translation key.

[andyduong1920]

@rosle For this config, when we want to deploy the project to Heroku we can't push those files to Heroku.

[rosle]

Added more comment regarding deployment on Heroku 🚀

[rosle]

@olivierobert I checked with @anduonghien about the i18n-js. The language switching does not work out of the box. We will need to set the current locale like we do in Rails part (that we read locale from param and set it in the controller).

For javascript part, What we did for other project is we set lang attribute on html tag and use js to read and set that value to i18n-js.

So currently, we're not sure if we should include all that setup here or we let the developer implement it for each project. 💭 I try to check for other template but I don't find anyone including that.

[andyduong1920]

@rosle How about we generate the i18n.js file that includes

'use strict';

I18n.locale = document.getElementsByTagName('html')[0].getAttribute('lang');

and put it in the appplication.js file

[olivierobert]

@rosle Since it's used in all projects without any exceptions, I would recommend to add the whole setup in this PR. We should move the controller code into a concern (as done on Braive) so that it's easy to isolate the localization code.

[rosle]

@olivierobert @anduonghien I added the script to generate initial 18n setup on controller and js. After the project creation, it will look like this

application_controller.rb

• include the new concerns - Localization

class ApplicationController < ActionController::Base
  include Localization
end

application.js

• Automatically require initializers and screens
• The i18n setup script is in the initializers directory

//= require rails-ujs
//= require activestorage
//= require i18n
//= require translations/translations
//= require initializers/index
//= require screens/index

And also add the lang attribute on the page for js to setup the locale

[olivierobert]

As discussed the only remaining change is not to include the translations/translations inside the manifest file. Instead, it needs to be added in the default layout. The rationale behind it is that translation do not change that much so can be cached.

[rosle]

@olivierobert @anduonghien I updated the i18n to be included in layout instead.

layouts/application.html.erb

• Add i18n and translations ⬇️

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'i18n' %>
<%= javascript_include_tag 'translations/translations' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Need to precompile new assets in config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( i18n.js translations/translations.js )