[docs] Fix even more 301 redirections (#13051)

GOVERNANCE.md

@@ -5,7 +5,7 @@
 ## Overview
 
 Mui-Org houses projects related to [Material-UI](https://material-ui.com/), a set of [React](https://reactjs.org/) components
-that implement [Google's Material Design](https://material.io/design/introduction)
+that implement [Google's Material Design](https://material.io/design/introduction/)
 specification. Our mission is to create a customizable Material Design implementation
 for anyone to use. We value an open, collaborative, and diverse community where anyone can join in
 discussions, learn from one another, and contribute to the project. This document describes how

docs/src/modules/components/AppFrame.js

@@ -155,7 +155,7 @@ class AppFrame extends React.Component {
                 color="inherit"
                 aria-label="Edit docs colors"
                 component={Link}
-                href="/style/color#color-tool"
+                href="/style/color/#color-tool"
               >
                 <ColorsIcon />
               </IconButton>

docs/src/modules/components/HomeBackers.js

@@ -29,7 +29,7 @@ function HomeBackers(props) {
 
 Material-UI is an MIT-licensed open source project.
 It's an independent project with ongoing development made possible entirely
-thanks to the support of these awesome [backers](/discover-more/backers).
+thanks to the support of these awesome [backers](/discover-more/backers/).
 
 ### Gold Sponsors
 
@@ -48,7 +48,7 @@ via [OpenCollective](https://opencollective.com/material-ui)
 
 ### There is more!
 
-See the full list of [our backers](/discover-more/backers).
+See the full list of [our backers](/discover-more/backers/).
 
 `}
         />

docs/src/modules/components/HomeFooter.js

@@ -56,10 +56,10 @@ function HomeFooter(props) {
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>
-                <Link href="/discover-more/community">Community</Link>
+                <Link href="/style/icons">Icons</Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="/discover-more/roadmap">Roadmap</Link>
+                <Link href="/style/color">Color</Link>
               </li>
               <li className={classes.listItem}>
                 <Link href="/discover-more/team">Team</Link>

docs/src/modules/utils/generateMarkdown.js

@@ -278,7 +278,7 @@ and the [implementation of the component](${SOURCE_CODE_ROOT_URL}${normalizePath
 for more detail.
 
 If using the \`overrides\` key of the theme as documented
-[here](/customization/themes#customizing-all-instances-of-a-component-type),
+[here](/customization/themes/#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: \`${reactAPI.styles.name}\`.
 
 `;

docs/src/pages/customization/css-in-js/css-in-js.md

@@ -48,7 +48,7 @@ Read more about [Server Rendering](/guides/server-rendering/).
 The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple.
 This technique provides an important performance boost when re-rendering instances of a component.
 
-When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering).
+When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/).
 
 ## Class names
 
@@ -243,7 +243,7 @@ Given `withStyles` is our internal styling solution, all the plugins aren't avai
 - [jss-props-sort](http://cssinjs.org/jss-props-sort/)
 
 It's a subset of [jss-preset-default](http://cssinjs.org/jss-preset-default/).
-Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left#3-jss-rtl).
+Of course, you are free to add a new plugin. We have one example for the [`jss-rtl` plugin](/guides/right-to-left/#3-jss-rtl).
 
 ## API
 

docs/src/pages/customization/overrides/overrides.md

@@ -186,15 +186,15 @@ Material-UI attempts to implement all of these variations. Please refer to the [
 
 ### Theme variables
 
-In order to promote consistency between components, and manage the user interface appearance as a whole, Material-UI provides a mechanism to apply global changes by adjusting the [theme configuration variables](/customization/themes#theme-configuration-variables).
+In order to promote consistency between components, and manage the user interface appearance as a whole, Material-UI provides a mechanism to apply global changes by adjusting the [theme configuration variables](/customization/themes/#theme-configuration-variables).
 
 ### Global theme override
 
 Do you want to customize **all the instances** of a component type?
 
 When the configuration variables aren't powerful enough,
 you can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM.
-Learn more about it in the [themes section](/customization/themes#customizing-all-instances-of-a-component-type) of the documentation.
+Learn more about it in the [themes section](/customization/themes/#customizing-all-instances-of-a-component-type) of the documentation.
 
 ### Global CSS override
 

docs/src/pages/customization/themes/themes.md

@@ -43,7 +43,7 @@ The theme exposes the following color intentions:
 The default palette uses the shades prefixed with `A` (`A200`, etc.) for the secondary intention,
 and the un-prefixed shades for the other intentions.
 
-If you want to learn more about color, you can check out [the color section](/style/color).
+If you want to learn more about color, you can check out [the color section](/style/color/).
 
 #### Custom palette
 
@@ -54,7 +54,7 @@ If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.pa
 [`palette.error`](/customization/default-theme/?expend-path=$.palette.error)
 'intention' objects are provided, they will replace the defaults.
 
-The intention value can either be a [color](/style/color) object, or an object with one or more of the following keys:
+The intention value can either be a [color](/style/color/) object, or an object with one or more of the following keys:
 
 ```js
 interface PaletteIntention {
@@ -182,7 +182,7 @@ Note that `contrastThreshold` follows a non-linear curve.
 
 #### Color tool
 
-Need inspiration? The Material Design team has built an awesome [palette configuration tool](/style/color#color-tool) to help you.
+Need inspiration? The Material Design team has built an awesome [palette configuration tool](/style/color/#color-tool) to help you.
 
 ### Type (light /dark theme)
 

docs/src/pages/demos/buttons/buttons.md

@@ -96,7 +96,7 @@ Sometimes you might want to have icons for certain button to enhance the UX of t
 
 ## Customized Buttons
 
-If you have been reading the [overrides documentation page](/customization/overrides)
+If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in,
 here are examples of how you can change the main color of a Button using classes,
 and using a theme; and of a Bootstrap style Button.
@@ -139,4 +139,4 @@ const MyLink = props => <Link to="/open-collective" {...props} />
 </Button>
 ```
 
-*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it [here](/guides/composition#component-property).*
+*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it [here](/guides/composition/#component-property).*

docs/src/pages/demos/dialogs/dialogs.md

@@ -7,7 +7,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
 
 <p class="description">Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.</p>
 
-A [Dialog](https://material.io/design/components/dialogs.html) is a type of [modal](/utils/modal) window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
+A [Dialog](https://material.io/design/components/dialogs.html) is a type of [modal](/utils/modal/) window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
 
 Dialogs are purposefully interruptive, so they should be used sparingly.
 

docs/src/pages/demos/selection-controls/selection-controls.md

@@ -81,7 +81,7 @@ However, we encourage you to use a [Checkbox](#checkboxes) instead.
 
 ### Customized Switches
 
-If you have been reading the [overrides documentation page](/customization/overrides)
+If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch.
 
 {{"demo": "pages/demos/selection-controls/CustomizedSwitches.js"}}

docs/src/pages/demos/snackbars/snackbars.md

@@ -62,7 +62,7 @@ Per [Google's guidelines](https://material.io/design/components/snackbars.html#s
 
 ## Customized Snackbars
 
-If you have been reading the [overrides documentation page](/customization/overrides)
+If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in,
 here are examples of how you can change the look of a Snackbar.
 

docs/src/pages/demos/tabs/tabs.md

@@ -73,7 +73,7 @@ Tab labels may be either all icons or all text.
 
 ## Customized Tabs
 
-If you have read the [overrides documentation page](/customization/overrides)
+If you have read the [overrides documentation page](/customization/overrides/)
 but aren't confident jumping in, here's an example of how you can change the main color of the Tabs. The following demo matches the [Ant Design UI](https://ant.design/components/tabs/).
 
 {{"demo": "pages/demos/tabs/CustomizedTabs.js"}}

docs/src/pages/demos/text-fields/text-fields.md

@@ -83,7 +83,7 @@ The following demo uses the [react-text-mask](https://github.com/text-mask/text-
 
 ## Customized inputs
 
-If you have been reading the [overrides documentation page](/customization/overrides)
+If you have been reading the [overrides documentation page](/customization/overrides/)
 but you are not confident jumping in, here's an example of how you can change the main color of an Input.
 
 {{"demo": "pages/demos/text-fields/CustomizedInputs.js"}}

docs/src/pages/getting-started/faq/faq.md

@@ -8,7 +8,7 @@ For how-to questions and other non-issues, please use [StackOverflow](https://st
 ## Why aren't my components rendering correctly in production builds?
 
 This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle.
-For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js#creategenerateclassname-options-class-name-generator).
+For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -18,11 +18,11 @@ You could end up accidentally using two class name generators in a variety of sc
 - You are using a bundler and it is splitting code in a way results in multiple class name generator instances to be created.
 > If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
 
-Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`JssProvider`](/customization/css-in-js#jssprovider) components at the top of their component trees **and using a single class name generator shared between them**.
+Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`JssProvider`](/customization/css-in-js/#jssprovider) components at the top of their component trees **and using a single class name generator shared between them**.
 
-[A resolution example](/customization/css-in-js#jssprovider). The last part of any solution will vary based on what bundler you are using, but the overall goal is to ensure the common module that contains the first snippet above only gets loaded and run once.
+[A resolution example](/customization/css-in-js/#jssprovider). The last part of any solution will vary based on what bundler you are using, but the overall goal is to ensure the common module that contains the first snippet above only gets loaded and run once.
 
-⚠️ You are in the hurry? Rest assured, we provide an option to make the class names **deterministic** as a quick escape hatch: [`dangerouslyUseGlobalCSS`](/customization/css-in-js#global-css).
+⚠️ You are in the hurry? Rest assured, we provide an option to make the class names **deterministic** as a quick escape hatch: [`dangerouslyUseGlobalCSS`](/customization/css-in-js/#global-css).
 
 ## Why do the fixed positioned elements move when a modal is opened?
 
@@ -102,7 +102,7 @@ Wrap the component with the [`RootRef`](/api/root-ref/) helper.
 
 The documentation site is using a custom theme. Hence, the color palette is
 different from the default theme that Material-UI ships. Please refer to [this
-page](/customization/themes) to learn about theme customization.
+page](/customization/themes/) to learn about theme customization.
 
 ## Material-UI is awesome. How can I support the project?
 

docs/src/pages/getting-started/usage/usage.md

@@ -63,5 +63,5 @@ You can find older versions of the documentation on a [separate page](/versions/
 
 Now that you have an idea of the basic setup, it's time to learn more about:
 - How to provide [the Material Design font and typography](/style/typography/).
-- How to take advantage of the [theming solution](/customization/themes).
-- How to [override](/customization/overrides) the look and feel of the components.
+- How to take advantage of the [theming solution](/customization/themes/).
+- How to [override](/customization/overrides/) the look and feel of the components.

docs/src/pages/guides/interoperability/interoperability.md

@@ -57,7 +57,7 @@ export default RawCssButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vmv2mz9785)
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
 
 ## Styled Components
 
@@ -102,7 +102,7 @@ export default StyledComponentsButton;
 ### Controlling Priority
 
 Both styled-components and JSS inject their styles at the bottom of the `<head>`.
-One approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the demo.
+One approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
 
 Another approach is to use the `&` character in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name.
 Use this to ensure styled-components styles are applied before JSS styles.
@@ -262,7 +262,7 @@ export default EmotionButton
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4q8o1y975w)
 
-**Note:** By default Emotion and JSS both inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the examples.
+**Note:** By default Emotion and JSS both inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the examples.
 
 ## React Emotion
 
@@ -297,7 +297,7 @@ export default ReactEmotionButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xj81yqx504)
 
-**Note:** By default Emotion and JSS both inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the examples.
+**Note:** By default Emotion and JSS both inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the examples.
 
 ## CSS Modules
 
@@ -344,13 +344,13 @@ export default CssModulesButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m4j01r75wx)
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
 
 ## Global CSS
 
 Explicitly providing the class names to the component is too much effort?
 Rest assured, we provide an option to make the class names **deterministic** for quick
-prototyping: [`dangerouslyUseGlobalCSS`](/customization/css-in-js#global-css).
+prototyping: [`dangerouslyUseGlobalCSS`](/customization/css-in-js/#global-css).
 
 **GlobalCssButton.css**
 ```css
@@ -385,7 +385,7 @@ export default GlobalCssButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2zv5m0j37p)
 
-**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the demo.
+**Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
 
 ## React JSS
 
@@ -433,7 +433,7 @@ export default injectSheet(styles)(ReactJssButton);
 
 ## CSS to MUI webpack Loader
 
-The [css-to-mui-loader](https://www.npmjs.com/package/css-to-mui-loader) for webpack allows you to write CSS that gets transpiled into JS for use with the [`withStyles()`](/customization/css-in-js#withstyles-styles-options-higher-order-component) higher-order component. It provides a few hooks for accessing the theme from within the CSS.
+The [css-to-mui-loader](https://www.npmjs.com/package/css-to-mui-loader) for webpack allows you to write CSS that gets transpiled into JS for use with the [`withStyles()`](/customization/css-in-js/#withstyles-styles-options-higher-order-component) higher-order component. It provides a few hooks for accessing the theme from within the CSS.
 
 **webpack.config.js**
 ```js
@@ -529,4 +529,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js#css-injection-order), as in the demo.
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.