jedireza/aqua

Multi language

Closed this issue · 5 comments

What is the best approach for making aqua a multi language website?

Thanks for opening an issue. There isn't a best approach to internationalization (i18n). I suggest you do some research and find an approach that works best for your project. I haven't yet had the need for i18n in Aqua myself yet, but here are some of the first results I've found by searching:

Please update this thread with your findings.

Hi there. I'm watching Aqua for while now, but didn't find time for more. :(
Currently I'm working with https://github.com/yahoo/react-intl and I think it's strait forward. Okay, the documentation isn't the best but there're enough google results out there.

I managed to implement a solution with https://www.npmjs.com/package/hapi-locale-i18n. It works great and it is not so complicated to use.

However, I have problems with onClick functions when i try to change language in Navbar.
Here is my function I'm trying to call:
setLanguage(lang) { console.log('HERE'); i18n.setLocale(lang); }

Here is part from Navbar:
<li className={this.tabClass('si')}> <a onClick={this.setLanguage.bind(this,'si')} style={{cursor: 'pointer'}}>{i18n.__("si")}</a> </li> <li className={this.tabClass('en')}> <a onClick={this.setLanguage.bind(this,'en')} style={{cursor: 'pointer'}}>{i18n.__("en")}</a> </li>

I also tried without bind, so like this:
<li className={this.tabClass('si')}> <a onClick={this.setLanguage('si')} style={{cursor: 'pointer'}}>{i18n.__("si")}</a> </li> <li className={this.tabClass('en')}> <a onClick={this.setLanguage.('en')} style={{cursor: 'pointer'}}>{i18n.__("en")}</a> </li>

If you have any ideas why?
Thank you

If you had an error message it would be easier to help. But at first I'd wonder how the strings get loaded client side.