From 6e3c7abced49371bd46973a34134a3c2e6eecde6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 5 Jan 2020 16:01:59 +0100
Subject: [PATCH] [docs] Add company page (#18964)

---
 crowdin.yml                                   |   2 +-
 docs/pages/company/about.js                   |  14 ++
 docs/pages/company/contact.js                 |  14 ++
 docs/pages/discover-more/governance.js        |  14 --
 docs/pages/index.js                           |   8 +-
 docs/src/modules/components/AppContent.js     |  16 +-
 docs/src/modules/components/AppFrame.js       |  13 +-
 docs/src/modules/components/EditPage.js       |   3 +-
 docs/src/modules/components/Head.js           |   8 +-
 docs/src/modules/components/HomeFooter.js     |  30 +++-
 docs/src/modules/components/MarkdownDocs.js   | 144 ++--------------
 .../modules/components/TopLayoutCompany.js    |  67 ++++++++
 .../src/modules/components/useMarkdownDocs.js | 157 ++++++++++++++++++
 .../components/useMarkdownDocsContents.js     |  43 -----
 docs/src/modules/components/usePageTitle.js   |  15 --
 docs/src/modules/constants.js                 |   3 +
 docs/src/pages.js                             |   3 +-
 docs/src/pages/company/about/about.md         |  23 +++
 docs/src/pages/company/contact/contact.md     |  13 ++
 .../discover-more/governance/governance.md    |  99 -----------
 docs/src/pages/discover-more/vision/vision.md |   2 +-
 docs/translations/translations.json           |   2 +-
 22 files changed, 360 insertions(+), 333 deletions(-)
 create mode 100644 docs/pages/company/about.js
 create mode 100644 docs/pages/company/contact.js
 delete mode 100644 docs/pages/discover-more/governance.js
 create mode 100644 docs/src/modules/components/TopLayoutCompany.js
 create mode 100644 docs/src/modules/components/useMarkdownDocs.js
 delete mode 100644 docs/src/modules/components/useMarkdownDocsContents.js
 delete mode 100644 docs/src/modules/components/usePageTitle.js
 create mode 100644 docs/src/pages/company/about/about.md
 create mode 100644 docs/src/pages/company/contact/contact.md
 delete mode 100644 docs/src/pages/discover-more/governance/governance.md

diff --git a/crowdin.yml b/crowdin.yml
index 9e567f766c54c9..537c07dc3e4fbc 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -5,8 +5,8 @@ files:
       - /docs/src/pages/getting-started/templates/*/**/*
       - /docs/src/pages/premium-themes/*/**/*
       - /docs/src/pages/discover-more/backers/*
-      - /docs/src/pages/discover-more/governance/*
       - /docs/src/pages/discover-more/roadmap/*
+      - /docs/src/pages/company/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%
   - source: /docs/translations/*.json
     ignore:
diff --git a/docs/pages/company/about.js b/docs/pages/company/about.js
new file mode 100644
index 00000000000000..6bd0db5ba86275
--- /dev/null
+++ b/docs/pages/company/about.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/about', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/company/about',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/company/about';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}
diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js
new file mode 100644
index 00000000000000..a29f44bb35a3fc
--- /dev/null
+++ b/docs/pages/company/contact.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/contact', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/company/contact',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/company/contact';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}
diff --git a/docs/pages/discover-more/governance.js b/docs/pages/discover-more/governance.js
deleted file mode 100644
index d2cc35c4d3dbd9..00000000000000
--- a/docs/pages/discover-more/governance.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-
-const req = require.context('docs/src/pages/discover-more/governance', false, /\.(md|js|tsx)$/);
-const reqSource = require.context(
-  '!raw-loader!../../src/pages/discover-more/governance',
-  false,
-  /\.(js|tsx)$/,
-);
-const reqPrefix = 'pages/discover-more/governance';
-
-export default function Page() {
-  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
-}
diff --git a/docs/pages/index.js b/docs/pages/index.js
index 5678100bf260e0..8d82a44f9b5a8f 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -31,9 +31,9 @@ function loadDependencies() {
 const useStyles = makeStyles(theme => ({
   root: {
     flex: '1 0 100%',
-  },
-  drawer: {
-    width: 0,
+    '& #main-content': {
+      outline: 0,
+    },
   },
   hero: {
     paddingTop: 64,
@@ -111,7 +111,7 @@ export default function HomePage() {
   const classes = useStyles();
 
   return (
-    <AppFrame classes={{ drawer: classes.drawer }}>
+    <AppFrame>
       <div className={classes.root}>
         <Head />
         <main id="main-content" tabIndex="-1">
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
index 54b881de2b6d9c..20170d813cc94f 100644
--- a/docs/src/modules/components/AppContent.js
+++ b/docs/src/modules/components/AppContent.js
@@ -11,6 +11,7 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     maxWidth: '100%',
     margin: '0 auto',
+    outline: 0,
     [theme.breakpoints.up('sm')]: {
       paddingRight: theme.spacing(1),
       maxWidth: 'calc(100% - 175px)',
@@ -40,7 +41,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function AppContent(props) {
-  const { children, disableAd, disableToc } = props;
+  const { children, className, disableAd, disableToc } = props;
   const classes = useStyles();
 
   return (
@@ -48,10 +49,14 @@ export default function AppContent(props) {
       component="main"
       id="main-content"
       tabIndex={-1}
-      className={clsx(classes.root, {
-        [classes.ad]: !disableAd,
-        [classes.disableToc]: disableToc,
-      })}
+      className={clsx(
+        classes.root,
+        {
+          [classes.ad]: !disableAd,
+          [classes.disableToc]: disableToc,
+        },
+        className,
+      )}
     >
       {children}
     </Container>
@@ -60,6 +65,7 @@ export default function AppContent(props) {
 
 AppContent.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   disableAd: PropTypes.bool.isRequired,
   disableToc: PropTypes.bool.isRequired,
 };
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 5ea9b31f3113be..8101f884bd5a0c 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -30,10 +30,10 @@ import Link from 'docs/src/modules/components/Link';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import Notifications from 'docs/src/modules/components/Notifications';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
-import usePageTitle from 'docs/src/modules/components/usePageTitle';
 import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
 const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';
@@ -137,11 +137,6 @@ const styles = theme => ({
       display: 'none',
     },
   },
-  '@global': {
-    '#main-content': {
-      outline: 0,
-    },
-  },
 });
 
 function AppFrame(props) {
@@ -183,13 +178,13 @@ function AppFrame(props) {
 
   const router = useRouter();
   const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));
-  const title = usePageTitle({ t });
+  const { activePage } = React.useContext(PageContext);
 
   let disablePermanent = false;
   let navIconClassName = '';
   let appBarClassName = classes.appBar;
 
-  if (title === null) {
+  if (activePage.title === false) {
     // home route, don't shift app bar or dock drawer
     disablePermanent = true;
     appBarClassName += ` ${classes.appBarHome}`;
@@ -337,7 +332,7 @@ function AppFrame(props) {
         </Toolbar>
       </AppBar>
       <AppDrawer
-        className={classes.drawer}
+        className={disablePermanent ? '' : classes.drawer}
         disablePermanent={disablePermanent}
         onClose={handleDrawerClose}
         onOpen={handleDrawerOpen}
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index e01f47918a3b59..be8eef2661af14 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import Button from '@material-ui/core/Button';
-
-const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/edit/master';
+import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
 
 export default function EditPage(props) {
   const { markdownLocation } = props;
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
index 201ba8eae61ad9..d75154c0ad9449 100644
--- a/docs/src/modules/components/Head.js
+++ b/docs/src/modules/components/Head.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import NextHead from 'next/head';
-import { Router as Router2, useRouter } from 'next/router';
+import { Router, useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
 export default function Head(props) {
-  const router = useRouter();
   const t = useSelector(state => state.options.t);
-  const userLanguage = useSelector(state => state.options.userLanguage);
   const { description = t('strapline'), title = t('headTitle'), children } = props;
+  const userLanguage = useSelector(state => state.options.userLanguage);
+  const router = useRouter();
 
   return (
     <NextHead>
@@ -30,7 +30,7 @@ export default function Head(props) {
       <meta property="og:title" content={title} />
       <meta
         property="og:url"
-        content={`https://material-ui.com${Router2._rewriteUrlForNextExport(router.asPath)}`}
+        content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
       <meta property="og:image" content="https://material-ui.com/static/brand.png" />
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
index 58dfa3347fc196..fe0fb38c103346 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/HomeFooter.js
@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
@@ -22,7 +23,7 @@ const styles = theme => ({
     marginBottom: theme.spacing(4),
     '& img': {
       width: 28,
-      height: 28,
+      height: 22,
       marginRight: theme.spacing(1.5),
     },
   },
@@ -56,13 +57,15 @@ function HomeFooter(props) {
       <Container maxWidth="md">
         <footer className={classes.footer}>
           <Grid container>
-            <Grid item xs={12} sm={4}>
+            <Grid item xs={12} sm={3}>
               <div className={classes.logo}>
                 <img src="/static/images/material-ui-logo.svg" alt="" />
-                <Typography color="primary">Material-UI</Typography>
+                <Link variant="body1" color="inherit" href="/">
+                  Material-UI
+                </Link>
               </div>
             </Grid>
-            <Grid item xs={6} sm={4} className={classes.list}>
+            <Grid item xs={6} sm={3} className={classes.list}>
               <Typography component="h2" gutterBottom>
                 {t('footerCommunity')}
               </Typography>
@@ -97,7 +100,7 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} sm={4} className={classes.list}>
+            <Grid item xs={6} sm={3} className={classes.list}>
               <Typography component="h2" gutterBottom>
                 {t('footerResources')}
               </Typography>
@@ -119,6 +122,23 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
+            <Grid item xs={6} sm={3} className={classes.list}>
+              <Typography component="h2" gutterBottom>
+                {t('footerCompany')}
+              </Typography>
+              <ul>
+                <li>
+                  <Link color="inherit" variant="body2" href="/company/about/">
+                    About
+                  </Link>
+                </li>
+                <li>
+                  <Link color="inherit" variant="body2" href="/company/contact/">
+                    Contact Us
+                  </Link>
+                </li>
+              </ul>
+            </Grid>
           </Grid>
           <Typography className={classes.version} color="textSecondary" variant="body2">
             <Interpolate
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 128135f6794032..fa06739536264d 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -8,24 +8,16 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Head from 'docs/src/modules/components/Head';
+import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
 import AppContent from 'docs/src/modules/components/AppContent';
-import Demo from 'docs/src/modules/components/Demo';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import Ad from 'docs/src/modules/components/Ad';
 import EditPage from 'docs/src/modules/components/EditPage';
-import useMarkdownDocsContents from 'docs/src/modules/components/useMarkdownDocsContents';
 import PageContext from 'docs/src/modules/components/PageContext';
-import {
-  getHeaders,
-  getTitle,
-  getDescription,
-  demoRegexp,
-} from 'docs/src/modules/utils/parseMarkdown';
+import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
-import { LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
@@ -36,10 +28,6 @@ const styles = theme => ({
     flexDirection: 'column',
     alignItems: 'flex-end',
   },
-  markdownElement: {
-    marginBottom: theme.spacing(2),
-    padding: theme.spacing(0, 1),
-  },
   markdownElementBlog: {
     maxWidth: 700,
     margin: 'auto',
@@ -77,8 +65,6 @@ const styles = theme => ({
   },
 });
 
-const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/blob/master/docs/src';
-
 function flattenPages(pages, current = []) {
   return pages.reduce((items, item) => {
     if (item.children && item.children.length > 1) {
@@ -116,43 +102,16 @@ function MarkdownDocs(props) {
   } = props;
 
   const t = useSelector(state => state.options.t);
-  const userLanguage = useSelector(state => state.options.userLanguage);
-
-  let demos;
-  let markdown = markdownProp;
 
-  if (req) {
-    demos = {};
-    const markdowns = {};
-    req.keys().forEach(filename => {
-      if (filename.indexOf('.md') !== -1) {
-        const match = filename.match(/-([a-z]{2})\.md$/);
-
-        if (match && LANGUAGES_IN_PROGRESS.indexOf(match[1]) !== -1) {
-          markdowns[match[1]] = req(filename);
-        } else {
-          markdowns.en = req(filename);
-        }
-      } else if (filename.indexOf('.tsx') !== -1) {
-        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '').replace(/\.tsx/g, '.js')}`;
+  const markdownDocs = useMarkdownDocs({
+    markdown: markdownProp,
+    markdownLocation: markdownLocationProp,
+    req,
+    reqPrefix,
+    reqSource,
+  });
 
-        demos[demoName] = {
-          ...demos[demoName],
-          tsx: req(filename).default,
-          rawTS: reqSource(filename),
-        };
-      } else {
-        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '')}`;
-
-        demos[demoName] = {
-          ...demos[demoName],
-          js: req(filename).default,
-          raw: reqSource(filename),
-        };
-      }
-    });
-    markdown = markdowns[userLanguage] || markdowns.en;
-  }
+  const headers = getHeaders(markdownDocs.markdown);
 
   const { activePage, pages } = React.useContext(PageContext);
   const pageList = flattenPages(pages);
@@ -161,22 +120,13 @@ function MarkdownDocs(props) {
   const prevPage = pageList[currentPageNum - 1];
   const nextPage = pageList[currentPageNum + 1];
 
-  const headers = getHeaders(markdown);
-  // eslint-disable-next-line no-underscore-dangle
-  global.__MARKED_UNIQUE__ = {};
-
-  const { contents, markdownLocation } = useMarkdownDocsContents({
-    markdown,
-    markdownLocationProp,
-  });
-
   return (
     <AppFrame>
       <Head
-        title={`${headers.title || getTitle(markdown)} - Material-UI`}
-        description={headers.description || getDescription(markdown)}
+        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
+        description={headers.description || getDescription(markdownDocs.markdown)}
       />
-      {disableToc ? null : <AppTableOfContents contents={contents} />}
+      {disableToc ? null : <AppTableOfContents contents={markdownDocs.contents} />}
       {disableAd ? null : (
         <Portal
           container={() => {
@@ -188,77 +138,13 @@ function MarkdownDocs(props) {
           <Ad />
         </Portal>
       )}
-      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
-        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
-          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
-        </symbol>
-      </svg>
       <AppContent disableAd={disableAd} disableToc={disableToc}>
         {!disableEdit ? (
           <div className={classes.header}>
-            <EditPage
-              markdownLocation={markdownLocation}
-              sourceCodeRootUrl={SOURCE_CODE_ROOT_URL}
-            />
+            <EditPage markdownLocation={markdownDocs.location} />
           </div>
         ) : null}
-        {contents.map((content, index) => {
-          if (demos && demoRegexp.test(content)) {
-            let demoOptions;
-            try {
-              demoOptions = JSON.parse(`{${content}}`);
-            } catch (err) {
-              console.error('JSON.parse fails with: ', `{${content}}`);
-              console.error(err);
-              return null;
-            }
-
-            const name = demoOptions.demo;
-            if (!demos || !demos[name]) {
-              const errorMessage = [
-                `Missing demo: ${name}. You can use one of the following:`,
-                Object.keys(demos),
-              ].join('\n');
-
-              if (userLanguage === 'en') {
-                throw new Error(errorMessage);
-              }
-
-              if (process.env.NODE_ENV !== 'production') {
-                console.error(errorMessage);
-              }
-
-              const warnIcon = (
-                <span role="img" aria-label={t('emojiWarning')}>
-                  ⚠️
-                </span>
-              );
-              return (
-                <div key={content}>
-                  {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                  {warnIcon} Missing demo `{name}` {warnIcon}
-                </div>
-              );
-            }
-
-            return (
-              <Demo
-                key={content}
-                demo={demos[name]}
-                demoOptions={demoOptions}
-                githubLocation={`${SOURCE_CODE_ROOT_URL}/${name}`}
-              />
-            );
-          }
-
-          return (
-            <MarkdownElement
-              className={clsx(classes.markdownElement, { [classes.markdownElementBlog]: blog })}
-              key={index}
-              text={content}
-            />
-          );
-        })}
+        <div className={clsx({ [classes.markdownElementBlog]: blog })}>{markdownDocs.element}</div>
         <footer className={classes.footer}>
           {!currentPage ||
           currentPage.displayNav === false ||
diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
new file mode 100644
index 00000000000000..a869efff83d8d5
--- /dev/null
+++ b/docs/src/modules/components/TopLayoutCompany.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Head from 'docs/src/modules/components/Head';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import AppContent from 'docs/src/modules/components/AppContent';
+import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
+import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
+import HomeFooter from 'docs/src/modules/components/HomeFooter';
+
+const styles = theme => ({
+  root: {
+    flex: '1 0 100%',
+  },
+  appContent: {
+    marginBottom: theme.spacing(20),
+  },
+});
+
+function TopLayoutCompany(props) {
+  const {
+    classes,
+    markdown: markdownProp,
+    markdownLocation: markdownLocationProp,
+    req,
+    reqPrefix,
+    reqSource,
+  } = props;
+
+  const markdownDocs = useMarkdownDocs({
+    markdown: markdownProp,
+    markdownLocation: markdownLocationProp,
+    req,
+    reqPrefix,
+    reqSource,
+  });
+
+  const headers = getHeaders(markdownDocs.markdown);
+
+  return (
+    <AppFrame>
+      <Head
+        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
+        description={headers.description || getDescription(markdownDocs.markdown)}
+      />
+      <div className={classes.root}>
+        <AppContent disableAd disableToc className={classes.appContent}>
+          {markdownDocs.element}
+        </AppContent>
+        <HomeFooter />
+      </div>
+    </AppFrame>
+  );
+}
+
+TopLayoutCompany.propTypes = {
+  classes: PropTypes.object.isRequired,
+  markdown: PropTypes.string,
+  // You can define the direction location of the markdown file.
+  // Otherwise, we try to determine it with an heuristic.
+  markdownLocation: PropTypes.string,
+  req: PropTypes.func,
+  reqPrefix: PropTypes.string,
+  reqSource: PropTypes.func,
+};
+
+export default withStyles(styles)(TopLayoutCompany);
diff --git a/docs/src/modules/components/useMarkdownDocs.js b/docs/src/modules/components/useMarkdownDocs.js
new file mode 100644
index 00000000000000..87d8210d606a6f
--- /dev/null
+++ b/docs/src/modules/components/useMarkdownDocs.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import kebabCase from 'lodash/kebabCase';
+import { Router as Router2 } from 'next/router';
+import { useSelector } from 'react-redux';
+import Demo from 'docs/src/modules/components/Demo';
+import { getHeaders, getContents, demoRegexp } from 'docs/src/modules/utils/parseMarkdown';
+import PageContext from 'docs/src/modules/components/PageContext';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { LANGUAGES_IN_PROGRESS, SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+
+export default function useMarkdownDocs(options) {
+  const {
+    markdownLocation: locationProp,
+    markdown: markdownProp,
+    req,
+    reqPrefix,
+    reqSource,
+  } = options;
+
+  const userLanguage = useSelector(state => state.options.userLanguage);
+  let demos;
+  let markdown = markdownProp;
+
+  if (!markdown) {
+    demos = {};
+    const markdowns = {};
+    req.keys().forEach(filename => {
+      if (filename.indexOf('.md') !== -1) {
+        const match = filename.match(/-([a-z]{2})\.md$/);
+
+        if (match && LANGUAGES_IN_PROGRESS.indexOf(match[1]) !== -1) {
+          markdowns[match[1]] = req(filename);
+        } else {
+          markdowns.en = req(filename);
+        }
+      } else if (filename.indexOf('.tsx') !== -1) {
+        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '').replace(/\.tsx/g, '.js')}`;
+
+        demos[demoName] = {
+          ...demos[demoName],
+          tsx: req(filename).default,
+          rawTS: reqSource(filename),
+        };
+      } else {
+        const demoName = `${reqPrefix}/${filename.replace(/\.\//g, '')}`;
+
+        demos[demoName] = {
+          ...demos[demoName],
+          js: req(filename).default,
+          raw: reqSource(filename),
+        };
+      }
+    });
+    markdown = markdowns[userLanguage] || markdowns.en;
+  }
+
+  const contents = getContents(markdown);
+  const headers = getHeaders(markdown);
+
+  const { activePage } = React.useContext(PageContext);
+  let location = locationProp || (activePage && activePage.pathname);
+  const t = useSelector(state => state.options.t);
+
+  if (location && !locationProp) {
+    const token = location.split('/');
+    token.push(token[token.length - 1]);
+    location = token.join('/');
+
+    if (headers.filename) {
+      location = headers.filename;
+    } else {
+      location = `/docs/src/pages${location}.md`;
+    }
+  }
+
+  if (headers.components.length > 0) {
+    const section = location.split('/')[4];
+    contents.push(`
+## API
+
+${headers.components
+  .map(
+    component =>
+      `- [&lt;${component} /&gt;](${
+        section === 'lab' ? '/lab/api' : '/api'
+      }/${Router2._rewriteUrlForNextExport(kebabCase(component))})`,
+  )
+  .join('\n')}
+  `);
+  }
+
+  // eslint-disable-next-line no-underscore-dangle
+  global.__MARKED_UNIQUE__ = {};
+
+  const element = (
+    <React.Fragment>
+      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
+        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+        </symbol>
+      </svg>
+      {contents.map((content, index) => {
+        if (demos && demoRegexp.test(content)) {
+          let demoOptions;
+          try {
+            demoOptions = JSON.parse(`{${content}}`);
+          } catch (err) {
+            console.error('JSON.parse fails with: ', `{${content}}`);
+            console.error(err);
+            return null;
+          }
+
+          const name = demoOptions.demo;
+          if (!demos || !demos[name]) {
+            const errorMessage = [
+              `Missing demo: ${name}. You can use one of the following:`,
+              Object.keys(demos),
+            ].join('\n');
+
+            if (userLanguage === 'en') {
+              throw new Error(errorMessage);
+            }
+
+            if (process.env.NODE_ENV !== 'production') {
+              console.error(errorMessage);
+            }
+
+            const warnIcon = (
+              <span role="img" aria-label={t('emojiWarning')}>
+                ⚠️
+              </span>
+            );
+            return (
+              <div key={content}>
+                {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+                {warnIcon} Missing demo `{name}` {warnIcon}
+              </div>
+            );
+          }
+
+          return (
+            <Demo
+              key={content}
+              demo={demos[name]}
+              demoOptions={demoOptions}
+              githubLocation={`${SOURCE_CODE_ROOT_URL}/${name}`}
+            />
+          );
+        }
+
+        return <MarkdownElement className="markdownElement" key={index} text={content} />;
+      })}
+    </React.Fragment>
+  );
+
+  return { contents, location, element, markdown };
+}
diff --git a/docs/src/modules/components/useMarkdownDocsContents.js b/docs/src/modules/components/useMarkdownDocsContents.js
deleted file mode 100644
index a20df3b2ad8066..00000000000000
--- a/docs/src/modules/components/useMarkdownDocsContents.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import kebabCase from 'lodash/kebabCase';
-import { Router as Router2 } from 'next/router';
-import { getHeaders, getContents } from 'docs/src/modules/utils/parseMarkdown';
-import PageContext from 'docs/src/modules/components/PageContext';
-
-export default function useMarkdownDocsContents(options) {
-  const { markdownLocation: markdownLocationProp, markdown } = options;
-  const contents = getContents(markdown);
-  const headers = getHeaders(markdown);
-  const { activePage } = React.useContext(PageContext);
-  let markdownLocation = markdownLocationProp || activePage.pathname;
-
-  if (!markdownLocationProp) {
-    const token = markdownLocation.split('/');
-    token.push(token[token.length - 1]);
-    markdownLocation = token.join('/');
-
-    if (headers.filename) {
-      markdownLocation = headers.filename;
-    } else {
-      markdownLocation = `/docs/src/pages${markdownLocation}.md`;
-    }
-  }
-
-  if (headers.components.length > 0) {
-    const section = markdownLocation.split('/')[4];
-    contents.push(`
-## API
-
-${headers.components
-  .map(
-    component =>
-      `- [&lt;${component} /&gt;](${
-        section === 'lab' ? '/lab/api' : '/api'
-      }/${Router2._rewriteUrlForNextExport(kebabCase(component))})`,
-  )
-  .join('\n')}
-  `);
-  }
-
-  return { contents, markdownLocation };
-}
diff --git a/docs/src/modules/components/usePageTitle.js b/docs/src/modules/components/usePageTitle.js
deleted file mode 100644
index 0ad6a540915f1a..00000000000000
--- a/docs/src/modules/components/usePageTitle.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
-import PageContext from 'docs/src/modules/components/PageContext';
-
-// TODO: it really wants to be named useTitle but we're not quite there yet.
-export default function usePageTitle(options) {
-  const { activePage } = React.useContext(PageContext);
-
-  if (!activePage) {
-    throw new Error('Missing activePage.');
-  }
-
-  const title = pageToTitleI18n(activePage, options.t);
-  return title;
-}
diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js
index ed616109361d36..855110bb20b2a8 100644
--- a/docs/src/modules/constants.js
+++ b/docs/src/modules/constants.js
@@ -52,6 +52,8 @@ const LANGUAGES_LABEL = [
   },
 ];
 
+const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/blob/master/docs/src';
+
 module.exports = {
   CODE_VARIANTS,
   ACTION_TYPES,
@@ -59,4 +61,5 @@ module.exports = {
   LANGUAGES_SSR,
   LANGUAGES_LABEL,
   LANGUAGES_IN_PROGRESS,
+  SOURCE_CODE_ROOT_URL,
 };
diff --git a/docs/src/pages.js b/docs/src/pages.js
index 1ffc153fd34999..238ffac9ad61ef 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -210,7 +210,6 @@ const pages = [
       { pathname: '/discover-more/team' },
       { pathname: '/discover-more/changelog' },
       { pathname: '/discover-more/languages' },
-      { pathname: '/discover-more/governance' },
     ],
   },
   {
@@ -238,6 +237,8 @@ const pages = [
   },
   { pathname: '/versions', displayNav: false },
   { pathname: '/', displayNav: false, title: false },
+  { pathname: '/company/about', displayNav: false, title: false },
+  { pathname: '/company/contact', displayNav: false, title: false },
 ];
 
 export default pages;
diff --git a/docs/src/pages/company/about/about.md b/docs/src/pages/company/about/about.md
new file mode 100644
index 00000000000000..0a61be7869ae23
--- /dev/null
+++ b/docs/src/pages/company/about/about.md
@@ -0,0 +1,23 @@
+# About Us
+
+<p class="description">We’re on a mission to make building UIs with React fun.</p>
+
+## Our Mission
+
+Our company is focused on making React UIs development easier, better, and accessible to more people.
+We build open source and commercial tools used by many hundreds of thousands of developers in production.
+We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies.
+
+## Our Vision
+
+Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/).
+
+## Our Values
+
+Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type.
+
+## Our Story
+
+Material-UI started back in 2014 to unify React and Material Design.
+
+Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries.
diff --git a/docs/src/pages/company/contact/contact.md b/docs/src/pages/company/contact/contact.md
new file mode 100644
index 00000000000000..7b9c09f9891d9b
--- /dev/null
+++ b/docs/src/pages/company/contact/contact.md
@@ -0,0 +1,13 @@
+# Contact Us
+
+<p class="description">We’re all ears.</p>
+
+Please choose a topic below related to your inquiry:
+
+- [Help & Support](/getting-started/support/)
+- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com)
+- Our address:<br /><br />
+  **Material-UI SAS**<br />
+  128 rue de la boetie<br />
+  75008 Paris<br />
+  France
diff --git a/docs/src/pages/discover-more/governance/governance.md b/docs/src/pages/discover-more/governance/governance.md
deleted file mode 100644
index 1eae627cbf7f7f..00000000000000
--- a/docs/src/pages/discover-more/governance/governance.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# 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](https://material-ui.com/), a set of [React](https://reactjs.org/) components
-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
-we govern ourselves, how decisions are made, and how someone could engage with the project.
-
-## Roles & Responsibilities
-
-### Users
-
-Users are members of the community that are using Material-UI or one of Mui-Org's projects. Anyone
-can be a user and we encourage users to participate in the community as much as possible in the
-following ways.
-
-- Evangelize Material-UI by [linking to our website](https://material-ui.com/),
-[following us on twitter](https://twitter.com/MaterialUI), or just talking about us with your
-friends.
-- Tell us what we're doing well or where we can improve.
-- Give us moral support. A "Thank You" always brightens our day!
-- [Support us on OpenCollective](https://opencollective.com/material-ui).
-
-### Contributors
-
-Contributors are members of the community who contribute to Material-UI or one of Mui-Org's projects
-in concrete ways. Anyone can be a contributor. In addition to their participation as a user, they
-also contribute in the following ways.
-
-- Support new users by answering questions on
-[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui).
-- Reviewing and commenting on [existing pull requests](https://github.com/mui-org/material-ui/pulls)
-and [issues](https://github.com/mui-org/material-ui/issues).
-- Reporting bugs or missing features by [creating an issue](https://github.com/mui-org/material-ui/issues/new).
-- Fixing bugs, adding features, and
-[improving our documentation](https://github.com/mui-org/material-ui/tree/master/docs) by
-[submitting a pull request](https://github.com/mui-org/material-ui/pulls).
-
-### Committers
-
-Committers are members of the community who are committed to the development, success, and mission
-of Material-UI or one of Mui-Org's projects. New committers are nominated and voted on by existing
-committers. Under rare circumstances, the Core Team can vote to revoke a committer's privilege. In
-addition to their participation as a contributor, committers have the following privileges.
-
-- Access to a private Gitter room to talk about issues and coordinate development.
-- Ability to label, close, and manage [Github issues](https://github.com/mui-org/material-ui/issues).
-- Ability to [close and merge pull requests](https://github.com/mui-org/material-ui/pulls?q=is%3Apr+is%3Aclosed).
-- Ability to [submit expenses](https://opencollective.com/material-ui/expenses/new) that are
-approved by the Core Team.
-- Ability to receive payment for work done on Material-UI or one of Mui-Org's projects.
-- Nominate and vote on new committers and Core Team members.
-
-### Core Team
-
-Core Team members are individuals that are invested in the success of Mui-Org. Their
-administrative responsibilities ensure the sustainability and smooth running of Mui-Org. New
-Core Team members are nominated and voted on by existing committers. Under rare circumstances, a
-Core Team member can be removed by a two thirds majority vote by the Core Team. Two people
-from the same company cannot exist on the Core Team.
-
-At the end of each quarter, the Core Team may issue payments to one or more committers. The amount
-issued will be determined by a formula that's transparent to all committers and voted on by the
-Core Team. The formula can change at the end of the quarter, but not mid-quarter unless unanimously
-agreed upon by the Core Team and all committers with whom any payment may be owed. These payments
-are aimed to [increase the sustainability of our organization](https://medium.com/call-em-all/material-ui-the-move-to-a-sustainable-open-source-project-5261d07b5067) by supporting committers.
-
-In addition to their participation as a committer, Core Team members have the following privileges.
-
-- Ability to [publish a release](https://github.com/mui-org/material-ui/releases).
-- Access to Material-UI's [Twitter](https://twitter.com/MaterialUI) and Medium account.
-- Owner access to [mui-org on GitHub](https://github.com/mui-org).
-- Admin access to various tools and services ([npm](https://www.npmjs.com/package/@material-ui/core),
-[CircleCi](https://circleci.com/gh/mui-org/material-ui),
-[BrowserStack](https://www.browserstack.com/).
-- Admin access to all financial accounts.
-- Vote on the removal of committers and Core Team members.
-- Vote on decisions when consensus cannot be reached by the community.
-- Vote on approval of expenses and payments on [OpenCollective](https://opencollective.com/material-ui).
-Core Team members cannot vote to approve their own expenses or payments.
-- Vote on changes to project governance.
-
-### Core Team Chair
-
-The Core Team Chair is a single individual that's a coordinator and facilitator of the Core Team.
-The Chair ensures that all governance processes are followed and has the casting vote in case of a
-tie within the Core Team. The Core Team Chair is voted for by the Core Team and can serve as Chair
-until they step down or removed by a two thirds majority vote by the Core Team.
-
-## Resources
-
-- Governance Models - [https://oss-watch.ac.uk/resources/governancemodels](https://oss-watch.ac.uk/resources/governancemodels)
-- Sustain OSS Report - [https://sustainoss.org/assets/pdf/SustainOSS-west-2017-report.pdf](https://sustainoss.org/assets/pdf/SustainOSS-west-2017-report.pdf)
-- Elinor Ostrom's 8 Principles for Managing A Commons - [https://www.onthecommons.org/magazine/elinor-ostroms-8-principles-managing-commmons#sthash.dqF8J3Bs.dpbs](https://www.onthecommons.org/magazine/elinor-ostroms-8-principles-managing-commmons#sthash.dqF8J3Bs.dpbs)
diff --git a/docs/src/pages/discover-more/vision/vision.md b/docs/src/pages/discover-more/vision/vision.md
index d6ce1bb10075dd..cf37539fe2a9cf 100644
--- a/docs/src/pages/discover-more/vision/vision.md
+++ b/docs/src/pages/discover-more/vision/vision.md
@@ -1,4 +1,4 @@
-# Material-UI’s Vision
+# Our Vision
 
 <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>
 
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index c0f378a43b913a..5e38a22e8b5335 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -24,6 +24,7 @@
   "letUsKnow": "Let us know!",
   "footerCommunity": "Community",
   "footerResources": "Resources",
+  "footerCompany": "Company",
   "homeFooterRelease": "Currently {{versionNumber}}. Released under the {{license}}.",
   "license": "MIT License",
   "likeMui": "Help us keep running",
@@ -209,7 +210,6 @@
     "/discover-more/team": "Team",
     "/discover-more/community": "Community",
     "/discover-more/changelog": "Changelog",
-    "/discover-more/governance": "Governance",
     "/discover-more/languages": "Languages",
     "/versions": "Versions",
     "/styles": "Styles",