Added ability to switch version in documentation website

Reviewed By: svcscm

Differential Revision: D2932534

fb-gh-sync-id: e67f028c914b64424458dad8fe52e588f6d0cd1c
shipit-source-id: e67f028c914b64424458dad8fe52e588f6d0cd1c

website/core/Site.js

@@ -16,6 +16,7 @@ var Metadata = require('Metadata');
 var Site = React.createClass({
   render: function() {
     const path = Metadata.config.RN_DEPLOYMENT_PATH;
+    const version = Metadata.config.RN_VERSION;
     var basePath = '/react-native/' + (path ? path + '/' : '');
     var title = this.props.title ? this.props.title + ' – ' : '';
     var currentYear = (new Date()).getFullYear();
@@ -52,6 +53,9 @@ var Site = React.createClass({
                   <img src="img/header_logo.png" />
                   React Native
                 </a>
+                <a className="nav-version" href="/react-native/versions.html">
+                  {version}
+                </a>
                 <HeaderLinks section={this.props.section} />
               </div>
             </div>

website/package.json

@@ -1,21 +1,22 @@
 {
   "scripts": {
-    "start": "node server/server.js",
+    "start": "RN_VERSION=next node server/server.js",
     "gh-pages": "node publish-gh-pages.js"
   },
   "dependencies": {
     "bluebird": "^2.9.21",
     "connect": "2.8.3",
-    "esprima-fb": "latest",
-    "fs.extra": "latest",
-    "glob": "latest",
-    "jstransform": "latest",
-    "mkdirp": "latest",
+    "esprima-fb": "15001.1001.0-dev-harmony-fb",
+    "fs.extra": "1.3.2",
+    "glob": "6.0.4",
+    "jstransform": "11.0.3",
+    "mkdirp": "^0.5.1",
     "optimist": "0.6.0",
     "react": "~0.13.0",
     "react-docgen": "^2.0.1",
     "react-page-middleware": "git://github.com/facebook/react-page-middleware.git",
-    "request": "latest",
+    "request": "^2.69.0",
+    "semver-compare": "^1.0.0",
     "shelljs": "^0.6.0"
   }
 }

website/publish-gh-pages.js

@@ -8,14 +8,15 @@
  */
 'use strict';
 
-const CIRCLE_BRANCH = process.env.CIRCLE_BRANCH || '';
+var semverCmp = require('semver-compare');
+require(`shelljs/global`);
+
+const CIRCLE_BRANCH = process.env.CIRCLE_BRANCH;
 const CIRCLE_PROJECT_USERNAME = process.env.CIRCLE_PROJECT_USERNAME;
-const CIRCLE_PROJECT_REPONAME = process.env.CIRCLE_PROJECT_REPONAME;
 const CI_PULL_REQUESTS = process.env.CI_PULL_REQUESTS;
 const CI_PULL_REQUEST = process.env.CI_PULL_REQUEST;
 const GIT_USER = process.env.GIT_USER;
 const remoteBranch = `https://${GIT_USER}@github.com/facebook/react-native.git`;
-require(`shelljs/global`);
 
 if (!which(`git`)) {
   echo(`Sorry, this script requires git`);
@@ -55,25 +56,37 @@ if (!CI_PULL_REQUEST && CIRCLE_PROJECT_USERNAME === `facebook`) {
     echo(`Error: Git checkout gh-pages failed`);
     exit(1);
   }
+  cd(`releases`);
+  var releasesFolders = ls(`-d`, `*`)
+  cd(`..`);
+  var versions = releasesFolders.filter(name => name !== `next`);
+  if (versions.indexOf(version) === -1) {
+    versions.push(version);
+  }
+  versions.sort(semverCmp).reverse();
+
   // generate to releases/XX when branch name indicates that it is some sort of release
   if (!!version) {
     echo(`------------ DEPLOYING /releases/${version}`);
     rm(`-rf`, `releases/${version}`);
     mkdir(`-p`, `releases/${version}`);
     cd(`../..`);
-    if (exec(`RN_DEPLOYMENT_PATH=releases/${version} node server/generate.js`).code !== 0) {
+    if (exec(`RN_DEPLOYMENT_PATH=releases/${version} RN_VERSION=${version} \
+    RN_AVAILABLE_DOCS_VERSIONS=${versions.join(',')} node server/generate.js`).code !== 0) {
       echo(`Error: Generating HTML failed`);
       exit(1);
     }
     cd(`build/react-native-gh-pages`);
     exec(`cp -R ../react-native/* releases/${version}`);
+    // versions.html is located in root of website and updated with every release
+    exec(`cp ../react-native/versions.html .`);
   }
   if (currentCommit === latestTagCommit) {
     echo(`------------ DEPLOYING latest`);
     // leave only releases folder
     rm(`-rf`, ls(`*`).filter(name => name !== 'releases'));
     cd(`../..`);
-    if (exec(`node server/generate.js`).code !== 0) {
+    if (exec(`RN_VERSION=${version} RN_AVAILABLE_DOCS_VERSIONS=${versions} node server/generate.js`).code !== 0) {
       echo(`Error: Generating HTML failed`);
       exit(1);
     }

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

@@ -312,6 +312,14 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   display: inline;
 }
 
+.nav-main a.nav-version {
+  font-size: 16px;
+  font-weight: 800;
+  color: #05A5D1;
+  margin-left: 5px;
+  text-decoration: underline;
+}
+
 .hero {
   background: #05A5D1;
   padding: 50px 0;
@@ -478,6 +486,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   box-shadow: 5px 5px 5px #888888;
 }
 
+.versions ul {
+  list-style: none;
+}
+
+.versions li {
+  font-size: 16px;
+  padding-top: 10px;
+}
+
 #examples h3, .home-presentation h3 {
   color: #2d2d2d;
   font-size: 24px;

website/src/react-native/versions.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var React = require('React');
+var Site = require('Site');
+var Metadata = require('Metadata');
+
+var versions = React.createClass({
+  render: function() {
+
+    var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS || '').split(',');
+    var versions = [
+      {
+        title: 'next',
+        path: '/react-native/releases/next',
+      },
+      {
+        title: 'stable',
+        path: '/react-native',
+      },
+    ].concat(availableDocs.map((version) => {
+      return {
+        title: version,
+        path: '/react-native/releases/' + version
+      }
+    }));
+    var versionsLi = versions.map((version) =>
+      <li><a href={version.path}>{version.title}</a></li>
+    );
+    return (
+      <Site section="versions" title="Documentation archive">
+        <section className="content wrap versions documentationContent">
+          <h1>Documentation archive</h1>
+          <ul>
+            {versionsLi}
+          </ul>
+        </section>
+      </Site>
+    );
+  }
+});
+
+module.exports = versions;