[docs] Fix SEO issues (mui#20108)

EsoterikStare · Mar 30, 2020 · 96c95fb · 96c95fb
1 parent b9a5782
commit 96c95fb
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 63 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,7 +46,7 @@ module.exports = {
     // we have to be disciplined about the usage and ensure the Number type for its
     // arguments
     'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
-    'no-underscore-dangle': ['error', { allow: ['_rewriteUrlForNextExport'] }],
+    'no-underscore-dangle': 'error',
     'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
     'prefer-destructuring': 'off', // Destructuring harm grep potential.
 

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
 import acceptLanguage from 'accept-language';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
-import { Router as Router2, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
@@ -58,7 +59,7 @@ function LanguageNegotiation() {
 
   React.useEffect(() => {
     const { userLanguage: userLanguageUrl, canonical } = pathnameToLanguage(
-      Router2._rewriteUrlForNextExport(router.asPath),
+      rewriteUrlForNextExport(router.asPath),
     );
     const preferedLanguage =
       getCookie('userLanguage') !== 'noDefault' && userLanguage === 'en'
@@ -289,7 +290,7 @@ function AppWrapper(props) {
   if (pathname !== '/') {
     // The leading / is only added to support static hosting (resolve /index.html).
     // We remove it to normalize the pathname.
-    // See `_rewriteUrlForNextExport` on Next.js side.
+    // See `rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
   const activePage = findActivePage(pages, pathname);

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import Document, { Head, Main, NextScript } from 'next/document';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
@@ -48,20 +48,20 @@ export default class MyDocument extends Document {
           {/* SEO */}
           <link
             rel="canonical"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+            href={`https://material-ui.com${rewriteUrlForNextExport(
               `${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonical}`,
             )}`}
           />
           <link
             rel="alternate"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(canonical)}`}
+            href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
           {LANGUAGES_SSR.map(userLanguage2 => (
             <link
               key={userLanguage2}
               rel="alternate"
-              href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+              href={`https://material-ui.com${rewriteUrlForNextExport(
                 `${userLanguage2 === 'en' ? '' : `/${userLanguage2}`}${canonical}`,
               )}`}
               hrefLang={userLanguage2}

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/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import Router, { Router as Router2, useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { withStyles, useTheme } from '@material-ui/core/styles';
 import NProgress from 'nprogress';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -182,7 +183,7 @@ function AppFrame(props) {
   };
 
   const router = useRouter();
-  const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));
+  const { canonical } = pathnameToLanguage(rewriteUrlForNextExport(router.asPath));
   const { activePage } = React.useContext(PageContext);
 
   let disablePermanent = false;

diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import NextHead from 'next/head';
-import { Router, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
@@ -27,7 +28,7 @@ export default function Head(props) {
       <meta property="og:title" content={title} />
       <meta
         property="og:url"
-        content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
+        content={`https://material-ui.com${rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
       <meta property="og:image" content="https://material-ui.com/static/logo.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/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js
@@ -22,7 +22,7 @@ export async function handleEvent(event, as) {
   if (pathname !== '/') {
     // The leading / is only added to support static hosting (resolve /index.html).
     // We remove it to normalize the pathname.
-    // See `_rewriteUrlForNextExport` on Next.js side.
+    // See `rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
   pathname = pathnameToLanguage(pathname).canonical;

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
@@ -1,6 +1,6 @@
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { useSelector } from 'react-redux';
 import Demo from 'docs/src/modules/components/Demo';
 import { getHeaders, getContents, demoRegexp } from 'docs/src/modules/utils/parseMarkdown';
@@ -74,16 +74,13 @@ 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;](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`,
   )
   .join('\n')}
   `);

diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
@@ -1,7 +1,7 @@
 import { parse as parseDoctrine } from 'doctrine';
 import * as recast from 'recast';
 import { parse as docgenParse } from 'react-docgen';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { pageToTitle } from './helpers';
 import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
 
@@ -331,7 +331,7 @@ function generateProps(reactAPI) {
     text = `${text}
 Any other props supplied will be provided to the root element (${
       reactAPI.inheritance
-        ? `[${reactAPI.inheritance.component}](${Router2._rewriteUrlForNextExport(
+        ? `[${reactAPI.inheritance.component}](${rewriteUrlForNextExport(
             reactAPI.inheritance.pathname,
           )})`
         : 'native element'
@@ -412,7 +412,7 @@ function generateInheritance(reactAPI) {
 
   return `## Inheritance
 
-The props of the [${inheritance.component}](${Router2._rewriteUrlForNextExport(
+The props of the [${inheritance.component}](${rewriteUrlForNextExport(
     inheritance.pathname,
   )}) component${suffix} are also available.
 You can take advantage of this behavior to [target nested components](/guides/api/#spread).
@@ -436,7 +436,7 @@ function generateDemos(reactAPI) {
   return `## Demos
 
 ${pagesMarkdown
-  .map(page => `- [${pageToTitle(page)}](${Router2._rewriteUrlForNextExport(page.pathname)})`)
+  .map(page => `- [${pageToTitle(page)}](${rewriteUrlForNextExport(page.pathname)})`)
   .join('\n')}
 
 `;