[docs] Reduce entropy

docs/scripts/buildApi.js

@@ -29,15 +29,15 @@ const docsApiDirectory = path.resolve(rootDirectory, 'pages/api');
 const theme = createMuiTheme();
 
 function buildDocs(options) {
-  const { componentPath, pagesMarkdown } = options;
-  const src = readFileSync(componentPath, 'utf8');
+  const { component: componentObject, pagesMarkdown } = options;
+  const src = readFileSync(componentObject.filename, 'utf8');
 
   if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) {
     return;
   }
 
   // eslint-disable-next-line global-require, import/no-dynamic-require
-  const component = require(componentPath);
+  const component = require(componentObject.filename);
   const styles = {
     classes: [],
     name: null,
@@ -55,26 +55,26 @@ function buildDocs(options) {
   try {
     reactAPI = reactDocgen.parse(src);
   } catch (err) {
-    console.log('Error parsing src for', componentPath);
+    console.log('Error parsing src for', componentObject.filename);
     throw err;
   }
 
-  reactAPI.name = path.parse(componentPath).name;
+  reactAPI.name = path.parse(componentObject.filename).name;
   reactAPI.styles = styles;
   reactAPI.pagesMarkdown = pagesMarkdown;
   reactAPI.src = src;
 
-  // if (reactAPI.name !== 'Backdrop') {
+  // if (reactAPI.name !== 'Zoom') {
   //   return;
   // }
 
   // Relative location in the file system.
-  reactAPI.filename = componentPath.replace(rootDirectory, '');
+  reactAPI.filename = componentObject.filename.replace(rootDirectory, '');
   let markdown;
   try {
     markdown = generateMarkdown(reactAPI);
   } catch (err) {
-    console.log('Error generating markdown for', componentPath);
+    console.log('Error generating markdown for', componentObject.filename);
     throw err;
   }
 
@@ -100,26 +100,20 @@ export default withRoot(Page);
 `,
     );
 
-    console.log('Built markdown docs for', componentPath);
+    console.log('Built markdown docs for', componentObject.filename);
   });
 }
 
 const pagesMarkdown = findPagesMarkdown()
   .map(markdown => {
     const markdownSource = readFileSync(markdown.filename, 'utf8');
-
     return {
       ...markdown,
       components: getHeaders(markdownSource).components,
     };
   })
   .filter(markdown => markdown.components.length > 0);
 
-const components = findComponents();
-
-components.forEach(component => {
-  buildDocs({
-    componentPath: component.filename,
-    pagesMarkdown,
-  });
+findComponents().forEach(component => {
+  buildDocs({ component, pagesMarkdown });
 });

docs/src/modules/utils/find.js

@@ -4,9 +4,13 @@ const path = require('path');
 const markdownRegex = /\.md$/;
 
 // Returns the markdowns of the documentation in a flat array.
+// {
+//   pathname: String,
+//   filename: String,
+// }
 function findPagesMarkdown(
   directory = path.resolve(__dirname, '../../../src/pages'),
-  pagesMarkdown = []
+  pagesMarkdown = [],
 ) {
   const items = fs.readdirSync(directory);
 
@@ -21,11 +25,17 @@ function findPagesMarkdown(
     if (!markdownRegex.test(item)) {
       return;
     }
-    let pathname = itemPath.replace(new RegExp(`\\${path.sep}`, 'g'), '/').replace(/^.*\/pages/, '').replace('.md', '');
 
-    if (pathname.indexOf('/demos') === 0) {
-      pathname = pathname.split('/').slice(0, 3).join('/');
-    }
+    let pathname = itemPath
+      .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
+      .replace(/^.*\/pages/, '')
+      .replace('.md', '');
+
+    // Remove the last pathname segment.
+    pathname = pathname
+      .split('/')
+      .slice(0, 3)
+      .join('/');
 
     pagesMarkdown.push({
       // Relative location in the path (URL) system.
@@ -71,11 +81,14 @@ const blackList = ['/.eslintrc', '/_document'];
 function findPages(
   options = {},
   directory = path.resolve(__dirname, '../../../../pages'),
-  pages = []
+  pages = [],
 ) {
   fs.readdirSync(directory).forEach(item => {
     const itemPath = path.resolve(directory, item);
-    const pathname = itemPath.replace(new RegExp(`\\${path.sep}`, 'g'), '/').replace(/^.*\/pages/, '').replace('.js', '');
+    const pathname = itemPath
+      .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
+      .replace(/^.*\/pages/, '')
+      .replace('.js', '');
 
     if (options.front && pathname.indexOf('/demos') === -1 && pathname.indexOf('/api') === -1) {
       return;

docs/src/modules/utils/generateMarkdown.js

@@ -272,7 +272,7 @@ ${pagesMarkdown.map(page => `- [${pageToTitle(page)}](${page.pathname})`).join('
 `;
 }
 
-export default function generateMarkdown(reactAPI: Object) {
+export default function generateMarkdown(reactAPI) {
   return [
     generateHeader(reactAPI),
     '',

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

@@ -17,7 +17,7 @@ So, you may have noticed in the demos how this *CSS-in-JS* looks.
 We use the higher-order component created by [`withStyles`](#api)
 to inject an array of styles into the DOM as CSS, using JSS. Here's an example:
 
-{{"demo": "pages/customization/CssInJs.js"}}
+{{"demo": "pages/customization/css-in-js/CssInJs.js"}}
 
 ## JSS
 
@@ -38,7 +38,7 @@ When rendering on the server, you will need to get all rendered styles as a CSS
 The `SheetsRegistry` class allows you to manually aggregate and stringify them.
 Read more about [Server Rendering](/guides/server-rendering).
 
-{{"demo": "pages/customization/JssRegistry.js", "hideEditButton": true}}
+{{"demo": "pages/customization/css-in-js/JssRegistry.js", "hideEditButton": true}}
 
 ## Sheets manager
 
@@ -373,7 +373,7 @@ function RenderProps() {
 }
 ```
 
-{{"demo": "pages/customization/RenderProps.js"}}
+{{"demo": "pages/customization/css-in-js/RenderProps.js"}}
 
 You can access the theme the same way you would do it with `withStyles`:
 ```
@@ -406,7 +406,7 @@ function StyledComponents() {
 }
 ```
 
-{{"demo": "pages/customization/StyledComponents.js"}}
+{{"demo": "pages/customization/css-in-js/StyledComponents.js"}}
 
 You can access the theme the same way you would do it with `withStyles`:
 ```

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

@@ -23,7 +23,7 @@ consider the [CSS injection order](/customization/css-in-js#css-injection-order)
 by Material-UI to style a component has the highest specificity possible since the `<link>` is injected at the bottom
 of the `<head />` to ensure the components always render correctly.
 
-{{"demo": "pages/customization/OverridesClassNames.js"}}
+{{"demo": "pages/customization/overrides/OverridesClassNames.js"}}
 
 ### Overriding with classes
 
@@ -40,7 +40,7 @@ you wish to add or override.
 
 Notice that in addition to the button styling, the button label's capitalization has been changed:
 
-{{"demo": "pages/customization/OverridesClasses.js"}}
+{{"demo": "pages/customization/overrides/OverridesClasses.js"}}
 
 ### Overriding with inline-style
 
@@ -50,15 +50,15 @@ These properties are always applied to the root element.
 
 You don't have to worry about CSS specificity as the inline-style takes precedence over the regular CSS.
 
-{{"demo": "pages/customization/OverridesInlineStyle.js"}}
+{{"demo": "pages/customization/overrides/OverridesInlineStyle.js"}}
 
 ## 2. Specific variation of a component
 
 You might need to create a variation of a component and use it in different contexts, for instance a colorful button on your product page, however you probably want to keep your code [*DRY*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).
 
 The best approach is to follow option 1 and then take advantage of the composition power of React by exporting your customized component to use wherever you need it.
 
-{{"demo": "pages/customization/OverridesComponent.js", "hideEditButton": true}}
+{{"demo": "pages/customization/overrides/OverridesComponent.js", "hideEditButton": true}}
 
 ## 3. Material Design variations
 

docs/src/pages/customization/WithTheme.js → docs/src/pages/customization/themes/WithTheme.js

@@ -17,7 +17,7 @@ function WithTheme(props) {
     primaryColor: {
       backgroundColor: primaryColor,
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
-      color: '#fff',
+      color: theme.palette.common.white,
     },
   };
 

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

@@ -127,7 +127,7 @@ Note that `contrastThreshold` follows a non-linear curve.
 
 #### Example
 
-{{"demo": "pages/customization/Palette.js"}}
+{{"demo": "pages/customization/themes/Palette.js"}}
 
 #### Color tool
 
@@ -150,7 +150,7 @@ const theme = createMuiTheme({
 });
 ```
 
-{{"demo": "pages/customization/DarkTheme.js", "hideEditButton": true}}
+{{"demo": "pages/customization/themes/DarkTheme.js", "hideEditButton": true}}
 
 ### Typography
 
@@ -161,7 +161,7 @@ These sizes are used across the components.
 Have a look at the following example regarding changing the default values, such as the font family.
 If you want to learn more about typography, you can check out [the typography section](/style/typography).
 
-{{"demo": "pages/customization/TypographyTheme.js"}}
+{{"demo": "pages/customization/themes/TypographyTheme.js"}}
 
 #### Font size
 
@@ -181,7 +181,7 @@ html {
 
 *You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
 
-{{"demo": "pages/customization/FontSizeTheme.js"}}
+{{"demo": "pages/customization/themes/FontSizeTheme.js"}}
 
 ### Other variables
 
@@ -195,15 +195,15 @@ you can also take advantage of the theme.
 It can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:
 
-{{"demo": "pages/customization/CustomStyles.js"}}
+{{"demo": "pages/customization/themes/CustomStyles.js"}}
 
 ## Customizing all 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.
 That's a really powerful feature.
 
-{{"demo": "pages/customization/OverridesTheme.js"}}
+{{"demo": "pages/customization/themes/OverridesTheme.js"}}
 
 The list of these customization points for each component is documented under the **Component API** section.
 For instance, you can have a look at the [Button](/api/button#css-api).
@@ -214,14 +214,14 @@ Alternatively, you can always have a look at the [implementation](https://github
 You might need to access the theme variables inside your React components.
 Let's say you want to display the value of the primary color, you can use the `withTheme()` higher-order component to do so. Here is an example:
 
-{{"demo": "pages/customization/WithTheme.js"}}
+{{"demo": "pages/customization/themes/WithTheme.js"}}
 
 ## Nesting the theme
 
 The theming solution is very flexible, as you can nest multiple theme providers.
 This can be really useful when dealing with different area of your application that have distinct appearance from each other.
 
-{{"demo": "pages/customization/Nested.js"}}
+{{"demo": "pages/customization/themes/Nested.js"}}
 
 ## API
 

docs/src/pages/discover-more/showcase.md → docs/src/pages/discover-more/showcase/showcase.md

@@ -8,62 +8,62 @@ Want to add your app? Found an app that no longer works or no longer uses Materi
 
 ### 1. LocalMonero
   A safe and easy-to-use person-to-person platform to allow anyone to trade their local currency for Monero, anywhere.
- 
+
   https://localmonero.co/?rc=ogps
-  
+
 ### 2. Venuemob
   A platform for individuals and businesses to find and book the perfect venue for any event.
- 
+
  https://venuemob.com.au/
-  
+
 ### 3. SlidesUp
   SlidesUp is a platform to help conference organizers plan their events.
-  
+
   home: https://slidesup.com
-  
+
   example: https://test.app.slidesup.com/confs/boston-conference-2017/agenda
-  
+
 ### 4. Mantic Transparence
   An Open Data tool showing financial and demographic data for all the towns in France (in French).
-   
+
   https://app.mantic.fr/
-  
+
 ### 5. Meetingku
   A tool for controlling the meeting time.
- 
+
   https://www.meetingku.com/
- 
+
 ### 6. Indecision Digest
   A platform meant to bring professionals and youth together for career enlightenment.
-  
+
   https://indecision.now.sh/
-   
+
 ### 7. Injectify
   Allowing pentesters to perform advanced MiTM attacks on websites with ease.
- 
+
   https://injectify.samdd.me/
- 
+
 ### 8. Acme Center
   Collection of services, that empower you to express, discover, and be productive.
-   
+
   https://acme.center
 
 ### 9. myBlog
   A Blog use material-ui-next.
- 
+
   example: https://myblog831213.herokuapp.com/
- 
+
   project: https://github.com/shady831213/myBlog
 
 ### 10. Builder Book
   Open source web app to write and host documentation or sell books.
   Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
-  
+
   homepage: https://builderbook.org/
 
   github: https://github.com/builderbook/builderbook
-  
+
 ### 11. Modole Language Exchange
   Web app that allows users to write in the language they're learning and have it corrected by native speakers.
-  
+
   https://en.modole.io

docs/src/pages/discover-more/team.md → docs/src/pages/discover-more/team/team.md

@@ -5,7 +5,7 @@ An overview of the founding team and core contributors to Material-UI.
 Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
 The development of the project and its ecosystem is guided by an international team, some of whom have chosen to be featured below.
 
-{{"demo": "pages/discover-more/Team.js"}}
+{{"demo": "pages/discover-more/team/Team.js"}}
 
 Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request.
 Read our [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.

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

@@ -30,7 +30,7 @@ render(<App />, document.querySelector('#app'));
 
 Yes, it's really all you need to get started as you can see in this live and interactive demo:
 
-{{"demo": "pages/getting-started/Usage.js"}}
+{{"demo": "pages/getting-started/usage/Usage.js"}}
 
 ## Next steps