fixes #30, migrate Versions page, add it to the dropdown

website/docusaurus.config.js

@@ -43,6 +43,7 @@ module.exports = {
             require.resolve('./src/css/customTheme.scss'),
             require.resolve('./src/css/index.scss'),
             require.resolve('./src/css/showcase.scss'),
+            require.resolve('./src/css/versions.scss'),
           ],
         },
       },
@@ -93,9 +94,14 @@ module.exports = {
         },
         {
           type: 'docsVersionDropdown',
-          // TODO: to: '/versions',
           position: 'left',
           dropdownActiveClassDisabled: true,
+          dropdownItemsAfter: [
+            {
+              to: '/versions',
+              label: 'All versions',
+            },
+          ],
         },
         {
           href: 'https://github.com/facebook/react-native',

website/src/css/versions.scss

@@ -0,0 +1,38 @@
+@import "shared";
+
+.versions-page {
+  max-width: 960px;
+  padding: 28px;
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  p a,
+  td a {
+    @extend %link-style;
+
+    code {
+      background: none;
+      white-space: nowrap;
+    }
+  }
+
+  table th,
+  table td {
+    min-width: 100px;
+    font-size: 15px;
+    padding: 8px 20px;
+  }
+}
+
+html[data-theme="dark"] .versions-page {
+  p a,
+  td a {
+    @extend %link-style-dark;
+  }
+}

website/src/pages/versions.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Layout from '@theme/Layout';
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+const versions = require('../../versions.json');
+
+const VersionItem = ({version, currentVersion}) => {
+  const versionName = version === 'next' ? 'Master' : version;
+
+  const isCurrentVersion = currentVersion === version;
+  const isNext = version === 'next';
+  const isRC = version.toUpperCase().indexOf('-RC') !== -1;
+
+  const latestMajorVersion = versions[0].toUpperCase().replace('-RC', '');
+  const documentationLink = (
+    <a
+      href={useBaseUrl(
+        'docs/' + (isCurrentVersion ? '' : version + '/') + 'getting-started'
+      )}>
+      Documentation
+    </a>
+  );
+  let releaseNotesURL = 'https://github.com/facebook/react-native/releases';
+  let releaseNotesTitle = 'Changelog';
+  if (isNext) {
+    releaseNotesURL = `https://github.com/facebook/react-native/compare/${latestMajorVersion}-stable...master`;
+    releaseNotesTitle = 'Commits since ' + latestMajorVersion;
+  } else if (!isRC) {
+    releaseNotesURL = `https://github.com/facebook/react-native/releases/tag/v${version}.0`;
+  }
+
+  const releaseNotesLink = <a href={releaseNotesURL}>{releaseNotesTitle}</a>;
+
+  return (
+    <tr>
+      <th>{versionName}</th>
+      <td>{documentationLink}</td>
+      <td>{releaseNotesLink}</td>
+    </tr>
+  );
+};
+
+const Versions = () => {
+  const currentVersion = versions.length > 0 ? versions[0] : null;
+  const latestVersions = ['next'].concat(
+    versions.filter(version => version.indexOf('-RC') !== -1)
+  );
+  const stableVersions = versions.filter(
+    version => version.indexOf('-RC') === -1
+  );
+
+  return (
+    <Layout wrapperClassName="versions-page">
+      <h1>React Native versions</h1>
+      <p>
+        Open source React Native releases follow a monthly release train that is
+        coordinated on GitHub through the{' '}
+        <a
+          href={
+            'https://github.com/react-native-community/react-native-releases'
+          }>
+          <code>react-native-releases</code>
+        </a>{' '}
+        repository. At the beginning of each month, a new release candidate is
+        created off the master branch of{' '}
+        <a href={'https://github.com/facebook/react-native'}>
+          <code>facebook/react-native</code>
+        </a>
+        . The release candidate will soak for a month to allow contributors like
+        yourself to{' '}
+        <a href={useBaseUrl('docs/upgrading')}>verify the changes</a> and to
+        identify any issues by{' '}
+        <a href="https://github.com/facebook/react-native/issues">
+          writing clear, actionable bug reports
+        </a>
+        . Eventually, the release candidate will be promoted to stable.
+      </p>
+      <h2>Latest versions</h2>
+      <p>
+        To see what changes are coming and provide better feedback to React
+        Native contributors, use the latest release candidate when possible.
+        Changes introduced in a release candidate will have been shipped to
+        production Facebook apps for over two weeks by the time the release
+        candidate is cut.
+      </p>
+      <table className="versions">
+        <tbody>
+          {latestVersions.map(function(version) {
+            return (
+              <VersionItem
+                key={'version_' + version}
+                version={version}
+                currentVersion={currentVersion}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+      <h2>Stable versions</h2>
+      <p>
+        The most recent stable version will be used automatically whenever a new
+        project is created using the <code>react-native init</code> command.
+      </p>
+      <table className="versions">
+        <tbody>
+          {stableVersions.map(function(version) {
+            return (
+              <VersionItem
+                key={'version_' + version}
+                version={version}
+                currentVersion={currentVersion}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+      <p>
+        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>
+    </Layout>
+  );
+};
+
+export default Versions;