From c737cd43a0d47fd6beda2b50a160b997253a60b7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Feb 2019 13:31:12 -0800
Subject: [PATCH 1/9] Added language selector page

---
 content/languages.yml                    |  93 ++++++++++++++++++++
 src/components/LayoutHeader/DocSearch.js |  10 +--
 src/components/LayoutHeader/Header.js    |  27 +++++-
 src/pages/languages.js                   | 103 +++++++++++++++++++++++
 src/site-constants.js                    |   3 +-
 5 files changed, 228 insertions(+), 8 deletions(-)
 create mode 100644 content/languages.yml
 create mode 100644 src/pages/languages.js

diff --git a/content/languages.yml b/content/languages.yml
new file mode 100644
index 00000000000..32774b989ad
--- /dev/null
+++ b/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/
\ No newline at end of file
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b3150591725..a75e3a02d6b 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/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,
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c161..dc0796977d7 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/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"
diff --git a/src/pages/languages.js b/src/pages/languages.js
new file mode 100644
index 00000000000..3cb4e59fc40
--- /dev/null
+++ b/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;
diff --git a/src/site-constants.js b/src/site-constants.js
index 5f217fa007c..08decae06fb 100644
--- a/src/site-constants.js
+++ b/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};

From d2d54b6df88ba7ed193c2bf4a09e47d7629c5dd1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Feb 2019 07:58:25 -0800
Subject: [PATCH 2/9] PR nits

---
 content/languages.yml                 | 217 +++++++++++++++-----------
 src/components/LayoutHeader/Header.js |   4 +-
 src/pages/languages.js                | 119 +++++++++-----
 src/site-constants.js                 |   3 +-
 4 files changed, 206 insertions(+), 137 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 32774b989ad..7063bcd5ed4 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -1,93 +1,124 @@
-- 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/
\ No newline at end of file
+- name: Arabic
+  translated_name: العربية
+  code: ar
+  is_completed: false
+- name: Azerbaijani
+  translated_name: Azərbaycanca
+  code: az
+  is_completed: false
+- name: Bulgarian
+  translated_name: Български
+  code: bg
+  is_completed: false
+- name: Bengali
+  translated_name: বাংলা
+  code: bn
+  is_completed: false
+- name: German
+  translated_name: Deutsch
+  code: de
+  is_completed: false
+- name: Spanish
+  translated_name: Español
+  code: es
+  is_completed: true
+- name: Persian
+  translated_name: فارسی
+  code: fa
+  is_completed: false
+- name: French
+  translated_name: Français
+  code: fr
+  is_completed: false
+- name: Hebrew
+  translated_name: עברית
+  code: he
+  is_completed: false
+- name: Hindi
+  translated_name: हिन्दी
+  code: hi
+  is_completed: false
+- name: Armenian
+  translated_name: Հայերեն
+  code: hy
+  is_completed: false
+- name: Indonesian
+  translated_name: Bahasa Indonesia
+  code: id
+  is_completed: false
+- name: Italian
+  translated_name: Italiano
+  code: it
+  is_completed: false
+- name: Japanese
+  translated_name: 日本語
+  code: ja
+  is_completed: true
+- name: Korean
+  translated_name: 한국어
+  code: ko
+  is_completed: false
+- name: Malayalam
+  translated_name: മലയാളം
+  code: ml
+  is_completed: false
+- name: Nepali
+  translated_name: नेपाली
+  code: ne
+  is_completed: false
+- name: Dutch
+  translated_name: Nederlands
+  code: nl
+  is_completed: false
+- name: Polish
+  translated_name: Polski
+  code: pl
+  is_completed: false
+- name: Portuguese (Brazil)
+  translated_name: Português do Brasil
+  code: pt-BR
+  is_completed: true
+- name: Portuguese (Portugal)
+  translated_name: Português europeu
+  code: pt-PT
+  is_completed: false
+- name: Romanian
+  translated_name: Română
+  code: ro
+  is_completed: false
+- name: Russian
+  translated_name: Русский
+  code: ru
+  is_completed: false
+- name: Sinhala
+  translated_name: සිංහල
+  code: si
+  is_completed: false
+- name: Tamil
+  translated_name: தமிழ்
+  code: ta
+  is_completed: false
+- name: Turkish
+  translated_name: Türkçe
+  code: tr
+  is_completed: false
+- name: Ukrainian
+  translated_name: Українська
+  code: uk
+  is_completed: false
+- name: Uzbek
+  translated_name: Oʻzbekcha
+  code: uz
+  is_completed: false
+- name: Vietnamese
+  translated_name: Tiếng Việt
+  code: vi
+  is_completed: false
+- name: Simplified Chinese
+  translated_name: 简体中文
+  code: zh-hans
+  is_completed: false
+- name: Traditional Chinese
+  translated_name: 繁體中文
+  code: zh-hant
+  is_completed: false
\ No newline at end of file
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index dc0796977d7..9f2ace9b6cb 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/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 {language, version} from 'site-constants';
+import {version} from 'site-constants';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import DocSearch from './DocSearch';
 
@@ -182,7 +182,7 @@ const Header = ({location}: {location: Location}) => (
               },
             }}
             to="/languages">
-            {language}
+            Languages
           </Link>
           <a
             css={{
diff --git a/src/pages/languages.js b/src/pages/languages.js
index 3cb4e59fc40..741356e38a4 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -15,9 +15,12 @@ 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),
-);
+const completedLangauges = languages
+  .filter(language => language.is_completed)
+  .sort((a, b) => a.code.localeCompare(b.code));
+const inProgressLangauges = languages
+  .filter(language => !language.is_completed)
+  .sort((a, b) => a.code.localeCompare(b.code));
 
 type Props = {
   location: Location,
@@ -42,51 +45,38 @@ const Languages = ({location}: Props) => (
                 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%',
-                    },
+              {completedLangauges.map(language => (
+                <Language
+                  key={language.code}
+                  code={language.code}
+                  name={language.name}
+                  translatedName={language.translated_name}
+                />
+              ))}
+            </ul>
 
-                    [media.size('medium')]: {
-                      width: '33.33%',
-                    },
+            <h2>In Progress</h2>
 
-                    [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
+              css={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                marginLeft: -20,
+              }}>
+              {inProgressLangauges.map(language => (
+                <Language
+                  key={language.code}
+                  code={language.code}
+                  name={language.name}
+                  translatedName={language.translated_name}
+                />
               ))}
             </ul>
 
             <p>
               Don't see your language above?{' '}
               <a
-                href="https://github.com/reactjs/reactjs.org/issues/new"
+                href="https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation"
                 target="_blank"
                 rel="noopener">
                 Let us know
@@ -100,4 +90,53 @@ const Languages = ({location}: Props) => (
   </Layout>
 );
 
+const Language = ({code, name, translatedName}) => (
+  <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,
+      }}>
+      <a href={`https://${code}.reactjs.org/`} rel="nofollow">
+        {translatedName}
+      </a>
+    </div>
+    <div css={{marginTop: 10}}>
+      <a
+        css={{
+          fontSize: 12,
+        }}
+        href={`https://github.com/reactjs/${code}.reactjs.org/`}
+        target="_blank"
+        rel="noopener">
+        Contribute
+      </a>
+    </div>
+  </li>
+);
+
 export default Languages;
diff --git a/src/site-constants.js b/src/site-constants.js
index 08decae06fb..cf281f7859b 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -10,6 +10,5 @@
 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 {babelURL, language, urlRoot, version};
+export {babelURL, urlRoot, version};

From 43a4477618ffc0d42f94f50f5ea9cfc63012c3e2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 16 Feb 2019 08:50:57 -0800
Subject: [PATCH 3/9] Fix typo in variable name

---
 src/pages/languages.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/languages.js b/src/pages/languages.js
index 741356e38a4..bf887053045 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -15,10 +15,10 @@ import {media, sharedStyles} from 'theme';
 // $FlowFixMe This is a valid path
 import languages from '../../content/languages.yml';
 
-const completedLangauges = languages
+const completedLanguages = languages
   .filter(language => language.is_completed)
   .sort((a, b) => a.code.localeCompare(b.code));
-const inProgressLangauges = languages
+const inProgressLanguages = languages
   .filter(language => !language.is_completed)
   .sort((a, b) => a.code.localeCompare(b.code));
 
@@ -45,7 +45,7 @@ const Languages = ({location}: Props) => (
                 flexWrap: 'wrap',
                 marginLeft: -20,
               }}>
-              {completedLangauges.map(language => (
+              {completedLanguages.map(language => (
                 <Language
                   key={language.code}
                   code={language.code}
@@ -63,7 +63,7 @@ const Languages = ({location}: Props) => (
                 flexWrap: 'wrap',
                 marginLeft: -20,
               }}>
-              {inProgressLangauges.map(language => (
+              {inProgressLanguages.map(language => (
                 <Language
                   key={language.code}
                   code={language.code}

From 88ea9c8b97246577c7dc60c0b515b226f279b3b8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 17 Feb 2019 14:36:09 -0800
Subject: [PATCH 4/9] Added language icon. Show search icon in mobile.

---
 src/components/LayoutHeader/DocSearch.js | 19 +++------
 src/components/LayoutHeader/Header.js    | 52 ++++++++++++++++++++----
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index a75e3a02d6b..a920a197a1a 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -45,24 +45,20 @@ class DocSearch extends Component<{}, State> {
           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')]: {
+          [media.greaterThan('large')]: {
             minWidth: 100,
           },
         }}>
         <input
           css={{
+            width: '100%',
             appearance: 'none',
             background: 'transparent',
             border: 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"
         />
       </form>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 9f2ace9b6cb..d56583530f5 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -139,12 +139,16 @@ const Header = ({location}: {location: Location}) => (
 
         <div
           css={{
-            [media.lessThan('medium')]: {
-              display: 'none',
-            },
-            [media.greaterThan('large')]: {
-              width: 'calc(100% / 4)',
-            },
+            display: 'flex',
+            alignItems: 'center',
+            width: 'auto',
+
+            //[media.lessThan('medium')]: {
+            //width: 'auto',
+            //},
+            //[media.greaterThan('large')]: {
+            //width: 'calc(100% / 4)',
+            //},
           }}>
           <Link
             css={{
@@ -161,12 +165,18 @@ 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,
@@ -182,7 +192,15 @@ const Header = ({location}: {location: Location}) => (
               },
             }}
             to="/languages">
-            Languages
+            <LanguagesIcon />{' '}
+            <span
+              css={{
+                [media.lessThan('medium')]: {
+                  display: 'none',
+                },
+              }}>
+              Languages
+            </span>
           </Link>
           <a
             css={{
@@ -223,4 +241,24 @@ 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"
+    css={{marginRight: '0.5rem'}}>
+    <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;

From cba58949c5c4ac02d944311edf232dabbd7ba22e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Feb 2019 14:03:28 -0800
Subject: [PATCH 5/9] Tweaked header alignment

---
 src/components/LayoutHeader/Header.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index d56583530f5..ca72e080229 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -92,6 +92,7 @@ const Header = ({location}: {location: Location}) => (
 
         <nav
           css={{
+            flex: '1',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'stretch',
@@ -99,7 +100,6 @@ const Header = ({location}: {location: Location}) => (
             overflowY: 'hidden',
             WebkitOverflowScrolling: 'touch',
             height: '100%',
-            width: '60%',
 
             [media.size('xsmall')]: {
               flexGrow: '1',
@@ -141,6 +141,7 @@ const Header = ({location}: {location: Location}) => (
           css={{
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'flex-end',
             width: 'auto',
 
             //[media.lessThan('medium')]: {
@@ -195,6 +196,8 @@ const Header = ({location}: {location: Location}) => (
             <LanguagesIcon />{' '}
             <span
               css={{
+                marginLeft: '0.5rem',
+
                 [media.lessThan('medium')]: {
                   display: 'none',
                 },
@@ -246,8 +249,7 @@ const LanguagesIcon = () => (
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
-    viewBox="0 0 24 24"
-    css={{marginRight: '0.5rem'}}>
+    viewBox="0 0 24 24">
     <path d="M0 0h24v24H0z" fill="none" />
     <path
       css={{fill: 'currentColor'}}

From 14381e32dc876a7e24e2ee318f3f8f0fec0e02b2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Feb 2019 14:26:35 -0800
Subject: [PATCH 6/9] Split languages into 3 categories based on progress:
 complete, partially translated, and needs contributors

---
 content/languages.yml  |  71 +++++++++-------
 src/pages/languages.js | 183 ++++++++++++++++++++++-------------------
 2 files changed, 139 insertions(+), 115 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 7063bcd5ed4..71e572dbb86 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -1,124 +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:
+  status: 2
 - name: Arabic
   translated_name: العربية
   code: ar
-  is_completed: false
+  status: 0
 - name: Azerbaijani
   translated_name: Azərbaycanca
   code: az
-  is_completed: false
+  status: 0
 - name: Bulgarian
   translated_name: Български
   code: bg
-  is_completed: false
+  status: 0
 - name: Bengali
   translated_name: বাংলা
   code: bn
-  is_completed: false
+  status: 0
 - name: German
   translated_name: Deutsch
   code: de
-  is_completed: false
+  status: 0
 - name: Spanish
   translated_name: Español
   code: es
-  is_completed: true
+  status: 2
 - name: Persian
   translated_name: فارسی
   code: fa
-  is_completed: false
+  status: 0
 - name: French
   translated_name: Français
   code: fr
-  is_completed: false
+  status: 0
 - name: Hebrew
   translated_name: עברית
   code: he
-  is_completed: false
+  status: 0
 - name: Hindi
   translated_name: हिन्दी
   code: hi
-  is_completed: false
+  status: 0
 - name: Armenian
   translated_name: Հայերեն
   code: hy
-  is_completed: false
+  status: 0
 - name: Indonesian
   translated_name: Bahasa Indonesia
   code: id
-  is_completed: false
+  status: 0
 - name: Italian
   translated_name: Italiano
   code: it
-  is_completed: false
+  status: 0
 - name: Japanese
   translated_name: 日本語
   code: ja
-  is_completed: true
+  status: 1
 - name: Korean
   translated_name: 한국어
   code: ko
-  is_completed: false
+  status: 0
 - name: Malayalam
   translated_name: മലയാളം
   code: ml
-  is_completed: false
+  status: 0
 - name: Nepali
   translated_name: नेपाली
   code: ne
-  is_completed: false
+  status: 0
 - name: Dutch
   translated_name: Nederlands
   code: nl
-  is_completed: false
+  status: 0
 - name: Polish
   translated_name: Polski
   code: pl
-  is_completed: false
+  status: 0
 - name: Portuguese (Brazil)
   translated_name: Português do Brasil
   code: pt-BR
-  is_completed: true
+  status: 1
 - name: Portuguese (Portugal)
   translated_name: Português europeu
   code: pt-PT
-  is_completed: false
+  status: 0
 - name: Romanian
   translated_name: Română
   code: ro
-  is_completed: false
+  status: 0
 - name: Russian
   translated_name: Русский
   code: ru
-  is_completed: false
+  status: 0
 - name: Sinhala
   translated_name: සිංහල
   code: si
-  is_completed: false
+  status: 0
 - name: Tamil
   translated_name: தமிழ்
   code: ta
-  is_completed: false
+  status: 0
 - name: Turkish
   translated_name: Türkçe
   code: tr
-  is_completed: false
+  status: 0
 - name: Ukrainian
   translated_name: Українська
   code: uk
-  is_completed: false
+  status: 0
 - name: Uzbek
   translated_name: Oʻzbekcha
   code: uz
-  is_completed: false
+  status: 0
 - name: Vietnamese
   translated_name: Tiếng Việt
   code: vi
-  is_completed: false
+  status: 0
 - name: Simplified Chinese
   translated_name: 简体中文
   code: zh-hans
-  is_completed: false
+  status: 0
 - name: Traditional Chinese
   translated_name: 繁體中文
   code: zh-hant
-  is_completed: false
\ No newline at end of file
+  status: 0
\ No newline at end of file
diff --git a/src/pages/languages.js b/src/pages/languages.js
index bf887053045..7887175a63e 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -15,12 +15,27 @@ import {media, sharedStyles} from 'theme';
 // $FlowFixMe This is a valid path
 import languages from '../../content/languages.yml';
 
-const completedLanguages = languages
-  .filter(language => language.is_completed)
-  .sort((a, b) => a.code.localeCompare(b.code));
-const inProgressLanguages = languages
-  .filter(language => !language.is_completed)
-  .sort((a, b) => a.code.localeCompare(b.code));
+// 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,
@@ -39,39 +54,13 @@ const Languages = ({location}: Props) => (
               The React documentation is available in the following languages:
             </p>
 
-            <ul
-              css={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                marginLeft: -20,
-              }}>
-              {completedLanguages.map(language => (
-                <Language
-                  key={language.code}
-                  code={language.code}
-                  name={language.name}
-                  translatedName={language.translated_name}
-                />
-              ))}
-            </ul>
-
-            <h2>In Progress</h2>
-
-            <ul
-              css={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                marginLeft: -20,
-              }}>
-              {inProgressLanguages.map(language => (
-                <Language
-                  key={language.code}
-                  code={language.code}
-                  name={language.name}
-                  translatedName={language.translated_name}
-                />
-              ))}
-            </ul>
+            <LanguagesGrid languages={complete} />
+
+            <h2>Partially Translated</h2>
+            <LanguagesGrid languages={partial} />
+
+            <h2>Needs Contributors</h2>
+            <LanguagesGrid languages={incomplete} />
 
             <p>
               Don't see your language above?{' '}
@@ -90,53 +79,79 @@ const Languages = ({location}: Props) => (
   </Layout>
 );
 
-const Language = ({code, name, translatedName}) => (
-  <li
+const LanguagesGrid = ({languages}) => (
+  <ul
     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
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginLeft: -20,
+    }}>
+    {languages.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 ? `${code}.` : '';
+
+  return (
+    <li
       css={{
-        fontSize: 22,
-        fontWeight: 'bold',
-        marginBottom: 8,
-        marginTop: 8,
-      }}>
-      <a href={`https://${code}.reactjs.org/`} rel="nofollow">
-        {translatedName}
-      </a>
-    </div>
-    <div css={{marginTop: 10}}>
-      <a
+        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: 12,
-        }}
-        href={`https://github.com/reactjs/${code}.reactjs.org/`}
-        target="_blank"
-        rel="noopener">
-        Contribute
-      </a>
-    </div>
-  </li>
-);
+          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;

From 287521cb7a940334179abfa2089547d9ad0bba40 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Feb 2019 15:46:17 -0800
Subject: [PATCH 7/9] Lower-cased pt-* language codes

---
 content/languages.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 71e572dbb86..35a37688355 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -85,11 +85,11 @@
   status: 0
 - name: Portuguese (Brazil)
   translated_name: Português do Brasil
-  code: pt-BR
+  code: pt-br
   status: 1
 - name: Portuguese (Portugal)
   translated_name: Português europeu
-  code: pt-PT
+  code: pt-pt
   status: 0
 - name: Romanian
   translated_name: Română

From dfa0fc55967f2cd380d3f0a4f1369a34621a3163 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 20 Feb 2019 08:22:27 -0800
Subject: [PATCH 8/9] Re-added locale sort

---
 content/languages.yml  |  2 +-
 src/pages/languages.js | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 35a37688355..7790945a822 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -5,7 +5,7 @@
 
 - name: English
   translated_name: English
-  code:
+  code: en
   status: 2
 - name: Arabic
   translated_name: العربية
diff --git a/src/pages/languages.js b/src/pages/languages.js
index 7887175a63e..7b2268aff17 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -86,20 +86,22 @@ const LanguagesGrid = ({languages}) => (
       flexWrap: 'wrap',
       marginLeft: -20,
     }}>
-    {languages.map(({code, name, status, translated_name}) => (
-      <Language
-        key={code}
-        code={code}
-        name={name}
-        status={status}
-        translatedName={translated_name}
-      />
-    ))}
+    {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 ? `${code}.` : '';
+  const prefix = code === 'en' ? '' : `${code}.`;
 
   return (
     <li

From 7c805892da85606b09949930006ec2e9d12a92c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 23 Feb 2019 11:22:36 -0800
Subject: [PATCH 9/9] Renamed 'Partially Translated' header to 'In Progress'

---
 src/pages/languages.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/languages.js b/src/pages/languages.js
index 7b2268aff17..61f063125c1 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -56,7 +56,7 @@ const Languages = ({location}: Props) => (
 
             <LanguagesGrid languages={complete} />
 
-            <h2>Partially Translated</h2>
+            <h2>In Progress</h2>
             <LanguagesGrid languages={partial} />
 
             <h2>Needs Contributors</h2>