[1.0] WIP Upgrade React Router to v4 (#940)

* WIP RR v4 working in development * Add scrolling support + small refactors * Add clientside 404 support * Use more generic id for root div for Gatsby * Avoid unneeded dependency on create-react-class * Use fork of catch-links to avoid its dependency on the url module which adds ~25kb of JS https://github.com/jackmoore/catch-links/blob/aedc104ae5b1031b325398997827c76bb08d9f4c/index.js * Remove react-ga dependency as it adds unneeded weight * Static rendering working and production client entry sorta working * Get router working in production w/ lazy loading of bundles * Make this.props.children a function in layouts so can control which page is rendered as child * Add path-to-regexp to list of modules that should always be in commons * Expose navigateTo on gatsby-link for programmatic navigation * Stop using term 'routes' * Remove old routes generation code * Rename file * Add support for client-only paths & example site for this * Format + remove debugging
gatsbyjs · May 11, 2017 · 5c89bc3 · 5c89bc3
1 parent e2f4e41
commit 5c89bc3
Show file tree

Hide file tree

Showing 60 changed files with 1,041 additions and 598 deletions.
diff --git a/examples/client-only-paths/.eslintrc b/examples/client-only-paths/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}
diff --git a/examples/client-only-paths/README.md b/examples/client-only-paths/README.md
@@ -0,0 +1,6 @@
+# Client-only paths
+
+https://client-only-paths.gatsbyjs.org
+
+Example site that demostrates how to build Gatsby sites
+with paths that are client-only.
diff --git a/examples/client-only-paths/gatsby-config.js b/examples/client-only-paths/gatsby-config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  siteMetadata: {
+    title: `Client only paths`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+    `gatsby-plugin-offline`,
+  ],
+}
diff --git a/examples/client-only-paths/gatsby-node.js b/examples/client-only-paths/gatsby-node.js
@@ -0,0 +1,19 @@
+const _ = require(`lodash`)
+const Promise = require(`bluebird`)
+const path = require(`path`)
+const slash = require(`slash`)
+
+// Implement the Gatsby API “onUpsertPage”. This is
+// called after every page is created.
+exports.onUpsertPage = ({ page, boundActionCreators }) => {
+  const { upsertPage } = boundActionCreators
+  return new Promise((resolve, reject) => {
+    // Make the front page match everything client side.
+    // Normally your paths should be a bit more judicious.
+    if (page.path === `/` && !page.matchPath) {
+      page.matchPath = `/:path`
+      upsertPage(page)
+    }
+    resolve()
+  })
+}
diff --git a/examples/client-only-paths/package.json b/examples/client-only-paths/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gatsby-example-using-drupal",
+  "private": true,
+  "description": "Gatsby example site using the Drupal source plugin",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <[email protected]>",
+  "dependencies": {
+    "gatsby": "canary",
+    "gatsby-link": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-source-drupal": "canary",
+    "lodash": "^4.16.4",
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-typography": "^0.15.0",
+    "slash": "^1.0.0",
+    "typography": "^0.15.8",
+    "typography-breakpoint-constants": "^0.14.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}
diff --git a/examples/client-only-paths/src/html.js b/examples/client-only-paths/src/html.js
@@ -0,0 +1,56 @@
+import React from "react"
+import { TypographyStyle } from "react-typography"
+import typography from "./utils/typography"
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+module.exports = React.createClass({
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+
+    return (
+      <html op="news" lang="en">
+        <head>
+          {this.props.headComponents}
+
+          <meta name="referrer" content="origin" />
+          <meta charSet="utf-8" />
+          <meta
+            name="description"
+            content="Gatsby example site demoing client only paths"
+          />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Gatsby Client Only Paths</title>
+          <TypographyStyle typography={typography} />
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  },
+})
diff --git a/examples/client-only-paths/src/layouts/index.js b/examples/client-only-paths/src/layouts/index.js
@@ -0,0 +1,30 @@
+import React from "react"
+import Link from "gatsby-link"
+
+import { rhythm } from "../utils/typography"
+
+class DefaultLayout extends React.Component {
+  render() {
+    return (
+      <div
+        style={{
+          margin: `0 auto`,
+          marginTop: rhythm(1.5),
+          marginBottom: rhythm(1.5),
+          maxWidth: 650,
+          paddingLeft: rhythm(3 / 4),
+          paddingRight: rhythm(3 / 4),
+        }}
+      >
+        <Link style={{ textDecoration: `none` }} to="/">
+          <h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
+            Example of adding client only paths
+          </h3>
+        </Link>
+        {this.props.children()}
+      </div>
+    )
+  }
+}
+
+export default DefaultLayout
diff --git a/examples/client-only-paths/src/pages/index.js b/examples/client-only-paths/src/pages/index.js
@@ -0,0 +1,114 @@
+import React from "react"
+import Link from "gatsby-link"
+import ReactCSSTransitionGroup from "react-addons-css-transition-group"
+import { Route, Redirect } from "react-router-dom"
+
+import "./main.css"
+
+class AnimationExample extends React.Component {
+  render() {
+    return (
+      <div style={{ position: `relative`, minHeight: `80vh` }}>
+        <Route
+          render={({ location }) => (
+            <div style={styles.fill}>
+              <Route
+                exact
+                path="/"
+                render={() => <Redirect to="/10/90/50" />}
+              />
+
+              <ul style={styles.nav}>
+                <NavLink to="/10/90/50">Red</NavLink>
+                <NavLink to="/120/100/40">Green</NavLink>
+                <NavLink to="/200/100/40">Blue</NavLink>
+                <NavLink to="/310/100/50">Pink</NavLink>
+              </ul>
+
+              <div style={styles.content}>
+                <ReactCSSTransitionGroup
+                  transitionName="fade"
+                  transitionEnterTimeout={300}
+                  transitionLeaveTimeout={300}
+                >
+                  {/* no different than other usage of
+                ReactCSSTransitionGroup, just make
+                sure to pass `location` to `Route`
+                so it can match the old location
+                as it animates out
+            */}
+                  <Route
+                    location={location}
+                    key={location.key}
+                    path="/:h/:s/:l"
+                    component={HSL}
+                  />
+                </ReactCSSTransitionGroup>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  }
+}
+
+const NavLink = props => (
+  <li style={styles.navItem}>
+    <Link {...props} style={{ color: `inherit` }} />
+  </li>
+)
+
+const HSL = ({ match: { params } }) => (
+  <div
+    style={{
+      ...styles.fill,
+      ...styles.hsl,
+      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`,
+    }}
+  >
+    hsl({params.h}, {params.s}%, {params.l}%)
+  </div>
+)
+
+const styles = {}
+
+styles.fill = {
+  position: `absolute`,
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+}
+
+styles.content = {
+  ...styles.fill,
+  top: `40px`,
+  textAlign: `center`,
+}
+
+styles.nav = {
+  padding: 0,
+  margin: 0,
+  position: `absolute`,
+  top: 0,
+  height: `40px`,
+  width: `100%`,
+  display: `flex`,
+}
+
+styles.navItem = {
+  textAlign: `center`,
+  flex: 1,
+  listStyleType: `none`,
+  padding: `10px`,
+}
+
+styles.hsl = {
+  ...styles.fill,
+  color: `white`,
+  paddingTop: `20px`,
+  fontSize: `30px`,
+}
+
+export default AnimationExample
diff --git a/examples/client-only-paths/src/pages/main.css b/examples/client-only-paths/src/pages/main.css
@@ -0,0 +1,10 @@
+.fade-enter {
+  opacity: 0;
+  z-index: 1;
+}
+
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+}
+
diff --git a/examples/client-only-paths/src/utils/typography.js b/examples/client-only-paths/src/utils/typography.js
@@ -0,0 +1,38 @@
+import Typography from "typography"
+import {
+  MOBILE_MEDIA_QUERY,
+  TABLET_MEDIA_QUERY,
+} from "typography-breakpoint-constants"
+
+const options = {
+  baseFontSize: `18px`,
+  baseLineHeight: 1.45,
+  blockMarginBottom: 0.75,
+  scaleRatio: 2.15,
+  overrideStyles: ({ rhythm, scale }, options) => ({
+    "h1,h2,h3,h4": {
+      lineHeight: 1.2,
+    },
+    [TABLET_MEDIA_QUERY]: {
+      // Make baseFontSize on mobile 17px.
+      html: {
+        fontSize: `${17 / 16 * 100}%`,
+      },
+    },
+    [MOBILE_MEDIA_QUERY]: {
+      // Make baseFontSize on mobile 16px.
+      html: {
+        fontSize: `${16 / 16 * 100}%`,
+      },
+    },
+  }),
+}
+
+const typography = new Typography(options)
+
+// Hot reload typography in development.
+if (process.env.NODE_ENV !== `production`) {
+  typography.injectStyles()
+}
+
+export default typography
diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js
@@ -54,7 +54,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           // as a template component. The `context` is
           // optional but is often necessary so the template
           // can query data specific to each page.
-          path: slug(edge.node.id),
+          path: `/${slug(edge.node.id)}/`,
           component: slash(postTemplate),
           context: {
             id: edge.node.id,