Split up releases by type

Summary:
The documentation archive page gets a lot of traffic relative to other docs, yet the current version does not provide much context on each release.

This PR attempts to clarify the purpose for each type of release, making it clear that users should mostly only care about the latest stable version.

![screencapture-localhost-8079-react-native-versions-html-1474917898998](https://cloud.githubusercontent.com/assets/165856/18848683/57cf20e0-83e4-11e6-961e-b93ab1c5fde5.png)
Closes https://github.com/facebook/react-native/pull/10118

Differential Revision: D3927320

Pulled By: JoelMarcey

fbshipit-source-id: c713e3ee65ad1a1fc23f112ec93f277fe981a5fa

website/src/react-native/css/react-native.css

@@ -1392,8 +1392,12 @@ div[data-twttr-id] iframe {
   border-radius: 20px;
 }
 
+table.versions  {
+  width: 60%;
+}
+
 .versions th {
-  text-align: right;
+  width: 20%;
 }
 
 .versions td, .versions th {

website/src/react-native/versions.js

@@ -14,59 +14,114 @@ var Metadata = require('Metadata');
 var versions = React.createClass({
   render: function() {
     var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS || '').split(',');
+    var latestVersion = Metadata.config.RN_LATEST_VERSION;
 
     var versions = [
       {
         title: 'master',
         path: '/react-native/releases/next',
-        release: null
+        release: null,
+        type: 'master',
       },
     ].concat(availableDocs.map((version) => {
-      const isLatest =  Metadata.config.RN_LATEST_VERSION === version;
-      const isRC = Metadata.config.RN_LATEST_VERSION < version;
+      const isLatest =  latestVersion === version;
+      const isRC = latestVersion < version;
 
       var title = version;
-      if (isLatest) {
-        title = '(current) ' + title;
-      }
       if (isRC) {
-        title += '-rc';
+        title += '-RC';
       }
 
       return {
         title: title,
         path: isLatest ? '/react-native' : '/react-native/releases/' + version,
-        release: 'https://github.com/facebook/react-native/releases/tag/v' + version + '.0' + (isRC ? '-rc.0' : '')
+        release: 'https://github.com/facebook/react-native/releases/tag/v' + version + '.0' + (isRC ? '-rc.0' : ''),
+        type: isLatest ? 'latest' : (isRC ? 'release-candidate' : 'release'),
       }
     }));
 
-    if (!Metadata.config.RN_LATEST_VERSION) {
+    if (!latestVersion) {
       versions = [
         {
           title: 'current',
           path: '/react-native',
-          release: null
+          release: null,
+          type: 'latest',
         },
       ].concat(versions);
     }
 
+    var latests = versions.filter(function(version) {
+      return version.type === 'latest';
+    });
+    var masters = versions.filter(function(version) {
+      return version.type === 'master';
+    });
+    var releaseCandidates = versions.filter(function(version) {
+      return version.type === 'release-candidate';
+    });
+    var releases = versions.filter(function(version) {
+      return version.type === 'release';
+    });
+
     return (
-      <Site section="versions" title="Documentation archive">
+      <Site section="versions" title="React Native Versions">
         <section className="content wrap documentationContent nosidebar">
           <div className="inner-content">
             <h1>React Native Versions</h1>
-            <p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p>
+            <p>React Native follows a 2-week release train. Every two weeks, a new branch created off master enters the <a href="versions.html#rc">Release Candidate</a> phase, and the previous Release Candidate branch is released and considered <a href="versions.html#latest">stable</a>.</p>
+            <a name="latest" />
+            <h3>Current Version (Stable)</h3>
             <table className="versions">
               <tbody>
-                {versions.map((version) =>
+                {latests.map((version) =>
                   <tr>
                     <th>{version.title}</th>
-                    <td><a href={version.path}>Docs</a></td>
+                    <td><a href={version.path}>Documentation</a></td>
                     <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
                   </tr>
                 )}
               </tbody>
             </table>
+            <p>This is the version that is configured automatically when you run <code>react-native init</code>. We highly recommend using the current version of React Native when starting a new project.</p>
+            <p>If you have an existing project that uses React Native, read the release notes to learn about new features and fixes. You can follow <a href="/react-native/docs/upgrading.html">our guide to upgrade your app</a> to the latest version.</p>
+            <a name="rc" />
+            <h3>Pre-release Versions</h3>
+            <table className="versions">
+              <tbody>
+                {masters.map((version) =>
+                  <tr>
+                    <th>master</th>
+                    <td><a href={version.path}>Documentation</a></td>
+                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                  </tr>
+                )}
+                {releaseCandidates.map((version) =>
+                  <tr>
+                    <th>{version.title}</th>
+                    <td><a href={version.path}>Documentation</a></td>
+                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            <p>For those who live on the bleeding edge. Only recommended if you're actively contributing code to React Native, or if you need to verify how your application behaves in an upcoming release.</p>
+
+            <a name="archive" />
+            <h3>Past Versions</h3>
+            <table className="versions">
+              <tbody>
+                {releases.map((version) =>
+                  <tr>
+                    <th>{version.title}</th>
+                    <td><a href={version.path}>Documentation</a></td>
+                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            <p>You can find past versions of React Native <a href="https://github.com/facebook/react-native/releases">on GitHub</a>. The release notes can be useful if you would like to learn when a specific feature or fix was released.</p>
+            <p>You can also view the docs for a particular version of React Native by clicking on the Docs link next to the release in this page. You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.</p>
           </div>
         </section>
       </Site>