[docs] Do SEO for the components

mui · Jun 24, 2018 · 68c2f16 · 68c2f16
1 parent 4ca0b17
commit 68c2f16
Show file tree

Hide file tree

Showing 46 changed files with 158 additions and 89 deletions.
diff --git a/BACKERS.md b/BACKERS.md
@@ -1,5 +1,7 @@
 # Sponsors & Backers
 
+<p class="description">Support Material-UI’s development.</p>
+
 Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:
 - [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
 - [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1448,7 +1448,7 @@ We have documented our approach to solving the problem in #10023. Basically, we
 This is what motivated the button breaking change. Unfortunately `type` has its own meaning in the HTML specification. You can use it on the following elements: `<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>`.
 We are using a more generic name to **avoid the confusion**: `variant`.
 
-Umbrella pull-request for: #10084, #10086, #10088.
+Umbrella pull request for: #10084, #10086, #10088.
 
 ```diff
 <Button
@@ -2185,7 +2185,7 @@ Big thanks to the 16 contributors who made this release possible.
 
 Here are some highlights ✨:
 - We have removed Flow from the core components in (#9453).
-You can learn more about the motivations in the pull-request.
+You can learn more about the motivations in the pull request.
 This changes two important things:
   - We have reduced the size of the bundle by ~8 kB gzipped.
   - The propTypes runtime checks are back. You might experience new warnings.
@@ -2384,7 +2384,7 @@ Here are some highlights ✨:
 ### Breaking change
 
 - [Select] Remove InputClasses (#9159) @oliviertassinari
-It's a revert. I have made the unwise call of adding the InputClasses property in an unrelated refactorization pull-request #8942. It was not taking the input classes property into account. It was a breaking change and not needed.
+It's a revert. I have made the unwise call of adding the InputClasses property in an unrelated refactorization pull request #8942. It was not taking the input classes property into account. It was a breaking change and not needed.
 - [core] Reduce bundle size by 2kB gzipped (#9129) @oliviertassinari
 We have removed some jss plugins from the default bundle:
   - [jss-expand](https://github.com/cssinjs/jss-expand) (1.3 kB)
@@ -2393,7 +2393,7 @@ We have removed some jss plugins from the default bundle:
   - [jss-template](https://github.com/cssinjs/jss-template) (330 B)
 
 It's a revert.
-I have made the unwise call of adding the InputClasses property in an unrelated refactorization pull-request #8942.
+I have made the unwise call of adding the InputClasses property in an unrelated refactorization pull request #8942.
 It was not taking the input classes property into account.
 It was a breaking change and not needed.
 

diff --git a/GOVERNANCE.md b/GOVERNANCE.md
@@ -1,5 +1,7 @@
 # Mui-Org Governance
 
+<p class="description">Material-UI is an open source project that depends on contributions from the community.</p>
+
 ## Overview
 
 Mui-Org houses projects related to [Material-UI](http://www.material-ui.com/), a set of [React](https://reactjs.org/) components

diff --git a/ROADMAP.md b/ROADMAP.md
@@ -1,6 +1,6 @@
 # Roadmap
 
-The roadmap is a living document, and it is likely that priorities will change, but the list below should give some indication of our plans for the next major release, and for the future.
+<p class="description">The roadmap is a living document, and it is likely that priorities will change, but the list below should give some indication of our plans for the next major release, and for the future.</p>
 
 Our priorities:
 1. **Material Design**. The Google Design team has recently released a new iteration on the Material Design specification which is focused on *themability*. This is great news! We will do our best to keep up to date. It also validates that heavily investing in customizability for v1 was a good call. We will continue our efforts in this area.

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -38,9 +38,6 @@ Router.onRouteChangeError = () => {
 const styles = theme => ({
   root: {
     display: 'flex',
-    alignItems: 'stretch',
-    minHeight: '100vh',
-    width: '100%',
   },
   grow: {
     flex: '1 1 auto',

diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import NextHead from 'next/head';
+import PropTypes from 'prop-types';
+
+function Head(props) {
+  const { title, description } = props;
+
+  return (
+    <NextHead>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      {/* Twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@MaterialUI" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content="https://material-ui.com/static/brand.png" />
+      {/* Facebook */}
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content="https://material-ui.com/static/brand.png" />
+      <meta property="og:locale" content="en_US" />
+    </NextHead>
+  );
+}
+
+Head.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string,
+};
+
+Head.defaultProps = {
+  description: "React Components that Implement Google's Material Design.",
+  title: 'Material-UI',
+};
+
+export default Head;
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -2,14 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
 import warning from 'warning';
-import Head from 'next/head';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
+import Head from 'docs/src/modules/components/Head';
 import AppContent from 'docs/src/modules/components/AppContent';
 import Demo from 'docs/src/modules/components/Demo';
 import Carbon from 'docs/src/modules/components/Carbon';
-import { getHeaders, getContents, getTitle } from 'docs/src/modules/utils/parseMarkdown';
+import {
+  getHeaders,
+  getContents,
+  getTitle,
+  getDescription,
+} from 'docs/src/modules/utils/parseMarkdown';
 
 const styles = theme => ({
   root: {
@@ -53,9 +58,7 @@ function MarkdownDocs(props, context) {
 
   return (
     <AppContent className={classes.root}>
-      <Head>
-        <title>{`${getTitle(markdown)} - Material-UI`}</title>
-      </Head>
+      <Head title={`${getTitle(markdown)} - Material-UI`} description={getDescription(markdown)} />
       <div className={classes.header}>
         <Button component="a" href={`${SOURCE_CODE_ROOT_URL}${markdownLocation}`}>
           {'Edit this page'}

diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js
@@ -1,5 +1,6 @@
 const headerRegExp = /---[\r\n]([\s\S]*)[\r\n]---/;
 const titleRegExp = /# (.*)[\r\n]/;
+const descriptionRegExp = /<p class="description">(.*)<\/p>[\r\n]/;
 const headerKeyValueRegExp = /(.*): (.*)/g;
 const emptyRegExp = /^\s*$/;
 
@@ -41,5 +42,19 @@ export function getContents(markdown) {
 export function getTitle(markdown) {
   const matches = markdown.match(titleRegExp);
 
-  return matches ? matches[1] : 'Material-UI';
+  if (!matches || !matches[1]) {
+    throw new Error('Missing title in the page');
+  }
+
+  return matches[1];
+}
+
+export function getDescription(markdown) {
+  const matches = markdown.match(descriptionRegExp);
+
+  if (!matches || !matches[1]) {
+    return null;
+  }
+
+  return matches[1];
 }
diff --git a/docs/src/pages/discover-more/changelog/changelog.md b/docs/src/pages/discover-more/changelog/changelog.md
@@ -1,3 +1,5 @@
 # Changelog
 
+<p class="description">Material-UI strictly follows Semantic Versioning 2.0.0.</p>
+
 All notable changes are described in the [CHANGELOG.md file](https://github.com/mui-org/material-ui/blob/master/CHANGELOG.md).
diff --git a/docs/src/pages/discover-more/community/community.md b/docs/src/pages/discover-more/community/community.md
@@ -1,6 +1,6 @@
 # Community
 
-If you want to stay up to date on the development of Material-UI or to reach out to the community, you can follow those resources:
+<p class="description">If you want to stay up to date on the development of Material-UI or to reach out to the community, you can follow those resources.</p>
 
 - Chat with us on [Gitter](https://gitter.im/mui-org/material-ui).
 - For help using Material-UI, ask on StackOverflow using the tag

diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md
@@ -1,9 +1,10 @@
 # Related projects
 
+<p class="description">We have built a carefully curated collection of libraries that worth giving a look.</p>
+
 Because the scope of problems Material-UI solves is limited, we try to play nicely with
 other libraries.
-We have built a carefully curated collection of libraries that worth giving a look.
-Feel free to submit a pull-request to add more projects; we will accept them if they match our criteria.
+Feel free to submit a pull request to add more projects; we will accept them if they match our criteria.
 
 ## Material-UI Specific Projects
 

diff --git a/docs/src/pages/discover-more/showcase/showcase.md b/docs/src/pages/discover-more/showcase/showcase.md
@@ -1,6 +1,6 @@
 # Showcase
 
-The following is a list of some of the public apps using Material-UI. Not all of them have their interface implemented using 100% Material-UI.
+<p class="description">The following is a list of some of the public apps using Material-UI.</p>
 
 Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update this page!
 

diff --git a/docs/src/pages/discover-more/team/team.md b/docs/src/pages/discover-more/team/team.md
@@ -1,6 +1,6 @@
 # Team
 
-An overview of the founding team and core contributors to Material-UI.
+<p class="description">An overview of the founding team and core contributors to Material-UI.</p>
 
 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.

diff --git a/docs/src/pages/discover-more/vision/vision.md b/docs/src/pages/discover-more/vision/vision.md
@@ -1,6 +1,6 @@
 # Material-UI’s Vision
 
-Our vision is to provide an elegant React implementation of the [Material Design guidelines](https://material.io/design/) **that can be customized to fully match your brand**.
+<p class="description">Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.</p>
 
 The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
 

diff --git a/docs/src/pages/getting-started/comparison/comparison.md b/docs/src/pages/getting-started/comparison/comparison.md
@@ -1,9 +1,9 @@
 # Comparison with other libraries
 
+<p class="description">You’re here because you want to know if Material-UI can solve your specific problems better. That’s what we hope to answer for you here.</p>
+
 This is definitely one of the most challenging pages in the guide to write, but we do feel it’s important.
 Odds are, you’ve had problems you tried to solve and you’ve used another library to solve them.
-You’re here because you want to know if Material-UI can solve your specific problems better.
-That’s what we hope to answer for you here.
 
 We’d like your help keeping this document up-to-date because the JavaScript world moves fast!
 If you notice an inaccuracy or something that doesn’t seem quite right, please let us know by

diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md
@@ -1,6 +1,6 @@
 # Example Projects
 
-Are you looking for an example project to get started?
+<p class="description">Are you looking for an example project to get started?</p>
 
 We host some example projects which you can find in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
 - [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)

diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md
@@ -1,6 +1,6 @@
 # Frequently Asked Questions
 
-Stuck on a particular problem? Check some of these common gotchas first.
+<p class="description">Stuck on a particular problem? Check some of these common gotchas first.</p>
 
 If you still can't find what you're looking for, you can ask the community in [gitter](https://gitter.im/mui-org/material-ui).
 For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. There is a StackOverflow tag called `material-ui` that you can use to tag your questions.

diff --git a/docs/src/pages/getting-started/installation/installation.md b/docs/src/pages/getting-started/installation/installation.md
@@ -1,5 +1,7 @@
 # Installation
 
+<p class="description">Install Material-UI, the world’s most popular React UI framework.</p>
+
 Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
 
 ## npm

diff --git a/docs/src/pages/getting-started/supported-components/supported-components.md b/docs/src/pages/getting-started/supported-components/supported-components.md
@@ -1,7 +1,6 @@
 # Supported Components
 
-The following is a list of Material Design components & features.
-Those currently supported by Material-UI are **highlighted ✓**.
+<p class="description">The following is a list of Material Design components & features. Those currently supported by Material-UI are highlighted ✓.</p>
 
 While we strive to follow the guidelines where practical (applying
 common sense where guidelines contradict - a more common occurrence than
@@ -11,7 +10,7 @@ allow developers to create compelling user interfaces and experiences.
 
 If you wish to add support for a component or feature not highlighted
 here, please search for the relevant [GitHub Issue](https://github.com/mui-org/material-ui/issues), or create a new one
-to discuss the approach before submitting a PR.
+to discuss the approach before submitting a pull request.
 
 - App bars
   - **[Top](https://material.io/design/components/app-bars-top.html) ✓**

diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms.md
@@ -1,5 +1,7 @@
 # Supported Platforms
 
+<p class="description">Learn about the platforms, from modern to old, that are supported by Material-UI.</p>
+
 ## Browser
 
 Material-UI supports the latest, stable releases of all major browsers and platforms.

diff --git a/docs/src/pages/getting-started/usage/Usage.js b/docs/src/pages/getting-started/usage/Usage.js
@@ -9,8 +9,6 @@ function Usage() {
         width: '100%',
         height: 350,
         border: 0,
-        borderRadius: 4,
-        overflow: 'hidden',
       }}
       sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
     />

diff --git a/docs/src/pages/getting-started/usage/usage.md b/docs/src/pages/getting-started/usage/usage.md
@@ -1,5 +1,7 @@
 # Usage
 
+<p class="description">Get started with React and Material-UI in no time.</p>
+
 Material-UI components work in isolation.
 **They are self-supporting**, and will inject, and only inject, the styles they need to display.
 They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/),

diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md
@@ -1,7 +1,6 @@
 # API Design Approach
 
-We have learned a great deal regarding how Material-UI is used,
-and the 1.x.x rewrite allowed us to completely rethink the component API.
+<p class="description">We have learned a great deal regarding how Material-UI is used, and the v1 rewrite allowed us to completely rethink the component API.</p>
 
 > API design is hard because you can make it seem simple but it's actually deceptively complex, or make it actually simple but seem complex.
 
@@ -48,7 +47,7 @@ to make the classes structure as simple as possible, while sufficient to impleme
 - The class applied to the root element is always called `root`.
 - All the default styles are grouped in a single class.
 - The classes applied to non-root elements are prefixed with the name of the element, e.g. `paperWidthXs` in the Dialog component.
-- The variants applied by a boolean property **aren't** prefixed, e.g. the `rounded` class 
+- The variants applied by a boolean property **aren't** prefixed, e.g. the `rounded` class
 applied by the `rounded` property.
 - The variants applied by and enum property **are** prefixed, e.g. the `colorPrimary` class
 applied by the `color="primary"` property.
@@ -113,21 +112,21 @@ For example, let's take a button that has different types. Each option has its p
     fab: boolean;
   };
   ```
-  
+
    This API enabled the shorthand notation:
    `<Button>`, `<Button raised />`, `<Button fab />`.
-   
+
 - Option 2 *enum*:
 
   ```tsx
   type Props = {
     variant: 'flat' | 'raised' | 'fab';
   }
   ```
-  
+
   This API is more verbose:
   `<Button>`, `<Button variant="contained">`, `<Button variant="fab">`.
-  
+
    However it prevents an invalid combination from being used,
    bounds the number of properties exposed,
    and can easily support new values in the future.

diff --git a/docs/src/pages/guides/composition/composition.md b/docs/src/pages/guides/composition/composition.md
@@ -1,6 +1,6 @@
 # Composition
 
-Material-UI tries to make composition as easy as possible.
+<p class="description">Material-UI tries to make composition as easy as possible.</p>
 
 ## Wrapping components
 

diff --git a/docs/src/pages/guides/csp/csp.md b/docs/src/pages/guides/csp/csp.md
@@ -1,6 +1,6 @@
 # Content Security Policy (CSP)
 
-Starting with JSS version 9.6.0, Material-UI supports Content Security Policy headers.
+<p class="description">Material-UI supports Content Security Policy headers.</p>
 
 ## What is CSP and why is it useful?
 

diff --git a/docs/src/pages/guides/flow/flow.md b/docs/src/pages/guides/flow/flow.md
@@ -1,6 +1,7 @@
 # Flow
 
-You can add static typing to JavaScript to improve developer productivity and code quality thanks to [Flow](https://github.com/facebook/flow).
+<p class="description">You can add static typing to JavaScript to improve developer productivity and code quality thanks to Flow.</p>
+
 Have a look at the [Create React App with Flow](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-flow) example.
 
 ## flow-typed

diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
@@ -1,10 +1,9 @@
 # Style Library Interoperability
 
-While it is simple to use the JSS based styling solution provided by Material-UI to style your application,
-it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.
+<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
 
-This guide aims to document the most popular alternatives, but you should find that the principals
-applied here can be adapted to other libraries.
+This guide aims to document the most popular alternatives,
+but you should find that the principals applied here can be adapted to other libraries.
 
 We have provided examples for the following styling solutions:
 

diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x.md b/docs/src/pages/guides/migration-v0x/migration-v0x.md
@@ -1,5 +1,7 @@
 # Migration From v0.x
 
+<p class="description">Yeah, v1 has been released!</p>
+
 ## FAQ
 
 ### Woah - the API is way different! Does that mean 1.0 is completely different, I’ll have to learn the basics all over again, and migrating will be practically impossible?
@@ -10,7 +12,7 @@ We have been making lower-level components, abstracting less complexity.
 
 ### What motivated such a large change?
 
-Material-UI was started [3 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46).
+Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46).
 The ecosystem has evolved a lot since then, we have also learned a lot.
 [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up**
 taking advantage of this knowledge to address long-standing issues. To name some of the major changes: