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
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions content/languages.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
# 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.)?

Copy link
Contributor Author

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


- name: English
translated_name: English
code: en
status: 2
- name: Arabic
translated_name: العربية
code: ar
status: 0
- name: Azerbaijani
translated_name: Azərbaycanca
code: az
status: 0
- name: Bulgarian
translated_name: Български
code: bg
status: 0
- name: Bengali
translated_name: বাংলা
code: bn
status: 0
- name: German
translated_name: Deutsch
code: de
status: 0
- name: Spanish
translated_name: Español
Copy link
Member

Choose a reason for hiding this comment

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

English goes here!

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

code: es
status: 2
- name: Persian
translated_name: فارسی
code: fa
status: 0
- name: French
translated_name: Français
code: fr
status: 0
- name: Hebrew
translated_name: עברית
code: he
status: 0
- name: Hindi
translated_name: हिन्दी
code: hi
status: 0
- name: Armenian
translated_name: Հայերեն
code: hy
status: 0
- name: Indonesian
translated_name: Bahasa Indonesia
code: id
status: 0
- name: Italian
translated_name: Italiano
code: it
status: 0
- 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.

Copy link
Contributor Author

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?

Copy link
Member

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)

Copy link
Contributor Author

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?

Copy link
Contributor Author

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

Copy link
Member

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?

Copy link
Contributor Author

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.

Copy link
Member

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.

Copy link
Member

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.

Copy link
Member

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

status: 1
- name: Korean
translated_name: 한국어
code: ko
status: 0
- name: Malayalam
translated_name: മലയാളം
code: ml
status: 0
- name: Nepali
translated_name: नेपाली
code: ne
status: 0
- name: Dutch
translated_name: Nederlands
code: nl
status: 0
- name: Polish
translated_name: Polski
code: pl
status: 0
- name: Portuguese (Brazil)
translated_name: Português do Brasil
code: pt-br
status: 1
- name: Portuguese (Portugal)
translated_name: Português europeu
code: pt-pt
status: 0
- name: Romanian
translated_name: Română
code: ro
status: 0
- name: Russian
translated_name: Русский
code: ru
status: 0
- name: Sinhala
translated_name: සිංහල
code: si
status: 0
- name: Tamil
translated_name: தமிழ்
code: ta
status: 0
- name: Turkish
translated_name: Türkçe
code: tr
status: 0
- name: Ukrainian
translated_name: Українська
code: uk
status: 0
- name: Uzbek
translated_name: Oʻzbekcha
code: uz
status: 0
- name: Vietnamese
translated_name: Tiếng Việt
code: vi
status: 0
- name: Simplified Chinese
translated_name: 简体中文
code: zh-hans
status: 0
- name: Traditional Chinese
translated_name: 繁體中文
code: zh-hant
status: 0
29 changes: 10 additions & 19 deletions src/components/LayoutHeader/DocSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,23 @@ class DocSearch extends Component<{}, State> {
flex: '0 0 auto',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: '0.5rem',
paddingRight: '0.5rem',
paddingLeft: '0.25rem',
paddingRight: '0.25rem',

[media.lessThan('small')]: {
justifyContent: 'flex-end',
},
[media.lessThan('large')]: {
justifyContent: 'flex-end',
marginRight: 10,
},
[media.between('small', 'medium')]: {
width: 'calc(100% / 3)',
},
[media.between('medium', 'xlarge')]: {
width: 'calc(100% / 6)',
//width: 'calc(100% / 6)',
},
[media.greaterThan('small')]: {
minWidth: 120,
[media.greaterThan('large')]: {
minWidth: 100,
},
}}>
<input
css={{
width: '100%',
appearance: 'none',
background: 'transparent',
border: 0,
Expand All @@ -71,12 +67,12 @@ class DocSearch extends Component<{}, State> {
fontWeight: 300,
fontFamily: 'inherit',
position: 'relative',
padding: '5px 5px 5px 29px',
padding: '4px 4px 4px 29px',
backgroundImage: 'url(/search.svg)',
backgroundSize: '16px 16px',
backgroundRepeat: 'no-repeat',
backgroundPositionY: 'center',
backgroundPositionX: '5px',
backgroundPositionX: '4px',

':focus': {
outline: 0,
Expand All @@ -86,11 +82,6 @@ class DocSearch extends Component<{}, State> {

[media.lessThan('large')]: {
fontSize: 16,
},
[media.greaterThan('small')]: {
width: '100%',
},
[media.lessThan('small')]: {
width: '16px',
transition: 'width 0.2s ease, padding 0.2s ease',
paddingLeft: '16px',
Expand All @@ -104,7 +95,7 @@ class DocSearch extends Component<{}, State> {
}}
id="algolia-doc-search"
type="search"
placeholder="Search docs"
placeholder="Search"
aria-label="Search docs"
/>
</form>
Expand Down
77 changes: 70 additions & 7 deletions src/components/LayoutHeader/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,14 @@ const Header = ({location}: {location: Location}) => (

<nav
css={{
flex: '1',
display: 'flex',
flexDirection: 'row',
alignItems: 'stretch',
overflowX: 'auto',
overflowY: 'hidden',
WebkitOverflowScrolling: 'touch',
height: '100%',
width: '60%',

[media.size('xsmall')]: {
flexGrow: '1',
Expand Down Expand Up @@ -139,12 +139,17 @@ const Header = ({location}: {location: Location}) => (

<div
css={{
[media.lessThan('medium')]: {
display: 'none',
},
[media.greaterThan('large')]: {
width: 'calc(100% / 6)',
},
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: 'auto',

//[media.lessThan('medium')]: {
//width: 'auto',
//},
//[media.greaterThan('large')]: {
//width: 'calc(100% / 4)',
//},
}}>
<Link
css={{
Expand All @@ -161,10 +166,45 @@ const Header = ({location}: {location: Location}) => (
backgroundColor: colors.lighter,
borderRadius: 15,
},

[media.lessThan('medium')]: {
display: 'none',
},
}}
to="/versions">
v{version}
</Link>
<Link
css={{
display: 'flex',
alignItems: 'center',
padding: '5px 10px',
whiteSpace: 'nowrap',
...fonts.small,

':hover': {
color: colors.brand,
},

':focus': {
outline: 0,
backgroundColor: colors.lighter,
borderRadius: 15,
},
}}
to="/languages">
<LanguagesIcon />{' '}
<span
css={{
marginLeft: '0.5rem',

[media.lessThan('medium')]: {
display: 'none',
},
}}>
Languages
</span>
</Link>
<a
css={{
padding: '5px 10px',
Expand All @@ -181,6 +221,10 @@ const Header = ({location}: {location: Location}) => (
backgroundColor: colors.lighter,
borderRadius: 15,
},

[media.lessThan('large')]: {
display: 'none',
},
}}
href="https://github.com/facebook/react/"
target="_blank"
Expand All @@ -200,4 +244,23 @@ const Header = ({location}: {location: Location}) => (
</header>
);

const LanguagesIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path
css={{fill: 'currentColor'}}
d="
M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5
7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09
5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62
7l1.62-4.33L19.12 17h-3.24z
"
/>
</svg>
);

export default Header;
Loading