Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Languages" page #1691

Merged
merged 9 commits into from Feb 23, 2019

Conversation

@bvaughn
Copy link
Contributor

commented Feb 15, 2019

Add "Languages" header link and landing page.

You can see it here.

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

This comment has been minimized.

Copy link

commented Feb 15, 2019

Deploy preview for reactjs ready!

Built with commit 7c80589

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

@saranshkataria

This comment has been minimized.

Copy link
Member

commented Feb 16, 2019

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

@bvaughn

This comment has been minimized.

Copy link
Contributor Author

commented Feb 16, 2019

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 Outdated Show resolved Hide resolved
content/languages.yml Outdated Show resolved Hide resolved
src/pages/languages.js Show resolved Hide resolved
</ul>

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 16, 2019

Member

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

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 16, 2019

Author Contributor

Cool. Thanks.

@ivandevp
Copy link

left a comment

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

@bvaughn

This comment has been minimized.

Copy link
Contributor Author

commented Feb 16, 2019

Thanks. Fixed the typo~

@tesseralis tesseralis referenced this pull request Feb 16, 2019
8 of 8 tasks complete
<div css={{marginTop: 10}}>
<a
css={{
fontSize: 12,

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 17, 2019

Member

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

@bvaughn

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2019

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

screen shot 2019-02-17 at 10 32 56 pm

@tesseralis

This comment has been minimized.

Copy link
Member

commented Feb 18, 2019

Oh! Should probably include english in the list :)

@bvaughn

This comment has been minimized.

Copy link
Contributor Author

commented Feb 19, 2019

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

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 19, 2019

Member

English goes here!

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 19, 2019

Member

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

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 19, 2019

Member

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

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 19, 2019

Author Contributor

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?

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 19, 2019

Member

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)

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 19, 2019

Author Contributor

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?

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 19, 2019

Author Contributor

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 20, 2019

Member

@gaearon what do you think?

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 20, 2019

Author Contributor

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.

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 21, 2019

Member

@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.

This comment has been minimized.

Copy link
@gaearon

gaearon Feb 21, 2019

Member

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.

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 21, 2019

Member

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

@bvaughn

This comment has been minimized.

Copy link
Contributor Author

commented Feb 19, 2019

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.

bvaughn added some commits Feb 19, 2019

Split languages into 3 categories based on progress:
complete, partially translated, and needs contributors
@tesseralis

This comment has been minimized.

Copy link
Member

commented Feb 19, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 19, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 19, 2019

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.

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

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 20, 2019

Member

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

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 20, 2019

Author Contributor

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2019

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

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

This comment has been minimized.

Copy link
@tesseralis

tesseralis Feb 21, 2019

Member

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.

This comment has been minimized.

Copy link
@bvaughn

bvaughn Feb 23, 2019

Author Contributor

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

This comment has been minimized.

Copy link
Member

commented Feb 23, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 23, 2019

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

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

1 check passed

ci/circleci Your tests passed on CircleCI!
Details

@bvaughn bvaughn deleted the bvaughn:languages-selector branch Feb 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.