Add "Languages" page

content/languages.yml

@@ -0,0 +1,93 @@
+- label: 'العربية'
+  url: https://ar.reactjs.org
+  repository: https://github.com/reactjs/ar.reactjs.org/
+- label: 'Azərbaycanca'
+  url: https://az.reactjs.org
+  repository: https://github.com/reactjs/az.reactjs.org/
+- label: 'Български'
+  url: https://bg.reactjs.org
+  repository: https://github.com/reactjs/bg.reactjs.org/
+- label: 'বাংলা'
+  url: https://bn.reactjs.org
+  repository: https://github.com/reactjs/bn.reactjs.org/
+- label: 'Deutsch'
+  url: https://de.reactjs.org
+  repository: https://github.com/reactjs/de.reactjs.org/
+- label: 'Español'
+  url: https://es.reactjs.org
+  repository: https://github.com/reactjs/es.reactjs.org/
+- label: 'فارسی'
+  url: https://fa.reactjs.org
+  repository: https://github.com/reactjs/fa.reactjs.org/
+- label: 'Français'
+  url: https://fr.reactjs.org
+  repository: https://github.com/reactjs/fr.reactjs.org/
+- label: 'עברית'
+  url: https://he.reactjs.org
+  repository: https://github.com/reactjs/he.reactjs.org/
+- label: 'हिन्दी'
+  url: https://hi.reactjs.org
+  repository: https://github.com/reactjs/hi.reactjs.org/
+- label: 'Հայերեն'
+  url: https://hy.reactjs.org
+  repository: https://github.com/reactjs/hy.reactjs.org/
+- label: 'Bahasa Indonesia'
+  url: https://id.reactjs.org
+  repository: https://github.com/reactjs/id.reactjs.org/
+- label: 'Italiano'
+  url: https://it.reactjs.org
+  repository: https://github.com/reactjs/it.reactjs.org/
+- label: '日本語'
+  url: https://ja.reactjs.org
+  repository: https://github.com/reactjs/ja.reactjs.org/
+- label: '한국어'
+  url: https://ko.reactjs.org
+  repository: https://github.com/reactjs/ko.reactjs.org/
+- label: 'മലയാളം'
+  url: https://ml.reactjs.org
+  repository: https://github.com/reactjs/ml.reactjs.org/
+- label: 'नेपाली'
+  url: https://ne.reactjs.org
+  repository: https://github.com/reactjs/ne.reactjs.org/
+- label: 'Nederlands'
+  url: https://nl.reactjs.org
+  repository: https://github.com/reactjs/nl.reactjs.org/
+- label: 'Polski'
+  url: https://pl.reactjs.org
+  repository: https://github.com/reactjs/pl.reactjs.org/
+- label: 'Português do Brasil'
+  url: https://pt-BR.reactjs.org
+  repository: https://github.com/reactjs/pt-BR.reactjs.org/
+- label: 'Português europeu'
+  url: https://pt-PT.reactjs.org
+  repository: https://github.com/reactjs/pt-PT.reactjs.org/
+- label: 'Română'
+  url: https://ro.reactjs.org
+  repository: https://github.com/reactjs/ro.reactjs.org/
+- label: 'Русский'
+  url: https://ru.reactjs.org
+  repository: https://github.com/reactjs/ru.reactjs.org/
+- label: 'සිංහල'
+  url: https://si.reactjs.org
+  repository: https://github.com/reactjs/si.reactjs.org/
+- label: 'தமிழ்'
+  url: https://ta.reactjs.org
+  repository: https://github.com/reactjs/ta.reactjs.org/
+- label: 'Türkçe'
+  url: https://tr.reactjs.org
+  repository: https://github.com/reactjs/tr.reactjs.org/
+- label: 'Українська'
+  url: https://uk.reactjs.org
+  repository: https://github.com/reactjs/uk.reactjs.org/
+- label: 'Oʻzbekcha'
+  url: https://uz.reactjs.org
+  repository: https://github.com/reactjs/uz.reactjs.org/
+- label: 'Tiếng Việt'
+  url: https://vi.reactjs.org
+  repository: https://github.com/reactjs/vi.reactjs.org/
+- label: '简体中文'
+  url: https://zh-hans.reactjs.org
+  repository: https://github.com/reactjs/zh-hans.reactjs.org/
+- label: '繁體中文'
+  url: https://zh-hant.reactjs.org
+  repository: https://github.com/reactjs/zh-hant.reactjs.org/

src/components/LayoutHeader/DocSearch.js

@@ -42,8 +42,8 @@ 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',
@@ -58,7 +58,7 @@ class DocSearch extends Component<{}, State> {
             width: 'calc(100% / 6)',
           },
           [media.greaterThan('small')]: {
-            minWidth: 120,
+            minWidth: 100,
           },
         }}>
         <input
@@ -71,12 +71,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,

src/components/LayoutHeader/Header.js

@@ -10,7 +10,7 @@ import HeaderLink from './HeaderLink';
 import {Link} from 'gatsby';
 import React from 'react';
 import {colors, fonts, media} from 'theme';
-import {version} from 'site-constants';
+import {language, version} from 'site-constants';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import DocSearch from './DocSearch';
 
@@ -143,7 +143,7 @@ const Header = ({location}: {location: Location}) => (
               display: 'none',
             },
             [media.greaterThan('large')]: {
-              width: 'calc(100% / 6)',
+              width: 'calc(100% / 4)',
             },
           }}>
           <Link
@@ -165,6 +165,25 @@ const Header = ({location}: {location: Location}) => (
             to="/versions">
             v{version}
           </Link>
+          <Link
+            css={{
+              padding: '5px 10px',
+              whiteSpace: 'nowrap',
+              ...fonts.small,
+
+              ':hover': {
+                color: colors.brand,
+              },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
+            }}
+            to="/languages">
+            {language}
+          </Link>
           <a
             css={{
               padding: '5px 10px',
@@ -181,6 +200,10 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
+
+              [media.lessThan('large')]: {
+                display: 'none',
+              },
             }}
             href="https://github.com/facebook/react/"
             target="_blank"

src/pages/languages.js

@@ -0,0 +1,103 @@
+/**
+ * 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';
+
+const sortedLanguages = languages.sort((a, b) =>
+  a.label.localeCompare(b.label),
+);
+
+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>
+
+            <ul
+              css={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                marginLeft: -20,
+              }}>
+              {sortedLanguages.map(language => (
+                <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={language.label}>
+                  <h4>{language.label}</h4>
+                  <div css={{marginTop: 10}}>
+                    <a href={language.url} rel="nofollow">
+                      View Documentation
+                    </a>
+                  </div>
+                  <div css={{marginTop: 10}}>
+                    <a
+                      href={language.repository}
+                      target="_blank"
+                      rel="noopener">
+                      Contribute
+                    </a>
+                  </div>
+                </li>
+              ))}
+            </ul>
+
+            <p>
+              Don't see your language above?{' '}
+              <a
+                href="https://github.com/reactjs/reactjs.org/issues/new"
+                target="_blank"
+                rel="noopener">
+                Let us know
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </Layout>
+);
+
+export default Languages;

src/site-constants.js

@@ -10,5 +10,6 @@
 const urlRoot = 'https://reactjs.org';
 const version = '16.8.2';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
+const language = 'English';
 
-export {urlRoot, version, babelURL};
+export {babelURL, language, urlRoot, version};