From 7c47bf6ed036cbd06ded73eee7d47d65f5391b06 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 16 Mar 2020 14:15:54 +0100 Subject: [PATCH] [docs] Fix SEO issues (#20108) --- .eslintrc.js | 2 +- docs/pages/_app.js | 7 +-- docs/pages/_document.js | 8 +-- docs/pages/blog/material-ui-v1-is-out.md | 2 +- docs/src/modules/components/AppFrame.js | 5 +- docs/src/modules/components/Head.js | 5 +- docs/src/modules/components/HomeSteps.js | 54 ++++++++----------- .../src/modules/components/MarkdownElement.js | 8 ++- docs/src/modules/components/MarkdownLinks.js | 2 +- docs/src/modules/components/TopLayoutBlog.js | 10 ++-- .../modules/components/TopLayoutCompany.js | 4 +- .../src/modules/components/useMarkdownDocs.js | 7 +-- docs/src/modules/utils/generateMarkdown.js | 8 +-- 13 files changed, 59 insertions(+), 63 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index fa727bc07e4302..8d0f1f662fa42d 100644 --- 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 index 024cf38005fd0d..86b67144408054 100644 --- 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 index ebbfb63104724e..29c60abb10ca0d 100644 --- 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 */} {LANGUAGES_SSR.map(userLanguage2 => ( Creative Tim themes

![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 index 43b09e2092a260..7bdc66295afacd 100644 --- 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 index c14d27fdd246cc..d6ad2a572fbd68 100644 --- 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) { diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js index ec7370c2527cc6..84d7a5cc72a7d2 100644 --- 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 ( - +
@@ -106,11 +99,10 @@ function HomeSteps(props) { {t('installDescr')} - \`\`\` +\`\`\`html + +\`\`\` `} />
@@ -148,18 +139,15 @@ function HomeSteps(props) { {t('usageDescr')} ( - - ); - \`\`\` +function App() { + return ; +} +\`\`\` `} /> diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 3931c0e70d2e7c..90e6c155b4036e 100644 --- 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 index 098aab649af57c..248fe78b9d408b 100644 --- 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 index f673c7dd5cf043..9e2c04008c686c 100644 --- 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 index b72bafa1351808..1d44cadb8f6138 100644 --- 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 index 1b50ca568060c1..895f016d1d8a29 100644 --- 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 => - `- [<${component} />](${ - section === 'lab' ? '/lab/api' : '/api' - }/${Router2._rewriteUrlForNextExport(kebabCase(component))})`, + `- [<${component} />](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`, ) .join('\n')} `); diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index d1b4824ca2ada1..a313e358410987 100644 --- 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')} `;