Auto-deploy website

.gitignore

@@ -2,8 +2,13 @@ node_modules/
 npm-debug.log*
 yarn-error.log*
 lerna-debug.log*
+
 /packages/*/es/
 /packages/*/umd/
 /packages/*/index.js
 /doc.json
+
 .vscode
+
+/website-deploy-key
+/website-deploy-key.pub

.travis.yml

@@ -17,3 +17,19 @@ jobs:
       script: lerna publish from-git --yes --pre-dist-tag next
       on:
         tags: true
+  - stage: Deploy Website
+    if: branch = website
+    before_script: yarn build
+    script: echo "Deploying website to https://reacttraining.com/reach-ui/"
+    before_deploy:
+    - openssl aes-256-cbc -K $encrypted_e12d3fc86b46_key -iv $encrypted_e12d3fc86b46_iv
+      -in website-deploy-key.enc -out website-deploy-key -d
+    - chmod 600 website-deploy-key
+    - eval $(ssh-agent -s)
+    - ssh-add website-deploy-key
+    deploy:
+      provider: script
+      script: bash scripts/deploy-website.sh
+      skip_cleanup: true
+      on:
+        branch: website

package.json

@@ -10,7 +10,7 @@
     "build:changed": "lerna run build --parallel --since origin/master",
     "build": "lerna run build --parallel",
     "changes": "lerna-changelog",
-    "clean": "git clean -e '!/.env' -fdX .",
+    "clean": "git clean -e '!/.env' -e '!/website-deploy-key' -e '!/website-deploy-key.pub' -fdX .",
     "lint": "lerna run lint",
     "doc": "react-docgen packages/*/src/* --out www/docs/source.json --resolver findAllComponentDefinitions --pretty"
   },

scripts/deploy-website.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+set -e
+
+root_dir="$(dirname "$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null && pwd)")"
+tmp_dir="/tmp/reacttraining.com"
+
+# Clone reacttraining.com repo into the tmp dir
+rm -rf $tmp_dir
+git clone --depth 2 --branch master "git@github.com:ReactTraining/reacttraining.com.git" $tmp_dir
+
+# Build the website into the static/react-router dir
+rm -rf "$tmp_dir/static/reach-ui"
+cd "$root_dir/website"
+yarn
+yarn build --prefix-paths
+mv public "$tmp_dir/static/reach-ui"
+
+# Commit all changes
+cd $tmp_dir
+git add -A
+git commit \
+	--author "Travis CI <travis-ci@reacttraining.com>" \
+  -m "Update reach-ui website
+
+https://travis-ci.org/$TRAVIS_REPO_SLUG/builds/$TRAVIS_BUILD_ID"
+
+# Deploy
+git push origin master

www/gatsby-config.js → website/gatsby-config.js

@@ -1,61 +1,62 @@
 module.exports = {
+  pathPrefix: "/reach-ui/",
   siteMetadata: {
     title: "Reach UI",
     description: `The accessible foundation of your React apps and design systems.`,
-    author: `@ryanflorence`,
+    author: `@ryanflorence`
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
-        trackingId: "UA-121796914-2",
-      },
+        trackingId: "UA-121796914-2"
+      }
     },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
         extensions: [".mdx", ".md"],
         defaultLayouts: {
-          default: require.resolve("./src/components/mdx-layout.js"),
+          default: require.resolve("./src/components/mdx-layout.js")
         },
         gatsbyRemarkPlugins: [
           {
-            resolve: `gatsby-remark-images`,
+            resolve: `gatsby-remark-images`
           },
           {
-            resolve: `gatsby-remark-emoji`,
+            resolve: `gatsby-remark-emoji`
           },
           {
-            resolve: `gatsby-remark-slug`,
+            resolve: `gatsby-remark-slug`
           },
           {
-            resolve: `gatsby-remark-autolink-headers`,
-          },
-        ],
-      },
+            resolve: `gatsby-remark-autolink-headers`
+          }
+        ]
+      }
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `docs`,
         path: `${__dirname}/../packages`,
-        ignore: ["examples/**", "es/**", "umd/**"],
-      },
+        ignore: ["examples/**", "es/**", "umd/**"]
+      }
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `images`,
-        path: `${__dirname}/src/images`,
-      },
+        path: `${__dirname}/src/images`
+      }
     },
     {
       resolve: `gatsby-transformer-react-docgen`,
       options: {
         resolver: require("react-docgen").resolver.findAllComponentDefinitions,
-        babelrcRoots: ["../*"],
-      },
+        babelrcRoots: ["../*"]
+      }
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
@@ -68,8 +69,8 @@ module.exports = {
         background_color: "#1159a6",
         theme_color: "#1159a6",
         display: "minimal-ui",
-        icon: "src/images/reach-icon.png", // This path is relative to the root of the site.
-      },
-    },
-  ],
-}
+        icon: "src/images/reach-icon.png" // This path is relative to the root of the site.
+      }
+    }
+  ]
+};

www/src/components/DefaultHelmet.js → website/src/components/DefaultHelmet.js

@@ -1,6 +1,6 @@
-import React from "react"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from "react";
+import Helmet from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
 
 const DefaultHelmet = ({ meta = [], ...helmetProps }) => {
   const data = useStaticQuery(graphql`
@@ -12,21 +12,21 @@ const DefaultHelmet = ({ meta = [], ...helmetProps }) => {
         }
       }
     }
-  `)
+  `);
 
   return (
     <Helmet
       title={data.site.siteMetadata.title}
       meta={[
         {
           name: "description",
-          content: data.site.siteMetadata.description,
+          content: data.site.siteMetadata.description
         },
-        ...meta,
+        ...meta
       ]}
       {...helmetProps}
     />
-  )
-}
+  );
+};
 
-export default DefaultHelmet
+export default DefaultHelmet;

www/src/components/MatchMedia.js → website/src/components/MatchMedia.js

@@ -4,9 +4,7 @@ import createMediaListener from "./createMediaListener";
 let canUseDOM = typeof window !== "undefined";
 
 export default class MatchMedia extends React.Component {
-  media = canUseDOM
-    ? createMediaListener(this.props.media)
-    : null;
+  media = canUseDOM ? createMediaListener(this.props.media) : null;
 
   state = canUseDOM ? this.media.getState() : null;