diff --git a/content/languages.yml b/content/languages.yml new file mode 100644 index 00000000..7790945a --- /dev/null +++ b/content/languages.yml @@ -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 \ No newline at end of file diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js index b3150591..a920a197 100644 --- a/src/components/LayoutHeader/DocSearch.js +++ b/src/components/LayoutHeader/DocSearch.js @@ -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, }, }}> { 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, @@ -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', @@ -104,7 +95,7 @@ class DocSearch extends Component<{}, State> { }} id="algolia-doc-search" type="search" - placeholder="Search docs" + placeholder="Search" aria-label="Search docs" /> diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 55743a7c..ca72e080 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -92,6 +92,7 @@ const Header = ({location}: {location: Location}) => ( ( overflowY: 'hidden', WebkitOverflowScrolling: 'touch', height: '100%', - width: '60%', [media.size('xsmall')]: { flexGrow: '1', @@ -139,12 +139,17 @@ const Header = ({location}: {location: Location}) => ( ( backgroundColor: colors.lighter, borderRadius: 15, }, + + [media.lessThan('medium')]: { + display: 'none', + }, }} to="/versions"> v{version} + + {' '} + + Languages + + ( backgroundColor: colors.lighter, borderRadius: 15, }, + + [media.lessThan('large')]: { + display: 'none', + }, }} href="https://github.com/facebook/react/" target="_blank" @@ -200,4 +244,23 @@ const Header = ({location}: {location: Location}) => ( ); +const LanguagesIcon = () => ( + + + + +); + export default Header; diff --git a/src/pages/languages.js b/src/pages/languages.js new file mode 100644 index 00000000..61f06312 --- /dev/null +++ b/src/pages/languages.js @@ -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) => ( + + + + + Languages + + + + + The React documentation is available in the following languages: + + + + + In Progress + + + Needs Contributors + + + + Don't see your language above?{' '} + + Let us know + + . + + + + + + +); + +const LanguagesGrid = ({languages}) => ( + + {languages + .sort((a, b) => a.code.localeCompare(b.code)) + .map(({code, name, status, translated_name}) => ( + + ))} + +); + +const Language = ({code, name, status, translatedName}) => { + const prefix = code === 'en' ? '' : `${code}.`; + + return ( + + {name} + + {status === 0 && translatedName} + {status > 0 && ( + + {translatedName} + + )} + + + + Contribute + + + + ); +}; + +export default Languages; diff --git a/src/site-constants.js b/src/site-constants.js index 5144290f..2dc51fad 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -11,4 +11,4 @@ const urlRoot = 'https://reactjs.org'; const version = '16.8.3'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; -export {urlRoot, version, babelURL}; +export {babelURL, urlRoot, version};
+ The React documentation is available in the following languages: +
+ Don't see your language above?{' '} + + Let us know + + . +