From 78fd71aef45af9f5e6ebd62febf83edf385b2ded Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 29 Sep 2018 16:57:06 +0200
Subject: [PATCH] [docs] Improve the Gatsby demo

---
 .../create-react-app-with-flow/package.json   |  2 +-
 .../create-react-app-with-jss/package.json    |  2 +-
 examples/create-react-app/package.json        |  2 +-
 examples/gatsby/gatsby-browser.js             | 12 ++++++
 examples/gatsby/gatsby-ssr.js                 | 22 +++++++---
 examples/gatsby/package.json                  |  2 +-
 examples/gatsby/src/pages/about.js            | 43 +++++++++++++++++++
 examples/gatsby/src/pages/index.js            |  6 +++
 examples/gatsby/src/withRoot.js               |  2 +-
 examples/nextjs/package.json                  |  2 +-
 examples/parcel/package.json                  |  2 +-
 examples/ssr/package.json                     |  2 +-
 12 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 examples/gatsby/gatsby-browser.js
 create mode 100644 examples/gatsby/src/pages/about.js

diff --git a/examples/create-react-app-with-flow/package.json b/examples/create-react-app-with-flow/package.json
index ad52c50036b322..9b779ad5c77ba9 100644
--- a/examples/create-react-app-with-flow/package.json
+++ b/examples/create-react-app-with-flow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app-with-flow",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.0.0",
diff --git a/examples/create-react-app-with-jss/package.json b/examples/create-react-app-with-jss/package.json
index dcfc95146ae866..f4ef2310033074 100644
--- a/examples/create-react-app-with-jss/package.json
+++ b/examples/create-react-app-with-jss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app-with-jss",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index 978d74a6ee3536..a96d62a75690cc 100644
--- a/examples/create-react-app/package.json
+++ b/examples/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/examples/gatsby/gatsby-browser.js b/examples/gatsby/gatsby-browser.js
new file mode 100644
index 00000000000000..2acdc2e3432b36
--- /dev/null
+++ b/examples/gatsby/gatsby-browser.js
@@ -0,0 +1,12 @@
+/* eslint-disable react/prop-types, import/prefer-default-export */
+
+// It's not ready yet: https://github.com/gatsbyjs/gatsby/issues/8237.
+//
+// import React from 'react';
+// import withRoot from './src/withRoot';
+
+// const WithRoot = withRoot(props => props.children);
+
+// export const wrapRootElement = ({ element }) => {
+//   return <WithRoot key={Math.random()}>{element}</WithRoot>;
+// };
diff --git a/examples/gatsby/gatsby-ssr.js b/examples/gatsby/gatsby-ssr.js
index 5cb5fd66623877..1069c950d42a4d 100644
--- a/examples/gatsby/gatsby-ssr.js
+++ b/examples/gatsby/gatsby-ssr.js
@@ -1,14 +1,13 @@
-/* eslint-disable react/no-danger */
+/* eslint-disable react/prop-types, react/no-danger */
 
 const React = require('react');
 const { renderToString } = require('react-dom/server');
-const { JssProvider } = require('react-jss');
-const getPageContext = require('./src/getPageContext');
+const JssProvider = require('react-jss/lib/JssProvider').default;
+const getPageContext = require('./src/getPageContext').default;
 
 function replaceRenderer({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) {
   // Get the context of the page to collected side effects.
-  // Ternary to support Gatsby@1 and Gatsby@2 at the same time.
-  const muiPageContext = getPageContext.default ? getPageContext.default() : getPageContext();
+  const muiPageContext = getPageContext();
 
   const bodyHTML = renderToString(
     <JssProvider registry={muiPageContext.sheetsRegistry}>{bodyComponent}</JssProvider>,
@@ -18,11 +17,20 @@ function replaceRenderer({ bodyComponent, replaceBodyHTMLString, setHeadComponen
   setHeadComponents([
     <style
       type="text/css"
-      id="server-side-jss"
-      key="server-side-jss"
+      id="jss-server-side"
+      key="jss-server-side"
       dangerouslySetInnerHTML={{ __html: muiPageContext.sheetsRegistry.toString() }}
     />,
   ]);
 }
 
 exports.replaceRenderer = replaceRenderer;
+
+// It's not ready yet: https://github.com/gatsbyjs/gatsby/issues/8237.
+//
+// const withRoot = require('./src/withRoot').default;
+// const WithRoot = withRoot(props => props.children);
+
+// exports.wrapRootElement = ({ element }) => {
+//   return <WithRoot>{element}</WithRoot>;
+// };
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
index 24b7974084063c..57a839eba7b9c8 100644
--- a/examples/gatsby/package.json
+++ b/examples/gatsby/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/examples/gatsby/src/pages/about.js b/examples/gatsby/src/pages/about.js
new file mode 100644
index 00000000000000..78faee418aa761
--- /dev/null
+++ b/examples/gatsby/src/pages/about.js
@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import { Link } from 'gatsby';
+import withRoot from '../withRoot';
+
+const styles = theme => ({
+  root: {
+    textAlign: 'center',
+    paddingTop: theme.spacing.unit * 20,
+  },
+});
+
+function About(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="display1" gutterBottom>
+        Material-UI
+      </Typography>
+      <Typography variant="subheading" gutterBottom>
+        about page
+      </Typography>
+      <Typography gutterBottom>
+        <Link to="/">Go to the main page</Link>
+      </Typography>
+      <Button variant="contained" color="primary">
+        Do nothing button
+      </Button>
+    </div>
+  );
+}
+
+About.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withRoot(withStyles(styles)(About));
diff --git a/examples/gatsby/src/pages/index.js b/examples/gatsby/src/pages/index.js
index 3007bc046ac48d..a9fb671b50d85d 100644
--- a/examples/gatsby/src/pages/index.js
+++ b/examples/gatsby/src/pages/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
@@ -8,6 +10,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogActions from '@material-ui/core/DialogActions';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
+import { Link } from 'gatsby';
 import withRoot from '../withRoot';
 
 const styles = theme => ({
@@ -57,6 +60,9 @@ class Index extends React.Component {
         <Typography variant="subheading" gutterBottom>
           example project
         </Typography>
+        <Typography gutterBottom>
+          <Link to="/about">Go to the about page</Link>
+        </Typography>
         <Button variant="contained" color="secondary" onClick={this.handleClick}>
           Super Secret Password
         </Button>
diff --git a/examples/gatsby/src/withRoot.js b/examples/gatsby/src/withRoot.js
index 9095782ec6906b..396abc95f15c4e 100644
--- a/examples/gatsby/src/withRoot.js
+++ b/examples/gatsby/src/withRoot.js
@@ -13,7 +13,7 @@ function withRoot(Component) {
 
     componentDidMount() {
       // Remove the server-side injected CSS.
-      const jssStyles = document.querySelector('#server-side-jss');
+      const jssStyles = document.querySelector('#jss-server-side');
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles);
       }
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 2c066ca65ffb43..7dcb57b7e85c1f 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/examples/parcel/package.json b/examples/parcel/package.json
index 08a2df5fdeea2c..ce0d845390d334 100644
--- a/examples/parcel/package.json
+++ b/examples/parcel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parcel",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
index 662d78433285cb..c843ec838f055e 100644
--- a/examples/ssr/package.json
+++ b/examples/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssr",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@babel/core": "latest",