Merge pull request #801 from bvaughn/versions

Added redirects for old React versions

Author: bvaughn

content/versions.yml

@@ -0,0 +1,14 @@
+- title: '16.3.2'
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1632-april-16-2018
+- title: '16.2.0'
+  path: /version/16.2
+  url: https://5abc31d8be40f1556f06c4be--reactjs.netlify.com
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1620-november-28-2017
+- title: '16.1.1'
+  path: /version/16.1
+  url: https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1611-november-13-2017
+- title: '16.0.0'
+  path: /version/16.0
+  url: https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1600-september-26-2017

gatsby-config.js

@@ -20,6 +20,7 @@ module.exports = {
     'gatsby-source-react-error-codes',
     'gatsby-transformer-authors-yaml',
     'gatsby-transformer-home-example-code',
+    'gatsby-transformer-versions-yaml',
     'gatsby-plugin-netlify',
     'gatsby-plugin-glamor',
     'gatsby-plugin-react-next',

plugins/gatsby-transformer-versions-yaml/create-redirects.js

@@ -0,0 +1,67 @@
+const {appendFile, exists, readFile, writeFile} = require('fs-extra');
+
+const HEADER_COMMENT = `## Created with gatsby-transformer-versions-yaml`;
+
+// Patterned after the 'gatsby-plugin-netlify' plug-in:
+// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify/src/create-redirects.js
+module.exports = async function writeRedirectsFile(
+  redirects,
+  redirectsFilePath,
+) {
+  if (!redirects.length) {
+    return null;
+  }
+
+  // Map redirect data to the format Netlify expects
+  // https://www.netlify.com/docs/redirects/
+  redirects = redirects.map(redirect => {
+    const {
+      fromPath,
+      isPermanent,
+      redirectInBrowser, // eslint-disable-line no-unused-vars
+      toPath,
+      ...rest
+    } = redirect;
+
+    // The order of these parameters is significant.
+    const pieces = [
+      fromPath,
+      toPath,
+      isPermanent ? 301 : 302, // Status
+    ];
+
+    for (let key in rest) {
+      const value = rest[key];
+
+      if (typeof value === `string` && value.indexOf(` `) >= 0) {
+        console.warn(
+          `Invalid redirect value "${value}" specified for key "${key}". ` +
+            `Values should not contain spaces.`,
+        );
+      } else {
+        pieces.push(`${key}=${value}`);
+      }
+    }
+
+    return pieces.join(`  `);
+  });
+
+  let appendToFile = false;
+
+  // Websites may also have statically defined redirects
+  // In that case we should append to them (not overwrite)
+  // Make sure we aren't just looking at previous build results though
+  const fileExists = await exists(redirectsFilePath);
+  if (fileExists) {
+    const fileContents = await readFile(redirectsFilePath);
+    if (fileContents.indexOf(HEADER_COMMENT) < 0) {
+      appendToFile = true;
+    }
+  }
+
+  const data = `${HEADER_COMMENT}\n\n${redirects.join(`\n`)}`;
+
+  return appendToFile
+    ? appendFile(redirectsFilePath, `\n\n${data}`)
+    : writeFile(redirectsFilePath, data);
+};

plugins/gatsby-transformer-versions-yaml/gatsby-node.js

@@ -0,0 +1,29 @@
+const readFileSync = require('fs').readFileSync;
+const resolve = require('path').resolve;
+const safeLoad = require('js-yaml').safeLoad;
+const createRedirects = require('./create-redirects');
+const path = require('path');
+
+// Reads versions.yml data into GraphQL.
+// This is used to generate redirect rules for older documentation versions.
+exports.onPostBuild = async ({store}) => {
+  const versionsFile = resolve(__dirname, '../../content/versions.yml');
+  const file = readFileSync(versionsFile, 'utf8');
+  const versions = safeLoad(file);
+
+  const {program} = store.getState();
+  const redirectsFilePath = path.join(
+    program.directory,
+    'public',
+    '_redirects',
+  );
+
+  // versions.yml structure is [{path: string, url: string, ...}, ...]
+  createRedirects(
+    versions.filter(version => version.path && version.url).map(version => ({
+      fromPath: version.path,
+      toPath: version.url,
+    })),
+    redirectsFilePath,
+  );
+};

plugins/gatsby-transformer-versions-yaml/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-transformer-versions-yaml",
+  "version": "0.0.1"
+}

src/components/LayoutHeader/Header.js

@@ -162,9 +162,7 @@ const Header = ({location}: {location: Location}) => (
                 borderRadius: 15,
               },
             }}
-            href="https://github.com/facebook/react/releases"
-            target="_blank"
-            rel="noopener">
+            href="/versions">
             v{version}
           </a>
           <a

src/pages/versions.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import Container from 'components/Container';
+import Header from 'components/Header';
+import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import React from 'react';
+import {sharedStyles} from 'theme';
+
+// $FlowFixMe This is a valid path
+import versions from '../../content/versions.yml';
+
+const Versions = () => (
+  <Container>
+    <div css={sharedStyles.articleLayout.container}>
+      <div css={sharedStyles.articleLayout.content}>
+        <Header>React Versions</Header>
+        <TitleAndMetaTags title="React - Versions" />
+        <div css={sharedStyles.markdown}>
+          <p>
+            A complete release history for React is available{' '}
+            <a
+              href="https://github.com/facebook/react/releases"
+              target="_blank"
+              rel="noopener">
+              in GitHub
+            </a>. Documentation for recent releases can also be found below:
+          </p>
+          {versions.map(version => (
+            <div key={version.title}>
+              <h3>{version.title}</h3>
+              <ul>
+                <li>
+                  <a href={version.changelog} target="_blank" rel="noopener">
+                    Changelog
+                  </a>
+                </li>
+                {version.path && (
+                  <li>
+                    <a href={version.path} rel="nofollow">
+                      Documentation
+                    </a>
+                  </li>
+                )}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </Container>
+);
+
+export default Versions;

static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /version/