Browse Source
* Added language selector page * PR nits * Fix typo in variable name * Added language icon. Show search icon in mobile. * Tweaked header alignment * Split languages into 3 categories based on progress: complete, partially translated, and needs contributors * Lower-cased pt-* language codes * Re-added locale sort * Renamed 'Partially Translated' header to 'In Progress'main
Brian Vaughn
6 years ago
committed by
Dan Abramov
Dan Abramov
5 changed files with 373 additions and 27 deletions
@ -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%) |
|||
|
|||
- 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 |
|||
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 |
|||
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 |
|||
@ -0,0 +1,159 @@ |
|||
/** |
|||
* Copyright (c) 2013-present, Facebook, Inc. |
|||
* |
|||
* @emails react-core |
|||
* @flow |
|||
*/ |
|||
|
|||
import Layout from 'components/Layout'; |
|||
import Container from 'components/Container'; |
|||
import Header from 'components/Header'; |
|||
import TitleAndMetaTags from 'components/TitleAndMetaTags'; |
|||
import React from 'react'; |
|||
import {media, sharedStyles} from 'theme'; |
|||
|
|||
// $FlowFixMe This is a valid path
|
|||
import languages from '../../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%)
|
|||
const {complete, incomplete, partial} = languages.reduce( |
|||
(reduced, language) => { |
|||
switch (language.status) { |
|||
case 0: |
|||
reduced.incomplete.push(language); |
|||
break; |
|||
case 1: |
|||
reduced.partial.push(language); |
|||
break; |
|||
case 2: |
|||
reduced.complete.push(language); |
|||
break; |
|||
} |
|||
return reduced; |
|||
}, |
|||
{complete: [], incomplete: [], partial: []}, |
|||
); |
|||
|
|||
type Props = { |
|||
location: Location, |
|||
}; |
|||
|
|||
const Languages = ({location}: Props) => ( |
|||
<Layout location={location}> |
|||
<Container> |
|||
<div css={sharedStyles.articleLayout.container}> |
|||
<div css={sharedStyles.articleLayout.content}> |
|||
<Header>Languages</Header> |
|||
<TitleAndMetaTags title="React - Languages" /> |
|||
|
|||
<div css={sharedStyles.markdown}> |
|||
<p> |
|||
The React documentation is available in the following languages: |
|||
</p> |
|||
|
|||
<LanguagesGrid languages={complete} /> |
|||
|
|||
<h2>In Progress</h2> |
|||
<LanguagesGrid languages={partial} /> |
|||
|
|||
<h2>Needs Contributors</h2> |
|||
<LanguagesGrid languages={incomplete} /> |
|||
|
|||
<p> |
|||
Don't see your language above?{' '} |
|||
<a |
|||
href="https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation" |
|||
target="_blank" |
|||
rel="noopener"> |
|||
Let us know |
|||
</a> |
|||
. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Container> |
|||
</Layout> |
|||
); |
|||
|
|||
const LanguagesGrid = ({languages}) => ( |
|||
<ul |
|||
css={{ |
|||
display: 'flex', |
|||
flexWrap: 'wrap', |
|||
marginLeft: -20, |
|||
}}> |
|||
{languages |
|||
.sort((a, b) => a.code.localeCompare(b.code)) |
|||
.map(({code, name, status, translated_name}) => ( |
|||
<Language |
|||
key={code} |
|||
code={code} |
|||
name={name} |
|||
status={status} |
|||
translatedName={translated_name} |
|||
/> |
|||
))} |
|||
</ul> |
|||
); |
|||
|
|||
const Language = ({code, name, status, translatedName}) => { |
|||
const prefix = code === 'en' ? '' : `${code}.`; |
|||
|
|||
return ( |
|||
<li |
|||
css={{ |
|||
paddingLeft: 20, |
|||
paddingTop: 20, |
|||
borderTop: '1px dotted #ececec', |
|||
paddingBottom: 20, |
|||
width: '100%', |
|||
listStyle: 'none', |
|||
|
|||
[media.size('small')]: { |
|||
width: '50%', |
|||
}, |
|||
|
|||
[media.size('medium')]: { |
|||
width: '33.33%', |
|||
}, |
|||
|
|||
[media.greaterThan('large')]: { |
|||
width: '25%', |
|||
}, |
|||
}} |
|||
key={code}> |
|||
<div css={{}}>{name}</div> |
|||
<div |
|||
css={{ |
|||
fontSize: 22, |
|||
fontWeight: 'bold', |
|||
marginBottom: 8, |
|||
marginTop: 8, |
|||
}}> |
|||
{status === 0 && translatedName} |
|||
{status > 0 && ( |
|||
<a href={`https://${prefix}reactjs.org/`} rel="nofollow"> |
|||
{translatedName} |
|||
</a> |
|||
)} |
|||
</div> |
|||
<div css={{marginTop: 10}}> |
|||
<a |
|||
css={{ |
|||
fontSize: 12, |
|||
}} |
|||
href={`https://github.com/reactjs/${prefix}reactjs.org/`} |
|||
target="_blank" |
|||
rel="noopener"> |
|||
Contribute |
|||
</a> |
|||
</div> |
|||
</li> |
|||
); |
|||
}; |
|||
|
|||
export default Languages; |
|||
Loading…
Reference in new issue