[docs] Fix SEO issues

mui · Mar 15, 2020 · 4357e89 · 4357e89
1 parent b023308
commit 4357e89
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 45 deletions.
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
@@ -105,7 +105,7 @@ We want to translate the documentation into Chinese and more languages. [Any hel
 
 We have shipped the long-awaited Material-UI v1 stable release. With a new codebase designed to better support customization, it’s the perfect timing to start building and promoting premium themes. We are very happy to announce [the first two](https://material-ui.com/store/) from [Creative Tim](https://material-ui.com/store/contributors/creative-tim/). More are coming.
 
-![[Creative Tim](https://material-ui.com/store/contributors/creative-tim/) themes](https://cdn-images-1.medium.com/max/2000/1*jPOu6n1EMsqv4Gh652MtPA.png)
+![Creative Tim themes](https://cdn-images-1.medium.com/max/2000/1*jPOu6n1EMsqv4Gh652MtPA.png)
 <p class="blog-description">Creative Tim themes</p>
 
 ![A preview of an open source theme we will soon release.](https://cdn-images-1.medium.com/max/2000/1*CThJG6Kuk-XlSM53jM6KLQ.png)

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -22,17 +22,20 @@ const UsageLink = React.forwardRef((buttonProps, ref) => (
 ));
 
 const styles = theme => ({
-  container: {
+  root: {
     marginTop: theme.spacing(5),
+    '& pre': {
+      margin: theme.spacing(1, 0),
+    },
   },
   step: {
     border: `12px solid ${theme.palette.background.level1}`,
     borderRightWidth: 0,
     borderLeftWidth: 0,
-    padding: theme.spacing(3, 2),
+    padding: theme.spacing(2),
     backgroundColor: theme.palette.background.level2,
     [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(5, 4),
+      padding: theme.spacing(3),
     },
   },
   leftStep: {
@@ -60,17 +63,7 @@ const styles = theme => ({
     fontSize: 30,
   },
   stepBody: {
-    minHeight: 290,
-  },
-  markdownElement: {
-    maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
-    '& pre, & pre[class*="language-"], & code': {
-      // backgroundColor: 'transparent',
-    },
-    '& pre, & pre[class*="language-"]': {
-      padding: theme.spacing(1, 0),
-      margin: theme.spacing(1, 0),
-    },
+    minHeight: 270,
   },
   divider: {
     marginTop: theme.spacing(4),
@@ -92,7 +85,7 @@ function HomeSteps(props) {
   const t = useSelector(state => state.options.t);
 
   return (
-    <Container disableGutters maxwidth="lg" className={classes.container}>
+    <Container disableGutters maxwidth="lg" className={classes.root}>
       <Grid container>
         <Grid item xs={12} md={6} className={clsx(classes.step, classes.leftStep)}>
           <div className={classes.stepTitle}>
@@ -106,11 +99,10 @@ function HomeSteps(props) {
               {t('installDescr')}
             </Typography>
             <MarkdownElement
-              className={classes.markdownElement}
               text={`
-  \`\`\`sh
-  $ npm install @material-ui/core
-  \`\`\`
+\`\`\`sh
+$ npm install @material-ui/core
+\`\`\`
                 `}
             />
             <Link
@@ -125,11 +117,10 @@ function HomeSteps(props) {
               {t('loadFont')}
             </Typography>
             <MarkdownElement
-              className={classes.markdownElement}
               text={`
-  \`\`\`html
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  \`\`\`
+\`\`\`html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+\`\`\`
                 `}
             />
           </div>
@@ -148,18 +139,15 @@ function HomeSteps(props) {
               {t('usageDescr')}
             </Typography>
             <MarkdownElement
-              className={classes.markdownElement}
               text={`
-  \`\`\`jsx
-  import React from 'react';
-  import Button from '@material-ui/core/Button';
+\`\`\`jsx
+import React from 'react';
+import { Button } from '@material-ui/core';
 
-  const App = () => (
-    <Button variant="contained" color="primary">
-      Hello World
-    </Button>
-  );
-  \`\`\`
+function App() {
+  return <Button color="primary">Hello World</Button>;
+}
+\`\`\`
                 `}
             />
           </div>

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -124,13 +124,17 @@ const styles = theme => ({
       position: 'absolute',
     },
     '& pre': {
-      margin: '24px 0',
-      padding: '12px 18px',
+      margin: theme.spacing(3, 0),
+      padding: theme.spacing(2),
       backgroundColor: '#272c34',
       direction: 'ltr',
       borderRadius: theme.shape.borderRadius,
       overflow: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
+      maxWidth: 'calc(100vw - 32px)',
+      [theme.breakpoints.up('md')]: {
+        maxWidth: 'calc(100vw - 32px - 16px)',
+      },
     },
     '& code': {
       display: 'inline-block',

diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -21,9 +21,11 @@ const styles = theme => ({
     marginBottom: theme.spacing(20),
     maxWidth: 680 + theme.spacing(8 + 4),
     '& .markdownElement': {
-      paddingRight: theme.spacing(4),
       fontSize: 18,
       lineHeight: 1.7,
+      [theme.breakpoints.up('md')]: {
+        paddingRight: theme.spacing(4),
+      },
     },
     '& img': {
       display: 'block',
@@ -36,7 +38,7 @@ const styles = theme => ({
   },
 });
 
-function TopLayoutCompany(props) {
+function TopLayoutBlog(props) {
   const {
     classes,
     markdown: markdownProp,
@@ -80,7 +82,7 @@ function TopLayoutCompany(props) {
   );
 }
 
-TopLayoutCompany.propTypes = {
+TopLayoutBlog.propTypes = {
   classes: PropTypes.object.isRequired,
   markdown: PropTypes.string,
   // You can define the direction location of the markdown file.
@@ -91,4 +93,4 @@ TopLayoutCompany.propTypes = {
   reqSource: PropTypes.func,
 };
 
-export default withStyles(styles)(TopLayoutCompany);
+export default withStyles(styles)(TopLayoutBlog);
diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
@@ -16,7 +16,9 @@ const styles = theme => ({
     marginBottom: theme.spacing(20),
     maxWidth: 680 + theme.spacing(8 + 4),
     '& .markdownElement': {
-      paddingRight: theme.spacing(4),
+      [theme.breakpoints.up('md')]: {
+        paddingRight: theme.spacing(4),
+      },
     },
   },
 });

diff --git a/docs/src/modules/components/useMarkdownDocs.js b/docs/src/modules/components/useMarkdownDocs.js
@@ -74,16 +74,15 @@ export default function useMarkdownDocs(options) {
   }
 
   if (headers.components.length > 0) {
-    const section = location.split('/')[4];
     contents.push(`
 ## API
 
 ${headers.components
   .map(
     component =>
-      `- [&lt;${component} /&gt;](${
-        section === 'lab' ? '/lab/api' : '/api'
-      }/${Router2._rewriteUrlForNextExport(kebabCase(component))})`,
+      `- [&lt;${component} /&gt;](${Router2._rewriteUrlForNextExport(
+        `/api/${kebabCase(component)}`,
+      )})`,
   )
   .join('\n')}
   `);