Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix SEO reported by Ahrefs #16765

Merged
merged 1 commit into from
Jul 28, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api/root-ref.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import RootRef from '@material-ui/core/RootRef';

⚠️⚠️⚠️
If you want the DOM element of a Material-UI component check out
[/getting-started/faq/#how-can-i-access-the-dom-element](FAQ: How can I access the DOM element?)
[FAQ: How can I access the DOM element?](/getting-started/faq/#how-can-i-access-the-dom-element)
first.

This component uses `findDOMNode` which is deprecated in React.StrictMode.
Expand Down
12 changes: 2 additions & 10 deletions docs/pages/getting-started/templates/album.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import Album from 'docs/src/pages/getting-started/templates/album/Album';

function Page(props) {
export default function Page() {
return (
<AppTheme title="Album page layout - Material-UI" description={props.t('albumDescr')}>
<AppTheme>
<Album />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
12 changes: 2 additions & 10 deletions docs/pages/getting-started/templates/blog.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import Blog from 'docs/src/pages/getting-started/templates/blog/Blog';

function Page(props) {
export default function Page() {
return (
<AppTheme title="Blog page layout example - Material-UI" description={props.t('blogDescr')}>
<AppTheme>
<Blog />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/dashboard.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import Dashboard from 'docs/src/pages/getting-started/templates/dashboard/Dashboard';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Dashboard page layout example - Material-UI"
description={props.t('dashboardDescr')}
>
<AppTheme>
<Dashboard />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/pricing.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import Pricing from 'docs/src/pages/getting-started/templates/pricing/Pricing';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Pricing page layout example - Material-UI"
description={props.t('pricingDescr')}
>
<AppTheme>
<Pricing />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/sign-in-side.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import SignInSide from 'docs/src/pages/getting-started/templates/sign-in-side/SignInSide';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Sign In side page layout example - Material-UI"
description={props.t('signInSideDescr')}
>
<AppTheme>
<SignInSide />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/sign-in.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import SignIn from 'docs/src/pages/getting-started/templates/sign-in/SignIn';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Sign In page layout example - Material-UI"
description={props.t('signInDescr')}
>
<AppTheme>
<SignIn />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/sign-up.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import SignUp from 'docs/src/pages/getting-started/templates/sign-up/SignUp';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Sign Up page layout example - Material-UI"
description={props.t('signUpDescr')}
>
<AppTheme>
<SignUp />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
15 changes: 2 additions & 13 deletions docs/pages/getting-started/templates/sticky-footer.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AppTheme from 'docs/src/modules/components/AppTheme';
import StickyFooter from 'docs/src/pages/getting-started/templates/sticky-footer/StickyFooter';

function Page(props) {
export default function Page() {
return (
<AppTheme
title="Sticky footer page layout example - Material-UI"
description={props.t('stickyFooterDescr')}
>
<AppTheme>
<StickyFooter />
</AppTheme>
);
}

Page.propTypes = {
t: PropTypes.func.isRequired,
};

export default connect(state => ({ t: state.options.t }))(Page);
9 changes: 5 additions & 4 deletions docs/src/modules/components/AppTheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@ import { ThemeProvider } from '@material-ui/styles';
const defaultTheme = createMuiTheme();

export default function AppTheme(props) {
const { children, description, title } = props;
const { children } = props;

return (
<ThemeProvider theme={defaultTheme}>
<Head title={title} description={description} />
<Head>
<meta name="robots" content="noindex,nofollow" />
</Head>
{children}
</ThemeProvider>
);
}

AppTheme.propTypes = {
children: PropTypes.element.isRequired,
description: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
};
2 changes: 1 addition & 1 deletion docs/src/modules/components/Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function Link(props) {
[activeClassName]: router.pathname === props.href && activeClassName,
});

if (userLanguage !== 'en' && other.href.indexOf('/') === 0) {
if (userLanguage !== 'en' && other.href.indexOf('/') === 0 && other.href.indexOf('/blog') !== 0) {
other.as = `/${userLanguage}${other.href}`;
}

Expand Down
5 changes: 4 additions & 1 deletion docs/src/modules/utils/parseMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ export function getHeaders(markdown) {
}

if (headers.components) {
headers.components = headers.components.split(', ').sort();
headers.components = headers.components
.split(',')
.map(x => x.trim())
.sort();
} else {
headers.components = [];
}
Expand Down
26 changes: 13 additions & 13 deletions docs/src/pages/customization/density/density.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ reducing the size.

The following components have props applying higher density:

- [Button](/api/button)
- [Fab](/api/fab)
- [FilledInput](/api/filled-input)
- [FormControl](/api/form-control)
- [FormHelperText](/api/form-helper-text)
- [IconButton](/api/icon-button)
- [InputBase](/api/input-base)
- [InputLabel](/api/input-label)
- [ListItem](/api/list-item)
- [OutlinedInput](/api/outlined-input)
- [Table](/api/table)
- [TextField](/api/text-field)
- [Toolbar](/api/toolbar)
- [Button](/api/button/)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to lint for these issues? I see this change fairly often. Best with a rationale included which I'm still missing: What is the difference between trailing slash and not? From a server perspective the trailing slash isn't accurate because they don't live in api/button/index.js but api/button.js.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You get the underlying subfolder/index.html vs subfolder.html difference right. It seems to be a legacy issue. Next.js used to add a leading slash automatically, with no way to change it, until v9: vercel/next.js#2944.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the issue is that it creates a 301 without the trailing slash?

If the trailing slash has no other implications we might as well use the default behavior instead.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the issue is the 301 we have right now in production.

What default behavior do you refer to?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What default behavior do you refer to?

The one from next adding trailing slashes to every link.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next doesn't handle markdown.

Copy link
Member Author

@oliviertassinari oliviertassinari Jul 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we are using a custom express server now, we could make the dev env have trailing slashs, to behave like production.

- [Fab](/api/fab/)
- [FilledInput](/api/filled-input/)
- [FormControl](/api/form-control/)
- [FormHelperText](/api/form-helper-text/)
- [IconButton](/api/icon-button/)
- [InputBase](/api/input-base/)
- [InputLabel](/api/input-label/)
- [ListItem](/api/list-item/)
- [OutlinedInput](/api/outlined-input/)
- [Table](/api/table/)
- [TextField](/api/text-field/)
- [Toolbar](/api/toolbar/)

## Explore theme density

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/RootRef/RootRef.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { setRef } from '../utils/reactHelpers';
/**
* ⚠️⚠️⚠️
* If you want the DOM element of a Material-UI component check out
* [/getting-started/faq/#how-can-i-access-the-dom-element](FAQ: How can I access the DOM element?)
* [FAQ: How can I access the DOM element?](/getting-started/faq/#how-can-i-access-the-dom-element)
* first.
*
* This component uses `findDOMNode` which is deprecated in React.StrictMode.
Expand Down