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
Merged

Add "Languages" page #1691

merged 9 commits into from Feb 23, 2019

Conversation

@bvaughn
Copy link
Contributor

@bvaughn bvaughn 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
Copy link

@reactjs-bot reactjs-bot commented Feb 15, 2019

Deploy preview for reactjs ready!

Built with commit 7c80589

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

Loading

@saranshkataria
Copy link
Member

@saranshkataria saranshkataria commented Feb 16, 2019

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

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn 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) 😄

Loading

src/components/LayoutHeader/Header.js Outdated Show resolved Hide resolved
Loading
content/languages.yml Outdated Show resolved Hide resolved
Loading
src/pages/languages.js Show resolved Hide resolved
Loading
</ul>

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

@tesseralis tesseralis Feb 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Thanks.

Loading

src/pages/languages.js Show resolved Hide resolved
Loading
Copy link

@ivandevp ivandevp left a comment

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

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn commented Feb 16, 2019

Thanks. Fixed the typo~

Loading

@tesseralis tesseralis mentioned this pull request Feb 16, 2019
8 tasks
<div css={{marginTop: 10}}>
<a
css={{
fontSize: 12,
Copy link
Member

@tesseralis tesseralis Feb 17, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

@bvaughn
Copy link
Contributor Author

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

Loading

@tesseralis
Copy link
Member

@tesseralis tesseralis commented Feb 18, 2019

Oh! Should probably include english in the list :)

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn commented Feb 19, 2019

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

Loading

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

@tesseralis tesseralis Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

English goes here!

Loading

Copy link
Member

@tesseralis tesseralis Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

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

@tesseralis tesseralis Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Loading

Copy link
Member

@tesseralis tesseralis Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

Copy link
Member

@tesseralis tesseralis Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon what do you think?

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Loading

Copy link
Member

@tesseralis tesseralis Feb 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

Copy link
Member

@gaearon gaearon Feb 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Loading

Copy link
Member

@tesseralis tesseralis Feb 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

@bvaughn
Copy link
Contributor Author

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

Loading

bvaughn added 2 commits Feb 19, 2019
complete, partially translated, and needs contributors
@tesseralis
Copy link
Member

@tesseralis tesseralis 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’?

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn 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?

Loading

@bvaughn
Copy link
Contributor Author

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

Loading

@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%)
Copy link
Member

@tesseralis tesseralis Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn 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~ 😄

Loading

@bvaughn
Copy link
Contributor Author

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

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn commented Feb 20, 2019

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

Loading

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

@tesseralis tesseralis Feb 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Loading

Copy link
Contributor Author

@bvaughn bvaughn Feb 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Loading

@tesseralis
Copy link
Member

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

Loading

@bvaughn
Copy link
Contributor Author

@bvaughn bvaughn commented Feb 23, 2019

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

Loading

@gaearon gaearon merged commit 07253c8 into reactjs:master Feb 23, 2019
1 check passed
Loading
@bvaughn bvaughn deleted the 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
Linked issues

Successfully merging this pull request may close these issues.

None yet

7 participants