From 75eb55096eff4e29321a8914980b81b97a459b70 Mon Sep 17 00:00:00 2001
From: Hector Ramos <hramos@fb.com>
Date: Tue, 27 Jun 2017 14:10:12 -0700
Subject: [PATCH] Increase text size, rename Tutorial, update nav...

Summary:
Several things here. See commits.
Closes https://github.com/facebook/react-native/pull/14757

Differential Revision: D5332034

Pulled By: hramos

fbshipit-source-id: 6ff9e33c0bc9d2ea3dd5b1a4752621ce7e83f9bb
---
 docs/Tutorial.md                              |  2 +-
 website/core/HeaderLinks.js                   |  1 -
 website/core/Site.js                          | 40 ++++++++++++++-----
 website/layout/BlogPostLayout.js              |  1 -
 website/layout/DocsLayout.js                  |  4 +-
 website/showcase.json                         | 16 ++++----
 website/src/react-native/css/react-native.css | 25 +++++++-----
 website/src/react-native/index.js             |  7 +---
 website/src/react-native/support.js           |  2 +-
 9 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/docs/Tutorial.md b/docs/Tutorial.md
index 330017107..e5130d526 100644
--- a/docs/Tutorial.md
+++ b/docs/Tutorial.md
@@ -1,6 +1,6 @@
 ---
 id: tutorial
-title: Tutorial
+title: Learn the Basics
 layout: docs
 category: The Basics
 permalink: docs/tutorial.html
diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js
index 27ab854e1..50bf78f4b 100644
--- a/website/core/HeaderLinks.js
+++ b/website/core/HeaderLinks.js
@@ -17,7 +17,6 @@ var HeaderLinks = React.createClass({
   linksInternal: [
     {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
     {section: 'support', href: '/react-native/support.html', text: 'Help'},
-    {section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'},
     {section: 'blog', href: '/react-native/blog/', text: 'Blog'},
   ],
   linksExternal: [
diff --git a/website/core/Site.js b/website/core/Site.js
index 383ae7383..8302e9284 100644
--- a/website/core/Site.js
+++ b/website/core/Site.js
@@ -204,11 +204,11 @@ var Site = React.createClass({
                   <a href="docs/getting-started.html">
                     Getting Started
                   </a>
-                  <a href="docs/tutorial.html">Tutorial</a>
+                  <a href="docs/tutorial.html">Learn the Basics</a>
                   <a
-                    href="docs/integration-with-existing-apps.html"
+                    href="docs/components-and-apis.html"
                   >
-                    Integration With Existing Apps
+                    Components and APIs
                   </a>
                   <a href="docs/more-resources.html">
                     More Resources
@@ -221,13 +221,13 @@ var Site = React.createClass({
                     </a>
                   </h5>
                   <a href="/react-native/showcase.html">
-                    Showcase
+                    Who's using React Native?
                   </a>
                   <a
                     href="http://www.meetup.com/topics/react-native/"
                     target="_blank"
                   >
-                    Upcoming Events
+                    Meetups
                   </a>
                   <a
                     href="https://www.facebook.com/groups/react.native.community"
@@ -275,18 +275,31 @@ var Site = React.createClass({
                 <div>
                   <h5>More</h5>
                   <a href="/react-native/blog">Blog</a>
-                  <a
-                    href="https://github.com/facebook/react-native"
-                    target="_blank"
-                  >
-                    GitHub
-                  </a>
                   <a
                     href="http://facebook.github.io/react/"
                     target="_blank"
                   >
                     React
                   </a>
+                  <a
+                    href="https://github.com/facebook/react-native"
+                    target="_blank"
+                  >
+                    GitHub
+                  </a>
+                  <div className="githubButton">
+                    <a
+                      className="github-button"
+                      href="https://github.com/facebook/react-native"
+                      data-icon="octicon-star"
+                      data-count-href="/facebook/react-native/stargazers"
+                      data-count-api="/repos/facebook/react-native#stargazers_count"
+                      data-count-aria-label="# stargazers on GitHub"
+                      aria-label="Star facebook/react-native on GitHub"
+                    >
+                      Star
+                    </a>
+                  </div>
                 </div>
               </section>
               <section className="newsletter">
@@ -405,6 +418,11 @@ var Site = React.createClass({
             type="text/javascript"
             src="https://snack.expo.io/embed.js"
           />
+          <script
+            async
+            defer
+            src="https://buttons.github.io/buttons.js"
+          />
         </body>
       </html>
     );
diff --git a/website/layout/BlogPostLayout.js b/website/layout/BlogPostLayout.js
index 0b2fba424..d9b4f4ea3 100644
--- a/website/layout/BlogPostLayout.js
+++ b/website/layout/BlogPostLayout.js
@@ -31,7 +31,6 @@ var BlogPostLayout = React.createClass({
         authorTwitter={this.props.metadata.authorTwitter}
         image={this.props.metadata.hero ? 'https://facebook.github.io' + this.props.metadata.hero : 'https://facebook.github.io/react-native/img/opengraph.png' }
         >
-        <Hero title="React Native Blog" subtitle="Stay up-to-date with the latest React Native news and events." />
         <section className="content wrap documentationContent">
           <BlogPost
             post={this.props.metadata}
diff --git a/website/layout/DocsLayout.js b/website/layout/DocsLayout.js
index dd7d7c60b..4bcfe3c0b 100644
--- a/website/layout/DocsLayout.js
+++ b/website/layout/DocsLayout.js
@@ -48,8 +48,8 @@ var DocsLayout = React.createClass({
             {(metadata.banner === 'ejected') ? <EjectBanner/> : null}
             <Marked>{content}</Marked>
             <div className="docs-prevnext">
-              {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
-              {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
+              {metadata.previous && <a className="docs-prev btn" href={'docs/' + metadata.previous + '.html#content'}>&larr; Previous</a>}
+              {metadata.next && <a className="docs-next btn" href={'docs/' + metadata.next + '.html#content'}>Continue Reading &rarr;</a>}
             </div>
             <Footer path={'docs/' + metadata.filename} />
           </div>
diff --git a/website/showcase.json b/website/showcase.json
index d71c281a1..f671896d3 100644
--- a/website/showcase.json
+++ b/website/showcase.json
@@ -73,7 +73,7 @@
     "icon": "http://is5.mzstatic.com/image/thumb/Purple111/v4/5f/e9/00/5fe90072-c9ce-87c3-bdfe-8611f9325f0e/source/175x175bb.jpg",
     "infoLink": "https://eng.uber.com/ubereats-react-native/",
     "infoTitle": "Powering UberEATS with React Native and Uber Engineering",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Baidu Mobile (手机百度)",
@@ -82,7 +82,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8",
     "infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
     "infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Bloomberg",
@@ -91,7 +91,7 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
     "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
     "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Vogue",
@@ -99,7 +99,7 @@
     "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
     "infoLink": "http://www.vogue.com/app",
     "infoTitle": "",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "li.st",
@@ -107,7 +107,7 @@
     "linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp",
     "infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE",
     "infoTitle": "Building li.st for Android with React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Discord",
@@ -115,7 +115,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
     "infoLink": "https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933",
     "infoTitle": "Using React Native: One Year Later",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Gyroscope",
@@ -123,7 +123,7 @@
     "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
     "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
     "infoTitle": "Building a visualization experience with React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "Townske",
@@ -131,7 +131,7 @@
     "linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
     "infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c",
     "infoTitle": "The experience of a web developer building an app using React Native",
-    "pinned": true
+    "pinned": false
   },
   {
     "name": "SoundCloud Pulse",
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 6a5756c9d..f82b4d34d 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -443,7 +443,7 @@ h1, h2, h3, h4 {
   line-height: 40px; }
 
 h1 {
-  font-size: 39px; }
+  font-size: 40px; }
 
 h2 {
   font-size: 31px; }
@@ -506,6 +506,9 @@ html * {
   color-profile: sRGB;
   rendering-intent: auto; }
 
+.content {
+  font-size: 18px;
+}
 .subHeader {
   font-size: 21px;
   font-weight: 300;
@@ -605,7 +608,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   text-decoration: none; }
 
 .nav-main .nav-site-wrapper {
-  display: inline; }
+  display: inline;
+  float: right;
+}
 
 .nav-main .nav-site-internal {
   margin: 0 0 0 20px; }
@@ -719,7 +724,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   padding-bottom: 0; }
   .nav-docs-section h3 {
     color: white;
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 400;
     line-height: 20px;
     margin-top: 0;
@@ -928,7 +933,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   margin-bottom: 60px; }
 
 .docs-nextprev {
-  *zoom: 1; }
+  *zoom: 1;
+}
 
 .docs-nextprev:before, .docs-nextprev:after {
   content: " ";
@@ -1002,7 +1008,7 @@ h2 {
 .docs-prevnext {
   min-width: 320px;
   max-width: 640px;
-  margin: 0 auto 40px;
+  margin: 40px auto;
   padding-bottom: 20px; }
 
 .button {
@@ -1534,7 +1540,7 @@ table.versions {
 
 .edit-page-block {
   padding: 5px;
-  margin-bottom: 40px;
+  margin: 40px auto;
   font-size: 12px;
   color: #887766;
   text-align: center;
@@ -1987,7 +1993,7 @@ article li {
   padding: 9px 18px;
   border-radius: 4px;
   text-align: center;
-  font-size: 12px; }
+}
 
 .btn a {
   text-decoration: none !important; }
@@ -2019,7 +2025,7 @@ article li {
 footer.nav-footer {
   box-sizing: border-box;
   border: none;
-  font-weight: 300;
+  font-weight: normal;
   color: #202020;
   font-size: 15px;
   line-height: 24px;
@@ -2085,7 +2091,8 @@ footer .sitemap h6,
 footer .sitemap h5 > a,
 footer .sitemap h6 > a {
   color: #05A5D1;
-  font-weight: 900; }
+  font-size: 15px;
+}
 
 footer .sitemap h5 > a,
 footer .sitemap h6 > a {
diff --git a/website/src/react-native/index.js b/website/src/react-native/index.js
index e58fb2682..3cc577e9f 100644
--- a/website/src/react-native/index.js
+++ b/website/src/react-native/index.js
@@ -47,7 +47,7 @@ const index = React.createClass({
         <Hero title="React Native" subtitle="Learn once, write anywhere: Build mobile apps with React">
           <div className="buttons-unit">
             <a href="docs/getting-started.html" className="button">Get Started</a>
-            <a href="docs/tutorial.html" className="button">Take the Tutorial</a>
+            <a href="docs/tutorial.html" className="button">Learn the Basics</a>
           </div>
         </Hero>
 
@@ -117,7 +117,7 @@ class AwkwardScrollingImageWithText extends Component {
 
             <h2>Don't waste time recompiling</h2>
             <p>
-              React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
+              React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With <a href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Hot Reloading</a>, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
             </p>
             <br />
             <img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
@@ -160,9 +160,6 @@ class SomethingFast extends Component {
               Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
             </p>
             <AppList apps={pinnedApps} />
-            <p className="footnote">
-              Some of these are hybrid native/React Native apps.
-            </p>
             <div className="buttons-unit">
               <a href="/react-native/showcase.html" className="button">More React Native apps</a>
             </div>
diff --git a/website/src/react-native/support.js b/website/src/react-native/support.js
index dd3e52060..cbe48de4e 100644
--- a/website/src/react-native/support.js
+++ b/website/src/react-native/support.js
@@ -141,7 +141,7 @@ var support = React.createClass({
               >
                 open source
               </a>
-              ! If you want to contribute, take a look at the
+              ! If you want to contribute, read the <a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">contributor guidelines</a>, then take a look at the
               {' '}
               <a
                 href="https://github.com/facebook/react-native/wiki/Roadmap"