[docs] Improve the onboarding

.size-limit

@@ -19,6 +19,6 @@
     "name": "The home page of the documentation",
     "path": ".next/bundles/pages/index.js",
     "webpack": false,
-    "limit": "4 KB"
+    "limit": "6 KB"
   }
 ]

README.md

@@ -29,13 +29,13 @@ Material-UI is available as an [npm package](https://www.npmjs.org/package/mater
 
 **[Stable channel (v0.x)](http://material-ui.com/)**
 ```sh
-npm install --save material-ui
+npm install material-ui
 ```
 
 **[Pre-release channel (v1-beta)](https://material-ui-next.com/)**
 ([Recommended](#should-i-start-with-v1-beta) for new projects.)
 ```sh
-npm install --save material-ui@next
+npm install material-ui@next
 ```
 
 Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.

docs/src/modules/components/AppFrame.js

@@ -162,6 +162,11 @@ class AppFrame extends React.Component {
 
   render() {
     const { children, classes, uiTheme } = this.props;
+
+    if (!this.context.activePage) {
+      throw new Error('Missing activePage.');
+    }
+
     const title =
       this.context.activePage.title !== false ? pageToTitle(this.context.activePage) : null;
 

docs/src/modules/components/HomeBackers.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import NoSSR from 'docs/src/modules/components/NoSSR';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+
+const styles = theme => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  markdownElement: {
+    maxWidth: theme.spacing.unit * 110,
+    margin: 'auto',
+    padding: theme.spacing.unit * 2,
+    minHeight: 600,
+  },
+});
+
+function HomeBackers(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <NoSSR>
+        <MarkdownElement
+          className={classes.markdownElement}
+          text={`
+<h2>Supporting Material-UI</h2>
+
+Material-UI is an MIT-licensed open source project.
+It's an independent project with ongoing development made possible entirely
+thanks to the support of these awesome [backers](/discover-more/backers).
+
+<h3>Gold Sponsors</h3>
+
+Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+
+#### via [Patreon](https://www.patreon.com/oliviertassinari)
+
+<table>
+  <tbody>
+    <tr>
+      <td>
+        <a href="https://www.creative-tim.com" rel="noopener" target="_blank">
+          <img width="126" src="https://avatars1.githubusercontent.com/u/20172349" alt="0">
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### via [OpenCollective](https://opencollective.com/material-ui)
+
+${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+            .map(
+              num =>
+                `<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/${num}/website" rel="noopener" target="_blank" style="margin-right: 8px;"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/${num}/avatar.svg" alt="${num}" /></a>`,
+            )
+            .join('')}
+`}
+        />
+      </NoSSR>
+    </div>
+  );
+}
+
+HomeBackers.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HomeBackers);

docs/src/modules/components/HomeFooter.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Typography from 'material-ui/Typography';
+import Grid from 'material-ui/Grid';
+import Link from 'docs/src/modules/components/Link';
+
+const styleSheet = theme => ({
+  root: {
+    maxWidth: theme.spacing.unit * 110,
+    margin: 'auto',
+    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    [theme.breakpoints.up('sm')]: {
+      padding: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px`,
+    },
+  },
+  list: {
+    margin: 0,
+    paddingLeft: 0,
+    listStyle: 'none',
+  },
+  listItem: {
+    paddingTop: theme.spacing.unit / 2,
+    paddingBottom: theme.spacing.unit / 2,
+  },
+  version: {
+    marginTop: theme.spacing.unit,
+  },
+});
+
+function HomeFooter(props) {
+  const { classes } = props;
+
+  return (
+    <footer className={classes.root}>
+      <Typography variant="title" gutterBottom>
+        Quick Links
+      </Typography>
+      <Typography variant="subheading" component="div">
+        <Grid container spacing={0}>
+          <Grid item xs={12} sm={6}>
+            <ul className={classes.list}>
+              <li className={classes.listItem}>
+                <Link href="https://github.com/mui-org/material-ui">GitHub</Link>
+              </li>
+              <li className={classes.listItem}>
+                <Link href="https://twitter.com/MaterialUI">Twitter</Link>
+              </li>
+              <li className={classes.listItem}>
+                <Link href="https://github.com/mui-org/material-ui/tree/v1-beta/examples">
+                  Examples
+                </Link>
+              </li>
+            </ul>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <ul className={classes.list}>
+              <li className={classes.listItem}>
+                <Link href="/discover-more/community">Community</Link>
+              </li>
+              <li className={classes.listItem}>
+                <Link href="/discover-more/roadmap">Roadmap</Link>
+              </li>
+              <li className={classes.listItem}>
+                <Link href="/discover-more/team">Team</Link>
+              </li>
+            </ul>
+          </Grid>
+        </Grid>
+      </Typography>
+      <Typography className={classes.version}>
+        {`Currently v${process.env.MATERIAL_UI_VERSION}. Released under the `}
+        <Link href="https://github.com/mui-org/material-ui/blob/v1-beta/LICENSE">MIT License</Link>
+        {'.'}
+      </Typography>
+    </footer>
+  );
+}
+
+HomeFooter.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(HomeFooter);