Skip to content

Commit 7c47bf6

Browse files
[docs] Fix SEO issues (#20108)
1 parent 836b11e commit 7c47bf6

File tree

13 files changed

+59
-63
lines changed

13 files changed

+59
-63
lines changed

.eslintrc.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ module.exports = {
4646
// we have to be disciplined about the usage and ensure the Number type for its
4747
// arguments
4848
'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
49-
'no-underscore-dangle': ['error', { allow: ['_rewriteUrlForNextExport'] }],
49+
'no-underscore-dangle': 'error',
5050
'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
5151
'prefer-destructuring': 'off', // Destructuring harm grep potential.
5252

docs/pages/_app.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
1111
import acceptLanguage from 'accept-language';
1212
import { create } from 'jss';
1313
import rtl from 'jss-rtl';
14-
import { Router as Router2, useRouter } from 'next/router';
14+
import { useRouter } from 'next/router';
15+
import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
1516
import { StylesProvider, jssPreset } from '@material-ui/styles';
1617
import pages from 'docs/src/pages';
1718
import initRedux from 'docs/src/modules/redux/initRedux';
@@ -58,7 +59,7 @@ function LanguageNegotiation() {
5859

5960
React.useEffect(() => {
6061
const { userLanguage: userLanguageUrl, canonical } = pathnameToLanguage(
61-
Router2._rewriteUrlForNextExport(router.asPath),
62+
rewriteUrlForNextExport(router.asPath),
6263
);
6364
const preferedLanguage =
6465
getCookie('userLanguage') !== 'noDefault' && userLanguage === 'en'
@@ -289,7 +290,7 @@ function AppWrapper(props) {
289290
if (pathname !== '/') {
290291
// The leading / is only added to support static hosting (resolve /index.html).
291292
// We remove it to normalize the pathname.
292-
// See `_rewriteUrlForNextExport` on Next.js side.
293+
// See `rewriteUrlForNextExport` on Next.js side.
293294
pathname = pathname.replace(/\/$/, '');
294295
}
295296
const activePage = findActivePage(pages, pathname);

docs/pages/_document.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { ServerStyleSheets } from '@material-ui/styles';
33
import Document, { Head, Main, NextScript } from 'next/document';
4-
import { Router as Router2 } from 'next/router';
4+
import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
55
import { LANGUAGES_SSR } from 'docs/src/modules/constants';
66
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
77
import { themeColor } from 'docs/src/modules/components/ThemeContext';
@@ -48,20 +48,20 @@ export default class MyDocument extends Document {
4848
{/* SEO */}
4949
<link
5050
rel="canonical"
51-
href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
51+
href={`https://material-ui.com${rewriteUrlForNextExport(
5252
`${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonical}`,
5353
)}`}
5454
/>
5555
<link
5656
rel="alternate"
57-
href={`https://material-ui.com${Router2._rewriteUrlForNextExport(canonical)}`}
57+
href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
5858
hrefLang="x-default"
5959
/>
6060
{LANGUAGES_SSR.map(userLanguage2 => (
6161
<link
6262
key={userLanguage2}
6363
rel="alternate"
64-
href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
64+
href={`https://material-ui.com${rewriteUrlForNextExport(
6565
`${userLanguage2 === 'en' ? '' : `/${userLanguage2}`}${canonical}`,
6666
)}`}
6767
hrefLang={userLanguage2}

docs/pages/blog/material-ui-v1-is-out.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ We want to translate the documentation into Chinese and more languages. [Any hel
105105

106106
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.
107107

108-
![[Creative Tim](https://material-ui.com/store/contributors/creative-tim/) themes](https://cdn-images-1.medium.com/max/2000/1*jPOu6n1EMsqv4Gh652MtPA.png)
108+
![Creative Tim themes](https://cdn-images-1.medium.com/max/2000/1*jPOu6n1EMsqv4Gh652MtPA.png)
109109
<p class="blog-description">Creative Tim themes</p>
110110

111111
![A preview of an open source theme we will soon release.](https://cdn-images-1.medium.com/max/2000/1*CThJG6Kuk-XlSM53jM6KLQ.png)

docs/src/modules/components/AppFrame.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { useSelector } from 'react-redux';
4-
import Router, { Router as Router2, useRouter } from 'next/router';
4+
import Router, { useRouter } from 'next/router';
5+
import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
56
import { withStyles, useTheme } from '@material-ui/core/styles';
67
import NProgress from 'nprogress';
78
import CssBaseline from '@material-ui/core/CssBaseline';
@@ -182,7 +183,7 @@ function AppFrame(props) {
182183
};
183184

184185
const router = useRouter();
185-
const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));
186+
const { canonical } = pathnameToLanguage(rewriteUrlForNextExport(router.asPath));
186187
const { activePage } = React.useContext(PageContext);
187188

188189
let disablePermanent = false;

docs/src/modules/components/Head.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import NextHead from 'next/head';
3-
import { Router, useRouter } from 'next/router';
3+
import { useRouter } from 'next/router';
4+
import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
45
import PropTypes from 'prop-types';
56
import { useSelector } from 'react-redux';
67

@@ -27,7 +28,7 @@ export default function Head(props) {
2728
<meta property="og:title" content={title} />
2829
<meta
2930
property="og:url"
30-
content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
31+
content={`https://material-ui.com${rewriteUrlForNextExport(router.asPath)}`}
3132
/>
3233
<meta property="og:description" content={description} />
3334
<meta property="og:image" content="https://material-ui.com/static/logo.png" />

docs/src/modules/components/HomeSteps.js

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,20 @@ const UsageLink = React.forwardRef((buttonProps, ref) => (
2222
));
2323

2424
const styles = theme => ({
25-
container: {
25+
root: {
2626
marginTop: theme.spacing(5),
27+
'& pre': {
28+
margin: theme.spacing(1, 0),
29+
},
2730
},
2831
step: {
2932
border: `12px solid ${theme.palette.background.level1}`,
3033
borderRightWidth: 0,
3134
borderLeftWidth: 0,
32-
padding: theme.spacing(3, 2),
35+
padding: theme.spacing(2),
3336
backgroundColor: theme.palette.background.level2,
3437
[theme.breakpoints.up('md')]: {
35-
padding: theme.spacing(5, 4),
38+
padding: theme.spacing(3),
3639
},
3740
},
3841
leftStep: {
@@ -60,17 +63,7 @@ const styles = theme => ({
6063
fontSize: 30,
6164
},
6265
stepBody: {
63-
minHeight: 290,
64-
},
65-
markdownElement: {
66-
maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
67-
'& pre, & pre[class*="language-"], & code': {
68-
// backgroundColor: 'transparent',
69-
},
70-
'& pre, & pre[class*="language-"]': {
71-
padding: theme.spacing(1, 0),
72-
margin: theme.spacing(1, 0),
73-
},
66+
minHeight: 270,
7467
},
7568
divider: {
7669
marginTop: theme.spacing(4),
@@ -92,7 +85,7 @@ function HomeSteps(props) {
9285
const t = useSelector(state => state.options.t);
9386

9487
return (
95-
<Container disableGutters maxwidth="lg" className={classes.container}>
88+
<Container disableGutters maxwidth="lg" className={classes.root}>
9689
<Grid container>
9790
<Grid item xs={12} md={6} className={clsx(classes.step, classes.leftStep)}>
9891
<div className={classes.stepTitle}>
@@ -106,11 +99,10 @@ function HomeSteps(props) {
10699
{t('installDescr')}
107100
</Typography>
108101
<MarkdownElement
109-
className={classes.markdownElement}
110102
text={`
111-
\`\`\`sh
112-
$ npm install @material-ui/core
113-
\`\`\`
103+
\`\`\`sh
104+
$ npm install @material-ui/core
105+
\`\`\`
114106
`}
115107
/>
116108
<Link
@@ -125,11 +117,10 @@ function HomeSteps(props) {
125117
{t('loadFont')}
126118
</Typography>
127119
<MarkdownElement
128-
className={classes.markdownElement}
129120
text={`
130-
\`\`\`html
131-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
132-
\`\`\`
121+
\`\`\`html
122+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
123+
\`\`\`
133124
`}
134125
/>
135126
</div>
@@ -148,18 +139,15 @@ function HomeSteps(props) {
148139
{t('usageDescr')}
149140
</Typography>
150141
<MarkdownElement
151-
className={classes.markdownElement}
152142
text={`
153-
\`\`\`jsx
154-
import React from 'react';
155-
import Button from '@material-ui/core/Button';
143+
\`\`\`jsx
144+
import React from 'react';
145+
import { Button } from '@material-ui/core';
156146
157-
const App = () => (
158-
<Button variant="contained" color="primary">
159-
Hello World
160-
</Button>
161-
);
162-
\`\`\`
147+
function App() {
148+
return <Button color="primary">Hello World</Button>;
149+
}
150+
\`\`\`
163151
`}
164152
/>
165153
</div>

docs/src/modules/components/MarkdownElement.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,17 @@ const styles = theme => ({
124124
position: 'absolute',
125125
},
126126
'& pre': {
127-
margin: '24px 0',
128-
padding: '12px 18px',
127+
margin: theme.spacing(3, 0),
128+
padding: theme.spacing(2),
129129
backgroundColor: '#272c34',
130130
direction: 'ltr',
131131
borderRadius: theme.shape.borderRadius,
132132
overflow: 'auto',
133133
WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
134+
maxWidth: 'calc(100vw - 32px)',
135+
[theme.breakpoints.up('md')]: {
136+
maxWidth: 'calc(100vw - 32px - 16px)',
137+
},
134138
},
135139
'& code': {
136140
display: 'inline-block',

docs/src/modules/components/MarkdownLinks.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export async function handleEvent(event, as) {
2222
if (pathname !== '/') {
2323
// The leading / is only added to support static hosting (resolve /index.html).
2424
// We remove it to normalize the pathname.
25-
// See `_rewriteUrlForNextExport` on Next.js side.
25+
// See `rewriteUrlForNextExport` on Next.js side.
2626
pathname = pathname.replace(/\/$/, '');
2727
}
2828
pathname = pathnameToLanguage(pathname).canonical;

docs/src/modules/components/TopLayoutBlog.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ const styles = theme => ({
2121
marginBottom: theme.spacing(20),
2222
maxWidth: 680 + theme.spacing(8 + 4),
2323
'& .markdownElement': {
24-
paddingRight: theme.spacing(4),
2524
fontSize: 18,
2625
lineHeight: 1.7,
26+
[theme.breakpoints.up('md')]: {
27+
paddingRight: theme.spacing(4),
28+
},
2729
},
2830
'& img': {
2931
display: 'block',
@@ -36,7 +38,7 @@ const styles = theme => ({
3638
},
3739
});
3840

39-
function TopLayoutCompany(props) {
41+
function TopLayoutBlog(props) {
4042
const {
4143
classes,
4244
markdown: markdownProp,
@@ -80,7 +82,7 @@ function TopLayoutCompany(props) {
8082
);
8183
}
8284

83-
TopLayoutCompany.propTypes = {
85+
TopLayoutBlog.propTypes = {
8486
classes: PropTypes.object.isRequired,
8587
markdown: PropTypes.string,
8688
// You can define the direction location of the markdown file.
@@ -91,4 +93,4 @@ TopLayoutCompany.propTypes = {
9193
reqSource: PropTypes.func,
9294
};
9395

94-
export default withStyles(styles)(TopLayoutCompany);
96+
export default withStyles(styles)(TopLayoutBlog);

0 commit comments

Comments
 (0)