[examples] Add a Gatsby Theme example (#17411)

examples/gatsby-theme/.gitignore

@@ -0,0 +1,19 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Gatsby.js
+/public
+/.cache

examples/gatsby-theme/README.md

@@ -0,0 +1,23 @@
+# Gatsby theme example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui-org/material-ui):
+
+```sh
+curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/gatsby-theme
+cd gatsby-theme
+```
+
+Install it and run:
+
+```sh
+npm install
+npm run develop
+```
+
+## The idea behind the example
+
+The is an alternative example to [`/examples/gatsby`](https://github.com/mui-org/material-ui/tree/master/examples/gatsby) leveraging [gatsby-theme-material-ui](https://github.com/hupe1980/gatsby-theme-material-ui/tree/master/packages/gatsby-theme-material-ui).
+The example bundles different Gatsby plugins into a single Gatsby theme.
+It trades less freedom for fewer boilerplate.

examples/gatsby-theme/gatsby-config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: ['gatsby-theme-material-ui'],
+  siteMetadata: {
+    title: 'My page',
+  },
+};

examples/gatsby-theme/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "gatsby-theme",
+  "version": "4.0.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "latest",
+    "gatsby": "latest",
+    "gatsby-theme-material-ui": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-helmet": "latest"
+  },
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve"
+  }
+}

examples/gatsby-theme/src/components/ProTip.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import Typography from '@material-ui/core/Typography';
+import { Link } from 'gatsby-theme-material-ui';
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: theme.spacing(6, 0, 3),
+  },
+  lightBulb: {
+    verticalAlign: 'middle',
+    marginRight: theme.spacing(1),
+  },
+}));
+
+export default function ProTip() {
+  const classes = useStyles();
+  return (
+    <Typography className={classes.root} color="textSecondary">
+      <LightBulbIcon className={classes.lightBulb} />
+      Pro tip: See more{' '}
+      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
+      Material-UI documentation.
+    </Typography>
+  );
+}

examples/gatsby-theme/src/gatsby-theme-material-ui-top-layout/theme.js

@@ -0,0 +1,22 @@
+import { red } from '@material-ui/core/colors';
+import { createMuiTheme } from '@material-ui/core/styles';
+
+// A custom theme for this app
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+    background: {
+      default: '#fff',
+    },
+  },
+});
+
+export default theme;

examples/gatsby-theme/src/pages/about.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { Link } from 'gatsby-theme-material-ui';
+import ProTip from '../components/ProTip';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+export default function About() {
+  return (
+    <Container maxWidth="sm">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Gatsby v4-beta example
+        </Typography>
+        <Link to="/">Go to the main page</Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

examples/gatsby-theme/src/pages/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { Link } from 'gatsby-theme-material-ui';
+import ProTip from '../components/ProTip';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+export default function Index() {
+  return (
+    <Container maxWidth="sm">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Gatsby v4-beta example
+        </Typography>
+        <Link to="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

examples/gatsby/README.md

@@ -19,3 +19,8 @@ npm run develop
 ## The idea behind the example
 
 [Gatsby](https://github.com/gatsbyjs/gatsby) is a static site generator for React.
+
+## gatsby-theme-material-ui
+
+Looking for an example with fewer boilerplate but less freedom?
+Check [`/examples/gatsby-theme`](https://github.com/mui-org/material-ui/tree/master/examples/gatsby-theme) out.

examples/gatsby/src/pages/about.js

@@ -19,7 +19,7 @@ function Copyright() {
   );
 }
 
-export default function App() {
+export default function About() {
   return (
     <Container maxWidth="sm">
       <Box my={4}>

examples/gatsby/src/pages/index.js

@@ -19,7 +19,7 @@ function Copyright() {
   );
 }
 
-export default function App() {
+export default function Index() {
   return (
     <Container maxWidth="sm">
       <Box my={4}>