Skip to content

Integrate with Crowdin localization project #82

Description

@bvaughn

Migrated from react/react/issues/8063

Coordinate with docs translators via @ericnakagawa

This issue involves multiple steps:

  • Integrate with Crowdin to download localized content
  • Generate localized URLs using said content
  • Automatically sync English content changes from GitHub to Crowdin (see this comment and this repo)
  • Maintain backwards compatibility for all current (non-localized, English) links
  • Add localization toggle to header
  • Update the "Edit this page" link to point to GitHub for English pages and Crowdin for other languages.

Integrate with Crowdin

This could be done via a custom Gatsby plug-in. We've already written a couple. (It would be nice to work with @KyleAMathews to share this plug-in back with Gatsby so that other users could benefit from it as well.)

If we run into any performance problems, @ericnakagawa has volunteered to work with Netlify and Crowdin to simplify or speed up this syncing process. Ideally this sync process will be fast enough to allow Netlify's PR previews to also be used to test localized builds of the site.

Misc thoughts and questions

  • In the case of non-localized content, Crowdin serves English as fallback.
  • How can site consume list of active locales? Is there a Crowdin API?
  • How does this impact urls (eg /docs/<file>, /docs/<lang>/<file>)?

Activity

  1. self-assigned this
    on Oct 8, 2017
  2. KyleAMathews commented on Oct 9, 2017

    @KyleAMathews
    Contributor

    Happy to help create a Gatsby source plugin for Crowdin! That'd be really powerful. And a lot of people would use it including sooner than later gatsbyjs.org

    From a bit of research, it looks like it'd be pretty easy to pull data using their API:

    I spent a bunch of time adding localization support to https://www.gatsbyjs.org/packages/gatsby-source-contentful/ as well so have some opinions on this. See the example site for Contentful + its source

  3. bvaughn commented on Oct 9, 2017

    @bvaughn
    ContributorAuthor

    Fantastic 😄 There's a good chance we'll end up collaborating on this soon then.

  4. Daniel15 commented on Oct 18, 2017

    @Daniel15
    Contributor

    Netlify also has a way of doing redirects based on Accept-Language header and GeoIP. For example, if someone from Italy (or someone with their browser or OS set to request Italian content) visits the home page and they don't have a language cookie already set, we can automatically redirect to the Italian version. We use this on the Yarn site - You can look at how Yarn does it for inspiration

    How does this impact urls (eg /docs/, /docs//)?

    I'd suggest /<lang>/ (eg. /<lang>/docs/<file>), this is consistent with other Facebook projects that use localization:
    https://yarnpkg.com/en/docs/getting-started
    https://flow.org/en/docs/getting-started/

    If we run into any performance problems, @ericnakagawa has volunteered to work with Netlify and Crowdin to simplify or speed up this syncing process. Ideally this sync process will be fast enough to allow Netlify's PR previews to also be used to test localized builds of the site.

    We have perf issues with the Yarn site, but a lot of it is because we're using Jekyll. Most of the build time is actually the Jekyll build time rather than CrowdIn. We had a prototype using Hugo that was much faster. I don't think CrowdIn takes a significant amount of time there.

    From a bit of research, it looks like it'd be pretty easy to pull data using their API:

    Would the React site actually need a custom API integration? It could be useful, but CrowdIn has a CLI tool (https://support.crowdin.com/cli-tool/) which we might be able to use with less effort. For Yarn we just run crowdin-cli download -b master to download all the localized files as part of the build (in that case, there's a bunch of Markdown files as well as some yml files for language strings). Then you just build the site like normal and everything just works, as long as the files are in the correct locations.

  5. bvaughn commented on Oct 18, 2017

    @bvaughn
    ContributorAuthor

    How does this impact urls (eg /docs/, /docs//)?

    I'd suggest // (eg. //docs/), this is consistent with other Facebook projects that use localization:

    Don't have time to fully digest this response now- but wanted to mention that we should ensure whatever change we make does not break pre-existing links (like how links broke for Jest).

  6. KyleAMathews commented on Oct 18, 2017

    @KyleAMathews
    Contributor

    Would the React site actually need a custom API integration

    It doesn't need it but it seems simpler perhaps to just query the data through graphql instead of writing it out first then pulling it in.

    But yeah, definitely more straightforward to just use the cli.

    Would you checkin the translated content?

  7. Daniel15 commented on Oct 18, 2017

    @Daniel15
    Contributor

    but wanted to mention that we should ensure whatever change we make does not break pre-existing links

    Jest is limited in what it can do, because it's using GitHub Pages. With Netlify, you can generate some redirects as part of the build. Just need to redirect "raw" URLs (/docs/foo) to the localized URL (/en/docs/foo), either with /en/ hard-coded or using Netlify's language redirects that I mentioned earlier (so it'd redirect /docs/foo to /<user's preferred language>/docs/foo).

    Check it out with Yarn: https://yarnpkg.com/docs/getting-started redirects to the right place. :)

    Would you checkin the translated content?

    We don't for Yarn. It's pulled in as part of the build process for the site. Since CrowdIn tracks the history for the translations, we didn't really need to also have Git track it.

    Some sites do commit the translated files though. Up to you - Either way is fine.

  8. bvaughn commented on Oct 18, 2017

    @bvaughn
    ContributorAuthor

    Would you checkin the translated content?

    No

  9. bvaughn commented on Oct 18, 2017

    @bvaughn
    ContributorAuthor

    or using Netlify's language redirects that I mentioned earlier (so it'd redirect /docs/foo to /<user's preferred language>/docs/foo).

    Cool! 👍

  10. Daniel15 commented on Oct 18, 2017

    @Daniel15
    Contributor

    Here's how the Yarn site builds all the redirects from non-localized URLs to localized URLs: https://github.com/yarnpkg/website/blob/master/_redirects#L48-L70 (this would also be how you handle your redirects from 'old' URLs to new localized URLs). Unfortunately the Yarn one is super difficult to understand because it's using the Jekyll templating syntax. Somehow @thejameskyle got it working though. You could likely make a nicer JS script to do the same thing for the React site.

    The resulting redirects file looks something like this:

    /docs/cli/add/  /en/docs/cli/add/  302  Language=en
    /docs/cli/add/  /fr/docs/cli/add/  302  Language=fr
    /docs/cli/add/  /pt-BR/docs/cli/add/  302  Language=pt-br
    /docs/cli/add/  /zh-Hans/docs/cli/add/  302  Language=zh-cn
    

    Here's the entire language redirects section: https://gist.github.com/Daniel15/d84b39e8a260ee2a7d627751d015181b

    Docs: https://www.netlify.com/docs/redirects/#geoip-and-language-based-redirects

    Might be able to use a regex or placeholders or something rather than having to generate all the redirects like that.

  11. KyleAMathews commented on Oct 18, 2017

    @KyleAMathews
    Contributor

    @bvaughn wrote a nice redirect API for Gatsby + added it to gatsby-plugin-netlify so this setting up redirects would be pretty easy :-)

  12. smikitky commented on Oct 19, 2017

    @smikitky
    Member

    Hi, the official doc in English is being updated frequently, but the contents in Crowdin seems to be out of sync with the newest doc. I think it's still based on the doc several months ago, and I'm seeing no doc for error boundaries ready for translation.

    I'm new to Crowdin, but I want to believe there is a way to merge the updates in the original doc and enable people to translate the changed part incrementally. Is there any plan for this? I'd rather not see an overwhelming one-time update of the original doc.

  13. 25 remaining items

  14. clemmy commented on Dec 31, 2017

    @clemmy
    Contributor

    Hey @techhtml, I believe your translations need to be reviewed and approved by an admin of the React project on Crowdin before your changes appear.

  15. techhtml commented on Jan 1, 2018

    @techhtml

    @clemmy of course. Other Korean developers will help reviews my translations.

  16. smikitky commented on Jan 24, 2018

    @smikitky
    Member

    Hi, I logged in to Crowdin after a while, and found the "translated" percentage of Japanese has dropped to 65%. It was 100% (i.e., translation completed) in September last year, but no one but translators themselves had a chance to read the translated docs :)

    So can someone set up a timeline and a guideline for this on which we can rely on? You have already gathered dozens of volunteers at Crowdin even though you have not officially called for volunteers. Has the localization project started officially, in the first place? Are you going to call for more collaborators, in the blog for example? When are we expected to finish the translation? I don't think the entire Crowdin project may be abandoned, but since there is no timeline nor document to guide the translators, I don't know when we can restart translating to keep up with the current doc. I don't even know what those "master" and "test-17" folders mean. (BTW, I just found the translation percentage for the "master" folder is now 1%... Does this mean almost all the effort we already made on the "old" master is going to disappear soon?)

    image

    cc @ericnakagawa

  17. smikitky commented on Jan 8, 2019

    @smikitky
    Member

    Can we expect some progress before the release of React hooks? For now, articles related to hooks are not even listed in the Crowdin repository, and it appears to me that this effort has been half-abandoned recently. It's sad to see developers in my country have to depend on fairly insufficient personal blog articles when such a big change is approaching to the ecosystem.

    By the way, does anyone know why materials in Crowdin are in HTML format rather than Markdown? HTML tags, especially all those <code>s, are very cumbersome to handle.

    ping @bvaughn @ericnakagawa

  18. bvaughn commented on Jan 8, 2019

    @bvaughn
    ContributorAuthor

    Sorry, I don't have any updates/estimates for this. The core team is spread very thin and I don't think anyone owns this effort at the moment 😞

  19. smikitky commented on Jan 9, 2019

    @smikitky
    Member

    I see. Meanwhile, is it possible to allow translators to download/export their existing contributions from Crowdin? If I understand correctly, this can be done by changing the project settings. Then each translator may host the translated version elsewhere on the internet, say, my GH pages.

  20. bvaughn commented on Jan 9, 2019

    @bvaughn
    ContributorAuthor

    That's something I think @ericnakagawa would have to manage. I don't know much about our Crowdin setup. Not even sure if I would have the necessary permissions.

  21. gaearon commented on Jan 9, 2019

    @gaearon
    Member

    To give an update — if everything works out, we expect a person to jump on finishing the integration in one of the next weeks. Can't promise to get it done before Hooks are stable though but it's on our radar.

  22. smikitky commented on Jan 11, 2019

    @smikitky
    Member

    For the record, here are some problems I'm currently seeing as a translator.

    • Translations are not Markdown-based but HTML-based. I believe all translated materials should be version-controlled.
    • There are several "root" directories on the Crowdin repo, and it is not clear which to work on.
    • New commits to the original doc are not automatically synched. For example there are no articles about Hooks yet in the Crowdin repository.
    • Some elements in the front matter (document IDs, etc) are wrongly marked as translatable.
    • Some code examples are marked as translatable and some are not.
    • This may be specific to CJK languages, but italics are not always rendered properly for those languages, so we need a different CSS styles for <em>'s.
  23. Daniel15 commented on Jan 11, 2019

    @Daniel15
    Contributor

    Translations are not Markdown-based but HTML-based.

    For Yarn we use Markdown in CrowdIn (at https://i18n.yarnpkg.com/), so this might just be an issue with how it's configured for React. Should be straightforward to fix it 😃

  24. tesseralis commented on Jan 30, 2019

    @tesseralis
    Contributor

    @smikitky We've come up with an alternate approach here: #1605

    Does this resolve any of your issues working with Crowdin, and would you be interested in working with us on maintaining the Japanese fork? We should be able to use the work that you and others have done so far on Crowdin as a baseline.

  25. gaearon commented on Feb 25, 2019

    @gaearon
    Member
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions