feat: i18n #772

hacdias · 2018-09-01T06:55:00Z

Ref.: #675

This doesn't add translations for Explore view since it will be used as an external component. /cc @olizilla

hacdias · 2018-09-02T08:29:32Z

So, I've started using react-i18next for this WebUI and I'm using namespaces to divide the translations into files so each page has its own translation file. It might be useful if we subdivide each part into a different web app.

@ipfs-shipyard/gui could you take a look before I keep going? Do you agree with this approach?

hacdias · 2018-09-03T10:53:10Z

Well, the biggest file would be files.json and some, like peers and status' would have barely ten lines. Maybe it's actually better to merge them. Opinions?

fsdiogo · 2018-09-03T11:02:20Z

I'd say to keep it in separate files anyway. In the future it could explode translation-wise and that way we'll be ready 🙂

hacdias · 2018-09-03T11:07:15Z

@fsdiogo yup, that could also happen! I'll keep them separate then 😄 It will also be easier to split the Web UI into multiple smaller web apps.

hacdias · 2018-09-03T11:36:57Z

I think this is basically done. Doesn't seem to be any string left.

lidel

I think the layout is good: all namespaces are kept in public/locales/en which works well as a source for PR-based translations, and namespacing makes it easier for people to submit translations via PRs.

Just for the record, there is something to be aware when it comes to i18next: IIUC the project works out-of-the-box only with their own translation website, https://locize.com: i18next/react-i18next#472 (comment).

I was unable to find native support for i18next translation format at Transifex (which I am leaning towards, here is why). People were successful with using Transifex+i18next-gettext-converter which has a support for plurals for most of languages, but there are edge cases with known issues which may produce frustrating bugs. I feel we could try to blackbox the sync by creating 1 shell script that takes care of conversion and runs at jenkins + is run manually before release, but this need for additional layer of indirection if a sort-of a warning flag.

Update: nvm, i18next supports ICU after all!

The alternative, react-intl is a part of FormatJS which is aligned with ECMAScript Internationalization API (ECMA-402), Unicode CLDR, and ICU Message syntax. ICU does not require additional conversion step and is supported out of the box by Transifex and other crowdsourcing websites. It kinda feels more future-proof, when looked at from that angle, but I am not sure if its enough to move back.

@hacdias did i18next made a big improvement over react-int for you as a dev?
If we consolidate translations under GUI of Transifex, then the "ugliness" of ICU format may not be that big of a deal – translators will not use it directly, and use of industry standard may save us some headache in the long run.

hacdias · 2018-09-05T09:09:58Z

@lidel @olizilla should I start working on moving this to ICU format already?

olizilla · 2018-09-05T09:18:52Z

@hacdias what are your thoughts on @lidel's question:

did i18next made a big improvement over react-int for you as a dev?
If we consolidate translations under GUI of Transifex, then the "ugliness" of ICU format may not be that big of a deal – translators will not use it directly, and use of industry standard may save us some headache in the long run.

hacdias · 2018-09-05T09:25:07Z

@olizilla for me, react-i18next was much easier to use and felt more natural. Maybe I tried react-intl the hardest way. One thing I didn't like about it was this:

 <FormattedMessage
                    id="welcome"
                    defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                      one {message}
                      other {messages}
                    }`}
                    values={{name: <b>{name}</b>, unreadCount}}
                />

Do you see the defaultMessage there? We need to pass it through props to the component! That way the English translation wouldn't go to a JSON file. It would be scattered across our source files.

With i18next, so far, so good.

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

hacdias · 2018-09-05T18:41:58Z

@lidel @olizilla just moved the formats to ICU. It was actually a simple migration since we didn't use much plurals. Take a look at the locales directory and see how they are.

I'm up to merging this PR. Feedback?

EXPLORE is not translated.

I'd like to do a PT translation after this is merged.

Docs: https://docs.transifex.com/client/client-configuration#section-tx-config Using Commandline Client: https://docs.transifex.com/integrations/github#section-using-the-client

lidel · 2018-09-06T00:50:01Z

Thank you @hacdias ! It is 👌 and I managed to set up Transifex as well: added the configuration file for Transifex (.tx/config) and uploaded existing source files to the website: https://www.transifex.com/ipfs/ipfs-webui ✨

If you want we can smoke-test translation process before we merge this.:

Start Translating
1. Create Transifex account
2. Go to https://www.transifex.com/ipfs/ipfs-webui/translate/#pt and try translating some strings for PT locale
  - ping me if you don't have access to the team
Sync Translations
1. Install and set up command-line client (tx) – see docs below
2. To download new translations from Transifex: tx pull -a
  - this should create/update files in public/locales/* that need to be commited
  - if a new language is created, remember to add it to src/i18n.js
3. (optional) upload updated source locale (en): tx push -s
  - (I already did that for this branch, so you can skip it)
  - This will be automated after revamp is moved to master, for now it is a manual step

Transifex 101

Installing the Transifex Client
Understanding .tx/config file
Manual sync via Transifex Client
- Using Transifex with GitHub in Your Development Workflow
  - Syncing a local project to Transifex with the Transifex Client

Transifex does not support full ICU when it is in JSON format, this commit changes it to conform to one described at: https://docs.transifex.com/formats/json#plurals-support

lidel · 2018-09-06T01:56:29Z

public/locales/en/files.json

+    "descriptionFolder": "Choose a new name for this folder."
+  },
+  "deleteModal": {
+    "titleItem": "{count, plural, one {Delete Item} other {Delete {count} Items}}",


FYI I had to tweak the ICU format used for plurals because Transifex supports only a subset of ICU when JSON files are used (I think the full support is in gettext):

https://docs.transifex.com/formats/json#plurals-support

Anyway, it now renders correctly. Below is an example of Transifex translation UI for Polish, where we have more than two plural forms 🙃

Cool! Thanks 😄

lidel · 2018-09-06T01:57:02Z

public/locales/en/files.json

+  "breadcrumbs": "Breadcrumbs",
+  "finished": "Finished!",
+  "totalSize": "Total size: {size}",
+  "filesSelected": "{count, plural, one {File selected} other {Files selected}}",


I also changed this one, because it supported only 2 plural forms, now it is universal :)

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

hacdias · 2018-09-06T11:22:41Z

@lidel I think we're ready for now 😄 Let's merge it?

olizilla · 2018-09-06T11:30:42Z

💯 🌟

@lidel

@lidel I stole some of your words on #772! Could you take a look and add/update anything if you feel to?

hacdias changed the title ~~[wip] start i18n~~ feat: i18n Sep 3, 2018

hacdias requested review from olizilla, fsdiogo and lidel September 3, 2018 11:37

lidel reviewed Sep 3, 2018

View reviewed changes

lidel mentioned this pull request Sep 3, 2018

Meta: Translation Project for IPFS GUIs ipfs/ipfs-gui#50

Closed

8 tasks

hacdias force-pushed the i18n branch from f2602c5 to 8dfb236 Compare September 5, 2018 09:11

hacdias added 9 commits September 5, 2018 19:05

start i18n

1f2335d

finish files translation

6a087ae

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

add prop verification

6f3fa5f

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

translate settings

659d48f

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

add file line endings

01a5f75

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

i18n navbar

3064cfb

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

translate peers apge

f2bbc47

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

translate status

35e12b0

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

feat: move to ICU format

5b5f83e

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

hacdias force-pushed the i18n branch from 8dfb236 to 5b5f83e Compare September 5, 2018 18:39

feat: add Transifex config file

90f5aa9

Docs: https://docs.transifex.com/client/client-configuration#section-tx-config Using Commandline Client: https://docs.transifex.com/integrations/github#section-using-the-client

fix(i18n): Transifex subset of JSON with ICU Plurals

5ca96f8

Transifex does not support full ICU when it is in JSON format, this commit changes it to conform to one described at: https://docs.transifex.com/formats/json#plurals-support

lidel approved these changes Sep 6, 2018

View reviewed changes

hacdias added 4 commits September 6, 2018 11:26

fix: translation to ICU

8b53cd1

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

feat: add dots on saving

73bd34c

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

feat: translations 💕

49db1bc

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

feat: add plural support

bcb2f45

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>

hacdias merged commit 9598b0c into revamp Sep 6, 2018

hacdias deleted the i18n branch September 6, 2018 11:28

hacdias mentioned this pull request Sep 6, 2018

docs: i18n #783

Merged

hacdias added a commit that referenced this pull request Sep 7, 2018

docs: i18n (#783)

ca8b761

@lidel I stole some of your words on #772! Could you take a look and add/update anything if you feel to?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: i18n #772

feat: i18n #772

hacdias commented Sep 1, 2018 •

edited

Loading

hacdias commented Sep 2, 2018

hacdias commented Sep 3, 2018 •

edited

Loading

fsdiogo commented Sep 3, 2018

hacdias commented Sep 3, 2018

hacdias commented Sep 3, 2018

lidel left a comment •

edited

Loading

hacdias commented Sep 5, 2018

olizilla commented Sep 5, 2018

hacdias commented Sep 5, 2018

hacdias commented Sep 5, 2018

lidel commented Sep 6, 2018 •

edited by hacdias

Loading

lidel Sep 6, 2018 •

edited

Loading

hacdias Sep 6, 2018

lidel Sep 6, 2018

hacdias commented Sep 6, 2018

olizilla commented Sep 6, 2018

feat: i18n #772

feat: i18n #772

Conversation

hacdias commented Sep 1, 2018 • edited Loading

hacdias commented Sep 2, 2018

hacdias commented Sep 3, 2018 • edited Loading

fsdiogo commented Sep 3, 2018

hacdias commented Sep 3, 2018

hacdias commented Sep 3, 2018

lidel left a comment • edited Loading

Choose a reason for hiding this comment

hacdias commented Sep 5, 2018

olizilla commented Sep 5, 2018

hacdias commented Sep 5, 2018

hacdias commented Sep 5, 2018

lidel commented Sep 6, 2018 • edited by hacdias Loading

Transifex 101

lidel Sep 6, 2018 • edited Loading

Choose a reason for hiding this comment

hacdias Sep 6, 2018

Choose a reason for hiding this comment

lidel Sep 6, 2018

Choose a reason for hiding this comment

hacdias commented Sep 6, 2018

olizilla commented Sep 6, 2018

hacdias commented Sep 1, 2018 •

edited

Loading

hacdias commented Sep 3, 2018 •

edited

Loading

lidel left a comment •

edited

Loading

lidel commented Sep 6, 2018 •

edited by hacdias

Loading

lidel Sep 6, 2018 •

edited

Loading