Vue i18n POC

[mhelmetag]

Context

Just toying around with Vue i18n to see if that would work for internationalization. Seems like it would do the trick for a relatively simple web app like this one.

Thoughts?

I haven't played around with Vue much so I'm definitely open to trying other less Vue specific i18n solutions.

In this screenshot, there's basically no change but... the "Watchfaces" and "Apps" texts are using the "en" translation strings instead of static strings in the template.

Testing

• Navbar
• AppSlider
• AppTitleBar
• CardCollection
• GetAppButton

[sGerli]

We could try extracting the translations from https://github.com/pebble-dev/pebble-appstore-legacy/tree/master/spa
Or we could write our own for at least those locales.

[mhelmetag]

Oh rad! That's a great place to start. I'll take a look soon.

[mhelmetag]

Yikes... these script files are crazy! It looks like the whole minified app for each locale.

So... I think it's lucky that the i18n info is in a service.strings thing which is easily searchable and then, when extracted by itself into JS, easily formattable. That said... I'm not sure how to evaluate this blob and extract these programmatically but it's only about 10 locales so it's not hard to do.

I think the "hard" part will be matching up the translations in the legacy app with the string in the new app. Luckily I only see about 100 strings (and I doubt we implement all of them) so... can't be terrible. I'll try to go through it for English first.

[mhelmetag]

So I've found a couple of strings that don't seem to be in the legacy pebble app so I think those will have to be translated on our own.

[sGerli]

Yeah sure, I think the best way is to do it manually and then figure out the keys using the english version. Then check what we need and take what's useful and check if anything on our web-app needs to be changed or translated because it's different from what we have.

[mhelmetag]

I think this is a pretty good example of a common locale file, individual component locales, interpolation in locale strings and locales in directive attributes (not really sure if that's that's the right phrase; I mean things like ok-title="Blah" but having a translation function in there like ok-title="$t('blah')").

IMO, I think this a good place to start and we can iterate on this. I might just need help testing all components here.

[mhelmetag]

@sGerli , are you thinking that this PR should have all english strings put into i18n before merging? Or even more than that?

[mhelmetag]

Well... it was fun but this doesn't seem to be getting much traction so... I'll close this out for now.