Add "Languages" page #1691

bvaughn · 2019-02-15T21:32:31Z

Add "Languages" header link and landing page.

Generating language data

To generate the YAML data, I ran the following script on isreacttranslatedyet.com:

let json = '';
Array.from(document.querySelectorAll("a")).forEach(link => {
  const header = link.querySelector("header");
  if (header) {
    const name = header.children[0].textContent;
    const translatedName = header.children[1].textContent;
    const code = header.children[2].textContent.match(/\(([^\.]+)/)[1];
    json += `\n- name: ${name}`;
    json += `\n  translated_name: ${translatedName}`;
    json += `\n  code: ${code}`;
    json += `\n  status: 0`;
  }
});
console.log(json);

Netlify and Cloudflare setup

Language	Code	Netlify	Cloudflare	Domain	GitHub
English	en	✅	✅	reactjs.org, en.reactjs.org	repo
Arabic	ar	✅	✅	ar.reactjs.org	repo
Azerbaijani	az	✅	✅	az.reactjs.org	repo
Bulgarian	bg	✅	✅	bg.reactjs.org	repo
Bengali	bn	✅	✅	bn.reactjs.org	repo
German	de	✅	✅	de.reactjs.org	repo
Spanish	es	✅	✅	es.reactjs.org	repo
Persian	fa	✅	✅	fa.reactjs.org	repo
French	fr	✅	✅	fr.reactjs.org	repo
Hebrew	he	✅	✅	he.reactjs.org	repo
Hindi	hi	✅	✅	hi.reactjs.org	repo
Armenian	hy	✅	✅	hy.reactjs.org	repo
Indonesian	id	✅	✅	id.reactjs.org	repo
Italian	it	✅	✅	it.reactjs.org	repo
Japanese	ja	✅	✅	ja.reactjs.org	repo
Korean	ko	✅	✅	ko.reactjs.org	repo
Malayalam	ml	✅	✅	ml.reactjs.org	repo
Nepali	ne	✅	✅	ne.reactjs.org	repo
Dutch	nl	✅	✅	nl.reactjs.org	repo
Polish	pl	✅	✅	pl.reactjs.org	repo
Portuguese (Brazil)	pt-br	✅	✅	pt-br.reactjs.org	repo
Portuguese (Portugal)	pt-pt	✅	✅	pt-pt.reactjs.org	repo
Romanian	ro	✅	✅	ro.reactjs.org	repo
Russian	ru	✅	✅	ru.reactjs.org	repo
Sinhala	si	✅	✅	si.reactjs.org	repo
Tamil	ta	✅	✅	ta.reactjs.org	repo
Turkish	tr	✅	✅	tr.reactjs.org	repo
Ukrainian	uk	✅	✅	uk.reactjs.org	repo
Uzbek	uz	✅	✅	uz.reactjs.org	repo
Vietnamese	vi	✅	✅	vi.reactjs.org	repo
Simplified Chinese	zh-hans	✅	✅	zh-hans.reactjs.org	repo
Traditional Chinese	zh-hant	✅	✅	zh-hant.reactjs.org	repo

reactjs-bot · 2019-02-15T21:37:54Z

Deploy preview for reactjs ready!

Built with commit 7c80589

https://deploy-preview-1691--reactjs.netlify.com

saranshkataria · 2019-02-16T01:36:18Z

Wouldn't it be better to redirect to the language based on the browser one? Just a thought

bvaughn · 2019-02-16T05:37:33Z

Even if we added some sort of language detection/redirect, we'd still want to offer some mechanism for manually selecting a language (not to mention the contribution links) 😄

src/components/LayoutHeader/Header.js

content/languages.yml

src/pages/languages.js

tesseralis · 2019-02-16T06:30:36Z

src/pages/languages.js

+            </ul>
+
+            <p>
+              Don't see your language above?{' '}


I'd point the link to here since that's where the actual instructions are.

Cool. Thanks.

src/pages/languages.js

ivandevp

Hey @bvaughn, there's a typo in variable naming 😃

bvaughn · 2019-02-16T16:51:22Z

Thanks. Fixed the typo~

tesseralis · 2019-02-17T22:47:58Z

src/pages/languages.js

+    <div css={{marginTop: 10}}>
+      <a
+        css={{
+          fontSize: 12,


I'd make this bigger, maybe 14/16px?

bvaughn · 2019-02-18T06:33:17Z

Added a translation icon beside the english text "Languages" and made sure that it's still visible, even on mobile layout.

tesseralis · 2019-02-18T23:53:25Z

Oh! Should probably include english in the list :)

bvaughn · 2019-02-19T18:25:47Z

Psst ~ https://es.reactjs.org/

tesseralis · 2019-02-19T18:54:06Z

content/languages.yml

+  code: de
+  is_completed: false
+- name: Spanish
+  translated_name: Español


English goes here!

We could ask the translations to do it (add english and remove their language from the list) but that’s a lot of redundant effort

tesseralis · 2019-02-19T18:55:15Z

content/languages.yml

+  is_completed: false
+- name: Japanese
+  translated_name: 日本語
+  code: ja


Technically Japanese and Brazillian Portuguese aren’t completely ready yet so I’d change these to false for now.

What's the threshold? I don't think they need to be "completely ready".

I guess we can bucket things into three groups:

Completed (95%+): Show language subdomain and "contribute" links

Partly translated (25%-95%): Show language subdomain and "contribute" links

In-progress (< 25%): Show "contribute" links

The question is what should those thresholds be?

The “100%” is for a “core” subset of pages defined by Dan (home page, tutorial, basics, apis). For example, some of the Spanish hooks docs aren’t done yet but it”s still 100% since it finished the core. Japanese and Portuguese are at around 70% on those (Jp doesn’t have the tutorial yet). Plus, there are final tasks like checking for consistency of terminology that need to be done before marking as complete (which I’m going through with Spanish right now)

That's a little more information than I had before, but I think it's still a bit vague to me. Is this written down somewhere in a more objective format, that we can refer to if we need to know which bucket a given subdomain falls into?

I picked some somewhat arbitrary % thresholds for now (specified via inline comments).

@gaearon what do you think?

At first look, I think the proposed categories are maybe too fine grained.

I don't think it's necessary (or all that helpful) to distinguish between released, complete, and complete+. I also don't really want to have to move sites around between those categories each time we make significant changes to core pages.

Similarly, I'm not sure there's much value in distinguishing between "in-progress" and lesser translated states. I think it's worth showing all translations so that we direct potential contributors to them. I think it is important to indicate "this is not done yet" so we don't get people's hopes up for nothing– but I think the current 3 enums already do this.

@bvaughn It wouldn't be different sections for "complete"/"complete+" stuff and we don't have to add it in now. It's morel like... giving maintainers a gold star to encourage them to go beyond the core pages of translations.

In that case I'd rather have just "released" and "in progress", without an arbitrary cut-off point. That might be the best option.

But I also want @gaearon to weigh in.

Seems like you two agree on the number of sections on the page but @tesseralis wants to add extra “distinguishing” marks to some translations? I’d say it’s fine to leave it out of the MVP and add a bit later.

Fine by me. I added the extra steps to isreactreadyyet.com since it's easier to verify those :)

bvaughn · 2019-02-19T19:14:56Z

I'm going to go through and setup all of the Netlify pages and subdomains now. We don't have to link to them on reactjs.org yet, but I think it's good to have them accessible for people working on the translations, and I'd like to get them out of the way in a big batch.

complete, partially translated, and needs contributors

tesseralis · 2019-02-19T23:09:45Z

@bvaughn while the pace of new languages has decressed a lot, what’s the plan for setting up subdomains for any new translations? Is there going to be s plan other than ‘ping Bryan at some point’?

bvaughn · 2019-02-19T23:28:07Z

Okay. I've setup the Netlify integrations and and DNS records for the 3 new active subdomains (es, ja, and pt-br). When we should we merge this?

bvaughn · 2019-02-19T23:29:32Z

while the pace of new languages has decressed a lot, what’s the plan for setting up subdomains for any new translations? Is there going to be s plan other than ‘ping Bryan at some point’?

I've documented this process internally so hopefully other React core members can help do at least the Netlify portion of the setup. Working to expand the list of people who can also do the DNS bit.

For now though, I'll have to be involved.

I've added a table (to the description of this PR) that tracks that domain status for each of the languages. I'll be gradually adding them all over the next few days.

tesseralis · 2019-02-20T00:40:51Z

content/languages.yml

+# Status enums indicate what percentage of "core" content has been translated:
+# 0: Incomplete (0–49%)
+# 1: Partially complete (50–94%)
+# 2: Complete (95–100%)


any reason we're using enums instead of strings (incomplete partial complete, etc.)?

Because I think the meaning of string labels is ambiguous ("incomplete" and "partial" are synonymous). So I choose a numeric value that at least indicates progression (1 is more complete than 0, 2 is more complete than 1).

bvaughn · 2019-02-20T15:47:45Z

My gut tells me that what we have in this PR is good enough for MVP, and I have a lot of other things to work on– so unless something small and important needs tweaking, I think I'm going to let this sit until we're ready to merge it and move on to other tasks~ 😄

bvaughn · 2019-02-20T21:02:39Z

I'm turning off Cloudflare SSL protection for now in favor of using Netlify and Let's Encrypt, because Netlify will handle the auto redirect from HTTP to HTTPS that way. There may be some short disruption where HTTPS doesn't work.

bvaughn · 2019-02-20T21:31:38Z

Ok. All domains should be good to go with HTTPS redirects now

tesseralis · 2019-02-21T05:57:50Z

src/pages/languages.js

+          css={{
+            fontSize: 12,
+          }}
+          href={`https://github.com/reactjs/${prefix}reactjs.org/`}


Maybe it's better to link to the progress issue for each language since it has the actual instructions for contributing.

It's going to be issue #1 for all languages (since it's auto-generated) except for Spanish, Japanese, and Simplified Chinese, for which it's #4 by a lucky coincidence.

I think linking to the main repo makes more sense. The progress issue seems more transient. I think the repos should rely on something more standard (like the readme or CONTRIBUTING.md) for guidelines rather than a specific issue.

I think i'm going to leave this as-is.

tesseralis · 2019-02-23T04:43:05Z

@bvaughn I think we're ready to merge this. Only outstanding tasks are:

switch back to two sections
(optionally) link to the progress issue in the "Contribute" link

bvaughn · 2019-02-23T17:44:03Z

Yeah, I think we're ready too– but I've been holding off on the blog post PR /pull/1721

Added language selector page

c737cd4

bvaughn requested review from gaearon and tesseralis February 15, 2019 21:32

facebook-github-bot added the CLA Signed label Feb 15, 2019

tesseralis requested changes Feb 16, 2019

View reviewed changes

PR nits

d2d54b6

ivandevp reviewed Feb 16, 2019

View reviewed changes

src/pages/languages.js Show resolved Hide resolved

ivandevp reviewed Feb 16, 2019

View reviewed changes

Fix typo in variable name

43a4477

tesseralis mentioned this pull request Feb 16, 2019

reactjs.org Localization Forks #1605

Closed

8 tasks

Added language icon. Show search icon in mobile.

88ea9c8

tesseralis reviewed Feb 17, 2019

View reviewed changes

tesseralis requested changes Feb 19, 2019

View reviewed changes

Brian Vaughn added 2 commits February 19, 2019 14:03

Tweaked header alignment

cba5894

Split languages into 3 categories based on progress:

14381e3

complete, partially translated, and needs contributors

Lower-cased pt-* language codes

287521c

bvaughn changed the title ~~Added language selector page~~ Add "Languages" page Feb 19, 2019

tesseralis reviewed Feb 20, 2019

View reviewed changes

Re-added locale sort

dfa0fc5

tesseralis mentioned this pull request Feb 21, 2019

New blog post for translations #1721

Merged

tesseralis reviewed Feb 21, 2019

View reviewed changes

Renamed 'Partially Translated' header to 'In Progress'

7c80589

gaearon merged commit 07253c8 into reactjs:master Feb 23, 2019

bvaughn deleted the languages-selector branch February 23, 2019 20:17

Add "Languages" page #1691

Add "Languages" page #1691

Conversation

bvaughn commented Feb 15, 2019 • edited Loading

Generating language data

Netlify and Cloudflare setup

reactjs-bot commented Feb 15, 2019 • edited Loading

saranshkataria commented Feb 16, 2019

bvaughn commented Feb 16, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ivandevp left a comment

Choose a reason for hiding this comment

bvaughn commented Feb 16, 2019

tesseralis Feb 17, 2019 • edited Loading

Choose a reason for hiding this comment

bvaughn commented Feb 18, 2019

tesseralis commented Feb 18, 2019

bvaughn commented Feb 19, 2019 • edited Loading

Choose a reason for hiding this comment

tesseralis Feb 19, 2019 • edited Loading

Choose a reason for hiding this comment

tesseralis Feb 19, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Feb 19, 2019

tesseralis commented Feb 19, 2019

bvaughn commented Feb 19, 2019

bvaughn commented Feb 19, 2019 • edited Loading

tesseralis Feb 20, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Feb 20, 2019

bvaughn commented Feb 20, 2019

bvaughn commented Feb 20, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tesseralis commented Feb 23, 2019

bvaughn commented Feb 23, 2019

bvaughn commented Feb 15, 2019 •

edited

Loading

reactjs-bot commented Feb 15, 2019 •

edited

Loading

tesseralis Feb 17, 2019 •

edited

Loading

bvaughn commented Feb 19, 2019 •

edited

Loading

tesseralis Feb 19, 2019 •

edited

Loading

tesseralis Feb 19, 2019 •

edited

Loading

bvaughn commented Feb 19, 2019 •

edited

Loading

tesseralis Feb 20, 2019 •

edited

Loading