Moved versions control into versions.yml and Gatsby plug-in

Author: bvaughn

content/versions.yml

@@ -0,0 +1,9 @@
+- title: '16.2.0'
+  path: /version/16.2
+  url: https://5abc31d8be40f1556f06c4be--reactjs.netlify.com
+- title: '16.1.1'
+  path: /version/16.1
+  url: https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com
+- title: '16.0.0'
+  path: /version/16.0
+  url: https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com

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,65 @@
+const {appendFile, exists, readFile, writeFile} = require('fs-extra');
+
+const HEADER_COMMENT = `## Created with gatsby-transformer-versions-yaml`;
+
+module.exports = async function writeRedirectsFile(redirects, publicFolder) {
+  if (!redirects.length) {
+    return null;
+  }
+
+  const FILE_PATH = publicFolder(`_redirects`);
+
+  // 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 the first 3 parameters is significant.
+    // The order for rest params (key-value pairs) is arbitrary.
+    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(FILE_PATH);
+  if (fileExists) {
+    const fileContents = await readFile(FILE_PATH);
+    if (fileContents.indexOf(HEADER_COMMENT) < 0) {
+      appendToFile = true;
+    }
+  }
+
+  const data = `${HEADER_COMMENT}\n\n${redirects.join(`\n`)}`;
+
+  return appendToFile
+    ? appendFile(FILE_PATH, `\n\n${data}`)
+    : writeFile(FILE_PATH, data);
+};

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

@@ -0,0 +1,32 @@
+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 path = resolve(__dirname, '../../content/versions.yml');
+  const file = readFileSync(path, 'utf8');
+  const versions = safeLoad(file);
+
+  // versions.yml structure is [{title: string, path: string, url: string}, ...]
+  createRedirects(
+    versions.map(version => ({
+      fromPath: version.path,
+      toPath: version.url,
+    })),
+    getPublicFolder(store),
+  );
+};
+
+function buildPrefixer(prefix, ...paths) {
+  return (...subpaths) => path.join(prefix, ...paths, ...subpaths);
+}
+
+function getPublicFolder(store) {
+  const {program} = store.getState();
+
+  return buildPrefixer(program.directory, `public`);
+}

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

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

src/pages/versions.js

@@ -11,6 +11,9 @@ 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}>
@@ -29,21 +32,13 @@ const Versions = () => (
           </p>
           <p>Documentation for recent releases can also be accessed below:</p>
           <ul>
-            <li>
-              <a href="/version/16.2" rel="nofollow">
-                16.2.0
-              </a>
-            </li>
-            <li>
-              <a href="/version/16.1" rel="nofollow">
-                16.1.1
-              </a>
-            </li>
-            <li>
-              <a href="/version/16.0" rel="nofollow">
-                16.0.0
-              </a>
-            </li>
+            {versions.map(version => (
+              <li key={version.title}>
+                <a href={version.path} rel="nofollow">
+                  {version.title}
+                </a>
+              </li>
+            ))}
           </ul>
         </div>
       </div>

static/_redirects

@@ -1,6 +1,2 @@
 /html-jsx.html  http://magic.reactjs.net/htmltojsx.htm  301
-/tips/controlled-input-null-value.html  /docs/forms.html#controlled-input-null-value
-
-/version/16.2  https://5abc31d8be40f1556f06c4be--reactjs.netlify.com/  301
-/version/16.1  https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com/  301
-/version/16.0  https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com/  301
+/tips/controlled-input-null-value.html  /docs/forms.html#controlled-input-null-value