[docs] Improve the Gatsby demo

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",

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",

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",

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>;
+// };

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>;
+// };

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",

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));

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>

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);
       }

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",

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",

examples/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@babel/core": "latest",