perak / kitchen-site

Meteor Kitchen site source code
MIT License
282 stars 38 forks source link

Localisation support (WIP) : make localisation First Class Citizen #245

Open ljack opened 8 years ago

ljack commented 8 years ago

Hi, I'll open this issue to talk about localisation support for MK. As a experiment I've added l18n support to example-invoice using tap:i18n and it works very well ;) Maybe, it could be possible to make it even smoother experience. I just hate typing {{_ 'Default Text'}} and have wrong ticks and wrong braces from my finnish keyboard layout ;)

I'm still cleaning code and the app a little bit but I think I'll provide URL where to try the localised version of example-invoice and the also put the JSON here. Also there's some modifications in ./meteor-kitchen/templates (bootstrap .. components).

I think there are maybe some ways the MK Designer could help in localisation.

  1. E.g. add application.locales = { "fi": {...}, "en": {....} ) and then have UI in Designer where you type the translations directly.
  2. Have meteor-kitchen-cli automatically output (configurable) html with localisation call added. E.g. instead of writing this in JSON just leave title empty and have MK use the value of name as the default key for title translation lookup key.
     "name": "fullName",
     "title": "{{_ 'fullName'}}",

How have you implemented localisation support on your MK/M apps, any experience that could be shared?

edit: Added sample files: laskuni.json.txt fi.i18n.json.txt en.i18n.json.txt

Added templates from .meteor-kitchen.../bootstrap:

data_view.html.txt register.html.txt login.html.txt forgot_password.html.txt change_pass.html.txt

Example localised invoices app at http://i18n-generator-invoices.meteor.com Note: Currently Handlebars cannot be used in <head><title> see https://github.com/meteor/meteor/issues/266

perak commented 8 years ago

@ljack thanks for this. Maybe we also should consider setting date format differently for each language.

I didn't localised MK app before, so I don't have experience to share (I localised just one application but that was manually written - not generated).

ljack commented 8 years ago

@perak Ah, thanks for remembering to localise dates too ;)

Gave date localisation a quick look and tried to implement straight by adding tap:i18n helper into the date field, but..

    "name": "dueDate",
                        "title": "{{_ 'dueDate'}}",
                        "type": "date",
                        "format": "{{_ 'dueDate_format'}}",
                        "exportable": true,
                        "input": "datepicker"
                    },

doesn't seem to work properly: generated html

        <td>
            {{formatDate dueDate '{{_ 'dueDate_format'}}'}}
        </td>

which is invalid

   While processing files with templating (for target web.browser):
   client/views/invoices/details/details.html:93: Expected space
   ...etails.dueDate '{{_ 'dueDate_format'}}'}}...
   ^
   client/views/invoices/edit/edit.html:84: Expected space
   ...etails.dueDate '{{_ 'dueDate_format'}}'}}...
   ^
   client/views/invoices/invoices.html:148: Expected space
   ...atDate dueDate '{{_ 'dueDate_format'}}'}}...
   ^

=> Your application has errors. Waiting for file change.
perak commented 8 years ago

maybe to put double quotes (you cannot mix single quotes in thesame string....) ?

ljack commented 8 years ago

This package seems interesting. It even has translation GUI built in. http://messageformat.meteor.com/docs#quickstart https://github.com/gadicc/meteor-messageformat/tree/v2

and this one supports dates and times etc https://atmospherejs.com/benoitt/intl

Billybobbonnet commented 8 years ago

Hello,

I use an i18n solution in a project originally created using Meteor Kitchen. This is not a huge way to go to integrate it in an existing app (I have an issue opened here where I shared a link of a proof of concept website).

Note that you will need 3 things, that I like better to be separated:

If you want to have a look at the (very basic) demo app, check on my github account, it must be still there.