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