From e2f36acafec225e95f9c77ac080989a5e9de355a Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 30 Nov 2019 19:08:15 +0000
Subject: [PATCH 1/2] [docs] Break up blog template into smaller sections

---
 .../getting-started/templates/blog/Blog.js    | 325 ++++--------------
 .../templates/blog/FeaturedPost.js            |  59 ++++
 .../getting-started/templates/blog/Footer.js  |  51 +++
 .../getting-started/templates/blog/Header.js  |  74 ++++
 .../getting-started/templates/blog/Main.js    |  38 ++
 .../templates/blog/MainFeaturedPost.js        |  68 ++++
 .../templates/blog/Markdown.js                |   2 +-
 .../getting-started/templates/blog/Sidebar.js |  56 +++
 .../templates/blog/blog-post.1.md             |  14 +-
 .../templates/blog/blog-post.2.md             |   2 +-
 .../templates/blog/blog-post.3.md             |   8 +-
 11 files changed, 418 insertions(+), 279 deletions(-)
 create mode 100644 docs/src/pages/getting-started/templates/blog/FeaturedPost.js
 create mode 100644 docs/src/pages/getting-started/templates/blog/Footer.js
 create mode 100644 docs/src/pages/getting-started/templates/blog/Header.js
 create mode 100644 docs/src/pages/getting-started/templates/blog/Main.js
 create mode 100644 docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js
 create mode 100644 docs/src/pages/getting-started/templates/blog/Sidebar.js

diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
index 889c34e1f10f72..a9c5eef7d00d0c 100644
--- a/docs/src/pages/getting-started/templates/blog/Blog.js
+++ b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -1,156 +1,86 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import SearchIcon from '@material-ui/icons/Search';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
-import Hidden from '@material-ui/core/Hidden';
-import Link from '@material-ui/core/Link';
-import Button from '@material-ui/core/Button';
-import Divider from '@material-ui/core/Divider';
 import Container from '@material-ui/core/Container';
-import Markdown from './Markdown';
+import Header from './Header';
+import MainFeaturedPost from './MainFeaturedPost';
+import FeaturedPost from './FeaturedPost';
+import Main from './Main';
+import Sidebar from './Sidebar';
+import Footer from './Footer';
 import post1 from './blog-post.1.md';
 import post2 from './blog-post.2.md';
 import post3 from './blog-post.3.md';
 
-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>
-  );
-}
-
 const useStyles = makeStyles(theme => ({
-  toolbar: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  toolbarTitle: {
-    flex: 1,
-  },
-  toolbarSecondary: {
-    justifyContent: 'space-between',
-    overflowX: 'auto',
-  },
-  toolbarLink: {
-    padding: theme.spacing(1),
-    flexShrink: 0,
-  },
-  mainFeaturedPost: {
-    position: 'relative',
-    backgroundColor: theme.palette.grey[800],
-    color: theme.palette.common.white,
-    marginBottom: theme.spacing(4),
-    backgroundImage: 'url(https://source.unsplash.com/user/erondu)',
-    backgroundSize: 'cover',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0,
-    backgroundColor: 'rgba(0,0,0,.3)',
-  },
-  mainFeaturedPostContent: {
-    position: 'relative',
-    padding: theme.spacing(3),
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(6),
-      paddingRight: 0,
-    },
-  },
   mainGrid: {
     marginTop: theme.spacing(3),
   },
-  card: {
-    display: 'flex',
-  },
-  cardDetails: {
-    flex: 1,
-  },
-  cardMedia: {
-    width: 160,
-  },
-  markdown: {
-    ...theme.typography.body2,
-    padding: theme.spacing(3, 0),
-  },
-  sidebarAboutBox: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.grey[200],
-  },
-  sidebarSection: {
-    marginTop: theme.spacing(3),
-  },
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    marginTop: theme.spacing(8),
-    padding: theme.spacing(6, 0),
-  },
 }));
 
 const sections = [
-  'Technology',
-  'Design',
-  'Culture',
-  'Business',
-  'Politics',
-  'Opinion',
-  'Science',
-  'Health',
-  'Style',
-  'Travel',
+  { title: 'Technology', url: '#' },
+  { title: 'Design', url: '#' },
+  { title: 'Culture', url: '#' },
+  { title: 'Business', url: '#' },
+  { title: 'Politics', url: '#' },
+  { title: 'Opinion', url: '#' },
+  { title: 'Science', url: '#' },
+  { title: 'Health', url: '#' },
+  { title: 'Style', url: '#' },
+  { title: 'Travel', url: '#' },
 ];
 
+const mainFeaturedPost = {
+  title: 'Title of a longer featured blog post',
+  description:
+    "Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.",
+  image: 'https://source.unsplash.com/random',
+  imgText: 'main image description',
+  linkText: 'Continue reading…',
+};
+
 const featuredPosts = [
   {
     title: 'Featured post',
     date: 'Nov 12',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
+    image: 'https://source.unsplash.com/random',
+    imageText: 'Image Text',
   },
   {
     title: 'Post title',
     date: 'Nov 11',
     description:
       'This is a wider card with supporting text below as a natural lead-in to additional content.',
+    image: 'https://source.unsplash.com/random',
+    imageText: 'Image Text',
   },
 ];
 
 const posts = [post1, post2, post3];
 
-const archives = [
-  'March 2020',
-  'February 2020',
-  'January 2020',
-  'December 2019',
-  'November 2019',
-  'October 2019',
-  'September 2019',
-  'August 2019',
-  'July 2019',
-  'June 2019',
-  'May 2019',
-  'April 2019',
-];
-
-const social = ['GitHub', 'Twitter', 'Facebook'];
+const sidebar = {
+  title: 'About',
+  description:
+    'Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.',
+  archives: [
+    { title: 'March 2020', url: '#' },
+    { title: 'February 2020', url: '#' },
+    { title: 'January 2020', url: '#' },
+    { title: 'November 1999', url: '#' },
+    { title: 'October 1999', url: '#' },
+    { title: 'September 1999', url: '#' },
+    { title: 'August 1999', url: '#' },
+    { title: 'July 1999', url: '#' },
+    { title: 'June 1999', url: '#' },
+    { title: 'May 1999', url: '#' },
+    { title: 'April 1999', url: '#' },
+  ],
+  social: ['GitHub', 'Twitter', 'Facebook'],
+};
 
 export default function Blog() {
   const classes = useStyles();
@@ -159,163 +89,26 @@ export default function Blog() {
     <React.Fragment>
       <CssBaseline />
       <Container maxWidth="lg">
-        <Toolbar className={classes.toolbar}>
-          <Button size="small">Subscribe</Button>
-          <Typography
-            component="h2"
-            variant="h5"
-            color="inherit"
-            align="center"
-            noWrap
-            className={classes.toolbarTitle}
-          >
-            Blog
-          </Typography>
-          <IconButton>
-            <SearchIcon />
-          </IconButton>
-          <Button variant="outlined" size="small">
-            Sign up
-          </Button>
-        </Toolbar>
-        <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
-          {sections.map(section => (
-            <Link
-              color="inherit"
-              noWrap
-              key={section}
-              variant="body2"
-              href="#"
-              className={classes.toolbarLink}
-            >
-              {section}
-            </Link>
-          ))}
-        </Toolbar>
+        <Header title="Blog" sections={sections} />
         <main>
-          {/* Main featured post */}
-          <Paper className={classes.mainFeaturedPost}>
-            {/* Increase the priority of the hero background image */}
-            {
-              <img
-                style={{ display: 'none' }}
-                src="https://source.unsplash.com/user/erondu"
-                alt="background"
-              />
-            }
-            <div className={classes.overlay} />
-            <Grid container>
-              <Grid item md={6}>
-                <div className={classes.mainFeaturedPostContent}>
-                  <Typography component="h1" variant="h3" color="inherit" gutterBottom>
-                    Title of a longer featured blog post
-                  </Typography>
-                  <Typography variant="h5" color="inherit" paragraph>
-                    Multiple lines of text that form the lede, informing new readers quickly and
-                    efficiently about what&apos;s most interesting in this post&apos;s contents.
-                  </Typography>
-                  <Link variant="subtitle1" href="#">
-                    Continue reading…
-                  </Link>
-                </div>
-              </Grid>
-            </Grid>
-          </Paper>
-          {/* End main featured post */}
-          {/* Sub featured posts */}
+          <MainFeaturedPost post={mainFeaturedPost} />
           <Grid container spacing={4}>
             {featuredPosts.map(post => (
-              <Grid item key={post.title} xs={12} md={6}>
-                <CardActionArea component="a" href="#">
-                  <Card className={classes.card}>
-                    <div className={classes.cardDetails}>
-                      <CardContent>
-                        <Typography component="h2" variant="h5">
-                          {post.title}
-                        </Typography>
-                        <Typography variant="subtitle1" color="textSecondary">
-                          {post.date}
-                        </Typography>
-                        <Typography variant="subtitle1" paragraph>
-                          {post.description}
-                        </Typography>
-                        <Typography variant="subtitle1" color="primary">
-                          Continue reading...
-                        </Typography>
-                      </CardContent>
-                    </div>
-                    <Hidden xsDown>
-                      <CardMedia
-                        className={classes.cardMedia}
-                        image="https://source.unsplash.com/random"
-                        title="Image title"
-                      />
-                    </Hidden>
-                  </Card>
-                </CardActionArea>
-              </Grid>
+              <FeaturedPost key={post.title} post={post} />
             ))}
           </Grid>
-          {/* End sub featured posts */}
           <Grid container spacing={5} className={classes.mainGrid}>
-            {/* Main content */}
-            <Grid item xs={12} md={8}>
-              <Typography variant="h6" gutterBottom>
-                From the Firehose
-              </Typography>
-              <Divider />
-              {posts.map(post => (
-                <Markdown className={classes.markdown} key={post.substring(0, 40)}>
-                  {post}
-                </Markdown>
-              ))}
-            </Grid>
-            {/* End main content */}
-            {/* Sidebar */}
-            <Grid item xs={12} md={4}>
-              <Paper elevation={0} className={classes.sidebarAboutBox}>
-                <Typography variant="h6" gutterBottom>
-                  About
-                </Typography>
-                <Typography>
-                  Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit
-                  amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
-                </Typography>
-              </Paper>
-              <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
-                Archives
-              </Typography>
-              {archives.map(archive => (
-                <Link display="block" variant="body1" href="#" key={archive}>
-                  {archive}
-                </Link>
-              ))}
-              <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
-                Social
-              </Typography>
-              {social.map(network => (
-                <Link display="block" variant="body1" href="#" key={network}>
-                  {network}
-                </Link>
-              ))}
-            </Grid>
-            {/* End sidebar */}
+            <Main title="From the firehose" posts={posts} />
+            <Sidebar
+              title={sidebar.title}
+              description={sidebar.description}
+              archives={sidebar.archives}
+              social={sidebar.social}
+            />
           </Grid>
         </main>
       </Container>
-      {/* Footer */}
-      <footer className={classes.footer}>
-        <Container maxWidth="lg">
-          <Typography variant="h6" align="center" gutterBottom>
-            Footer
-          </Typography>
-          <Typography variant="subtitle1" align="center" color="textSecondary" component="p">
-            Something here to give the footer a purpose!
-          </Typography>
-          <Copyright />
-        </Container>
-      </footer>
-      {/* End footer */}
+      <Footer title="Footer" description="Something here to give the footer a purpose!" />
     </React.Fragment>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/blog/FeaturedPost.js b/docs/src/pages/getting-started/templates/blog/FeaturedPost.js
new file mode 100644
index 00000000000000..463932db0bcf19
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/FeaturedPost.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Hidden from '@material-ui/core/Hidden';
+
+const useStyles = makeStyles({
+  card: {
+    display: 'flex',
+  },
+  cardDetails: {
+    flex: 1,
+  },
+  cardMedia: {
+    width: 160,
+  },
+});
+
+export default function FeaturedPost(props) {
+  const classes = useStyles();
+  const { post } = props;
+
+  return (
+    <Grid item xs={12} md={6}>
+      <CardActionArea component="a" href="#">
+        <Card className={classes.card}>
+          <div className={classes.cardDetails}>
+            <CardContent>
+              <Typography component="h2" variant="h5">
+                {post.title}
+              </Typography>
+              <Typography variant="subtitle1" color="textSecondary">
+                {post.date}
+              </Typography>
+              <Typography variant="subtitle1" paragraph>
+                {post.description}
+              </Typography>
+              <Typography variant="subtitle1" color="primary">
+                Continue reading...
+              </Typography>
+            </CardContent>
+          </div>
+          <Hidden xsDown>
+            <CardMedia className={classes.cardMedia} image={post.image} title={post.imageTitle} />
+          </Hidden>
+        </Card>
+      </CardActionArea>
+    </Grid>
+  );
+}
+
+FeaturedPost.propTypes = {
+  post: PropTypes.object,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/Footer.js b/docs/src/pages/getting-started/templates/blog/Footer.js
new file mode 100644
index 00000000000000..7064c4c9c78a50
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/Footer.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+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>
+  );
+}
+
+const useStyles = makeStyles(theme => ({
+  footer: {
+    backgroundColor: theme.palette.background.paper,
+    // marginTop: theme.spacing(8),
+    padding: theme.spacing(6, 0),
+  },
+}));
+
+export default function Footer(props) {
+  const classes = useStyles();
+  const { description, title } = props;
+
+  return (
+    <footer className={classes.footer}>
+      <Container maxWidth="lg">
+        <Typography variant="h6" align="center" gutterBottom>
+          {title}
+        </Typography>
+        <Typography variant="subtitle1" align="center" color="textSecondary" component="p">
+          {description}
+        </Typography>
+        <Copyright />
+      </Container>
+    </footer>
+  );
+}
+
+Footer.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/Header.js b/docs/src/pages/getting-started/templates/blog/Header.js
new file mode 100644
index 00000000000000..898a38006cd995
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/Header.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Toolbar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+  toolbar: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  toolbarTitle: {
+    flex: 1,
+  },
+  toolbarSecondary: {
+    justifyContent: 'space-between',
+    overflowX: 'auto',
+  },
+  toolbarLink: {
+    padding: theme.spacing(1),
+    flexShrink: 0,
+  },
+}));
+
+export default function Header(props) {
+  const classes = useStyles();
+  const { sections, title } = props;
+
+  return (
+    <React.Fragment>
+      <Toolbar className={classes.toolbar}>
+        <Button size="small">Subscribe</Button>
+        <Typography
+          component="h2"
+          variant="h5"
+          color="inherit"
+          align="center"
+          noWrap
+          className={classes.toolbarTitle}
+        >
+          {title}
+        </Typography>
+        <IconButton>
+          <SearchIcon />
+        </IconButton>
+        <Button variant="outlined" size="small">
+          Sign up
+        </Button>
+      </Toolbar>
+      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+        {sections.map(section => (
+          <Link
+            color="inherit"
+            noWrap
+            key={section.title}
+            variant="body2"
+            href={section.url}
+            className={classes.toolbarLink}
+          >
+            {section.title}
+          </Link>
+        ))}
+      </Toolbar>
+    </React.Fragment>
+  );
+}
+
+Header.propTypes = {
+  sections: PropTypes.array,
+  title: PropTypes.string,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/Main.js b/docs/src/pages/getting-started/templates/blog/Main.js
new file mode 100644
index 00000000000000..698c2b11754347
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/Main.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import Markdown from './Markdown';
+
+const useStyles = makeStyles(theme => ({
+  markdown: {
+    ...theme.typography.body2,
+    padding: theme.spacing(3, 0),
+  },
+}));
+
+export default function Main(props) {
+  const classes = useStyles();
+  const { posts, title } = props;
+
+  return (
+    <Grid item xs={12} md={8}>
+      <Typography variant="h6" gutterBottom>
+        {title}
+      </Typography>
+      <Divider />
+      {posts.map(post => (
+        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
+          {post}
+        </Markdown>
+      ))}
+    </Grid>
+  );
+}
+
+Main.propTypes = {
+  posts: PropTypes.array,
+  title: PropTypes.string,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js b/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js
new file mode 100644
index 00000000000000..ec8406bcc7deae
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+  mainFeaturedPost: {
+    position: 'relative',
+    backgroundColor: theme.palette.grey[800],
+    color: theme.palette.common.white,
+    marginBottom: theme.spacing(4),
+    backgroundImage: 'url(https://source.unsplash.com/random)',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: 'rgba(0,0,0,.3)',
+  },
+  mainFeaturedPostContent: {
+    position: 'relative',
+    padding: theme.spacing(3),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(6),
+      paddingRight: 0,
+    },
+  },
+}));
+
+export default function MainFeaturedPost(props) {
+  const classes = useStyles();
+  const { post } = props;
+
+  return (
+    <Paper className={classes.mainFeaturedPost} style={{ backgroundImage: `url(${post.image})` }}>
+      {/* Increase the priority of the hero background image */}
+      {<img style={{ display: 'none' }} src={post.image} alt={post.imageText} />}
+      <div className={classes.overlay} />
+      <Grid container>
+        <Grid item md={6}>
+          <div className={classes.mainFeaturedPostContent}>
+            <Typography component="h1" variant="h3" color="inherit" gutterBottom>
+              {post.title}
+            </Typography>
+            <Typography variant="h5" color="inherit" paragraph>
+              {post.description}
+            </Typography>
+            <Link variant="subtitle1" href="#">
+              {post.linkText}
+            </Link>
+          </div>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+}
+
+MainFeaturedPost.propTypes = {
+  post: PropTypes.object,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/Markdown.js b/docs/src/pages/getting-started/templates/blog/Markdown.js
index 4f173e8309e5b5..4ad95951cd01fe 100644
--- a/docs/src/pages/getting-started/templates/blog/Markdown.js
+++ b/docs/src/pages/getting-started/templates/blog/Markdown.js
@@ -16,7 +16,7 @@ const options = {
       component: Typography,
       props: {
         gutterBottom: true,
-        variant: 'h4',
+        variant: 'h5',
       },
     },
     h2: { component: Typography, props: { gutterBottom: true, variant: 'h6' } },
diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
new file mode 100644
index 00000000000000..df0282df917a85
--- /dev/null
+++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+const useStyles = makeStyles(theme => ({
+  sidebarAboutBox: {
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.grey[200],
+  },
+  sidebarSection: {
+    marginTop: theme.spacing(3),
+  },
+}));
+
+export default function Sidebar(props) {
+  const classes = useStyles();
+  const { archives, description, social, title } = props;
+
+  return (
+    <Grid item xs={12} md={4}>
+      <Paper elevation={0} className={classes.sidebarAboutBox}>
+        <Typography variant="h6" gutterBottom>
+          {title}
+        </Typography>
+        <Typography>{description}</Typography>
+      </Paper>
+      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+        Archives
+      </Typography>
+      {archives.map(archive => (
+        <Link display="block" variant="body1" href={archive.url} key={archive.title}>
+          {archive.title}
+        </Link>
+      ))}
+      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+        Social
+      </Typography>
+      {social.map(network => (
+        <Link display="block" variant="body1" href="#" key={network}>
+          {network}
+        </Link>
+      ))}
+    </Grid>
+  );
+}
+
+Sidebar.propTypes = {
+  archives: PropTypes.array,
+  description: PropTypes.string,
+  social: PropTypes.array,
+  title: PropTypes.string,
+};
diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.1.md b/docs/src/pages/getting-started/templates/blog/blog-post.1.md
index a70375a83a6fb4..2a8c5cff0867b4 100644
--- a/docs/src/pages/getting-started/templates/blog/blog-post.1.md
+++ b/docs/src/pages/getting-started/templates/blog/blog-post.1.md
@@ -1,4 +1,4 @@
-## Sample blog post
+# Sample blog post
 
 #### April 1, 2020 by [Olivier](/)
 
@@ -33,14 +33,14 @@ Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna m
 Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
 sit amet risus.
 
- - Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- - Donec id elit non mi porta gravida at eget metus.
- - Nulla vitae elit libero, a pharetra augue.
+- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+- Donec id elit non mi porta gravida at eget metus.
+- Nulla vitae elit libero, a pharetra augue.
 
 Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
 
- 1. Vestibulum id ligula porta felis euismod semper.
- 2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- 3. Maecenas sed diam eget risus varius blandit sit amet non magna.
+1.  Vestibulum id ligula porta felis euismod semper.
+2.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+3.  Maecenas sed diam eget risus varius blandit sit amet non magna.
 
 Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.2.md b/docs/src/pages/getting-started/templates/blog/blog-post.2.md
index f9fede82c0999f..ce67f9fc28e44f 100644
--- a/docs/src/pages/getting-started/templates/blog/blog-post.2.md
+++ b/docs/src/pages/getting-started/templates/blog/blog-post.2.md
@@ -1,4 +1,4 @@
-## Another blog post
+# Another blog post
 
 #### March 23, 2020 by [Matt](/)
 
diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.3.md b/docs/src/pages/getting-started/templates/blog/blog-post.3.md
index 1113cffc4ad8df..ee892758886d84 100644
--- a/docs/src/pages/getting-started/templates/blog/blog-post.3.md
+++ b/docs/src/pages/getting-started/templates/blog/blog-post.3.md
@@ -1,4 +1,4 @@
-## New feature
+# New feature
 
 #### March 14, 2020 by [Tom](/)
 
@@ -7,9 +7,9 @@ Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna m
 Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
 ut fermentum massa justo sit amet risus.
 
- - Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- - Donec id elit non mi porta gravida at eget metus.
- - Nulla vitae elit libero, a pharetra augue.
+- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+- Donec id elit non mi porta gravida at eget metus.
+- Nulla vitae elit libero, a pharetra augue.
 
 Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
 Aenean lacinia bibendum nulla sed consectetur.

From e98a1fbec82887a6550a58313baf99db587238d3 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sat, 30 Nov 2019 19:35:27 +0000
Subject: [PATCH 2/2] Add social icons

---
 docs/src/pages/getting-started/templates/blog/Blog.js    | 9 ++++++++-
 docs/src/pages/getting-started/templates/blog/Sidebar.js | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
index a9c5eef7d00d0c..fca9466cc7e4cd 100644
--- a/docs/src/pages/getting-started/templates/blog/Blog.js
+++ b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import TwitterIcon from '@material-ui/icons/Twitter';
 import Header from './Header';
 import MainFeaturedPost from './MainFeaturedPost';
 import FeaturedPost from './FeaturedPost';
@@ -79,7 +82,11 @@ const sidebar = {
     { title: 'May 1999', url: '#' },
     { title: 'April 1999', url: '#' },
   ],
-  social: ['GitHub', 'Twitter', 'Facebook'],
+  social: [
+    { name: 'GitHub', icon: GitHubIcon },
+    { name: 'Twitter', icon: TwitterIcon },
+    { name: 'Facebook', icon: FacebookIcon },
+  ],
 };
 
 export default function Blog() {
diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
index df0282df917a85..57bf4c7fc83f40 100644
--- a/docs/src/pages/getting-started/templates/blog/Sidebar.js
+++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -41,7 +41,12 @@ export default function Sidebar(props) {
       </Typography>
       {social.map(network => (
         <Link display="block" variant="body1" href="#" key={network}>
-          {network}
+          <Grid container direction="row" spacing={1} alignItems="center">
+            <Grid item>
+              <network.icon />
+            </Grid>
+            <Grid item>{network.name}</Grid>
+          </Grid>
         </Link>
       ))}
     </Grid>