diff --git a/docs/pages/blog/2019.js b/docs/pages/blog/2019.js
index 8acb8ec12c9772..fd793f03301936 100644
--- a/docs/pages/blog/2019.js
+++ b/docs/pages/blog/2019.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2019.md';
 
-const pageFilename = 'blog/2019';
-const requireRaw = require.context('!raw-loader!./', false, /2019\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020-developer-survey-results.js b/docs/pages/blog/2020-developer-survey-results.js
index fd34f6f42a2114..6005f0c6e60c6d 100644
--- a/docs/pages/blog/2020-developer-survey-results.js
+++ b/docs/pages/blog/2020-developer-survey-results.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020-developer-survey-results.md';
 
-const pageFilename = 'blog/2020-developer-survey-results';
-const requireRaw = require.context('!raw-loader!./', false, /2020-developer-survey-results\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020-introducing-sketch.js b/docs/pages/blog/2020-introducing-sketch.js
index 724b087917fdf2..89493f5958c4f9 100644
--- a/docs/pages/blog/2020-introducing-sketch.js
+++ b/docs/pages/blog/2020-introducing-sketch.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020-introducing-sketch.md';
 
-const pageFilename = 'blog/2020-introducing-sketch';
-const requireRaw = require.context('!raw-loader!./', false, /2020-introducing-sketch\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020-q1-update.js b/docs/pages/blog/2020-q1-update.js
index 68c9597cb1c2fb..6ea3f6692955ed 100644
--- a/docs/pages/blog/2020-q1-update.js
+++ b/docs/pages/blog/2020-q1-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020-q1-update.md';
 
-const pageFilename = 'blog/2020-q1-update';
-const requireRaw = require.context('!raw-loader!./', false, /2020-q1-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020-q2-update.js b/docs/pages/blog/2020-q2-update.js
index 4f6016e63dc121..cc8f274c1a5c29 100644
--- a/docs/pages/blog/2020-q2-update.js
+++ b/docs/pages/blog/2020-q2-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020-q2-update.md';
 
-const pageFilename = 'blog/2020-q2-update';
-const requireRaw = require.context('!raw-loader!./', false, /2020-q2-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020-q3-update.js b/docs/pages/blog/2020-q3-update.js
index 9ea3c48958fd82..049d90601b1234 100644
--- a/docs/pages/blog/2020-q3-update.js
+++ b/docs/pages/blog/2020-q3-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020-q3-update.md';
 
-const pageFilename = 'blog/2020-q3-update';
-const requireRaw = require.context('!raw-loader!./', false, /2020-q3-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2020.js b/docs/pages/blog/2020.js
index 73ab6d09641ac0..49e3ae86b65066 100644
--- a/docs/pages/blog/2020.js
+++ b/docs/pages/blog/2020.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2020.md';
 
-const pageFilename = 'blog/2020';
-const requireRaw = require.context('!raw-loader!./', false, /2020\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/2021-q1-update.js b/docs/pages/blog/2021-q1-update.js
index 8afcb0f3cbb629..d579a163f02fb1 100644
--- a/docs/pages/blog/2021-q1-update.js
+++ b/docs/pages/blog/2021-q1-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./2021-q1-update.md';
 
-const pageFilename = 'blog/2021-q1-update';
-const requireRaw = require.context('!raw-loader!./', false, /2021-q1-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js
index bade41f4b80b24..b84e1c7a7a3d59 100644
--- a/docs/pages/blog/april-2019-update.js
+++ b/docs/pages/blog/april-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./april-2019-update.md';
 
-const pageFilename = 'blog/april-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /april-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js
index 7f23adbd6388b7..65764d2ac9ea5e 100644
--- a/docs/pages/blog/august-2019-update.js
+++ b/docs/pages/blog/august-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./august-2019-update.md';
 
-const pageFilename = 'blog/august-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /august-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.js b/docs/pages/blog/danail-hadjiatanasov-joining.js
index b1d75a18d2aba9..1e3c1e5154afda 100644
--- a/docs/pages/blog/danail-hadjiatanasov-joining.js
+++ b/docs/pages/blog/danail-hadjiatanasov-joining.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./danail-hadjiatanasov-joining.md';
 
-const pageFilename = 'blog/danail-hadjiatanasov-joining';
-const requireRaw = require.context('!raw-loader!./', false, /danail-hadjiatanasov-joining\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js
index b6bef79246b7ea..f288f5268c29c1 100644
--- a/docs/pages/blog/december-2019-update.js
+++ b/docs/pages/blog/december-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./december-2019-update.md';
 
-const pageFilename = 'blog/december-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /december-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js
index 0d0e699e682043..a698a45070b573 100644
--- a/docs/pages/blog/july-2019-update.js
+++ b/docs/pages/blog/july-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./july-2019-update.md';
 
-const pageFilename = 'blog/july-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /july-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js
index 2c313db2940e8f..6c74e2dc80dd2a 100644
--- a/docs/pages/blog/june-2019-update.js
+++ b/docs/pages/blog/june-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./june-2019-update.md';
 
-const pageFilename = 'blog/june-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /june-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js
index 05d86e566b752a..74f37b00ab8e46 100644
--- a/docs/pages/blog/march-2019-update.js
+++ b/docs/pages/blog/march-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./march-2019-update.md';
 
-const pageFilename = 'blog/march-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /march-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/marija-najdova-joining.js b/docs/pages/blog/marija-najdova-joining.js
index 7247e3205227d8..115cb6e9c0f41c 100644
--- a/docs/pages/blog/marija-najdova-joining.js
+++ b/docs/pages/blog/marija-najdova-joining.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./marija-najdova-joining.md';
 
-const pageFilename = 'blog/marija-najdova-joining';
-const requireRaw = require.context('!raw-loader!./', false, /marija-najdova-joining\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js
index aeb3933047c717..551ea5f6dc38a8 100644
--- a/docs/pages/blog/material-ui-v1-is-out.js
+++ b/docs/pages/blog/material-ui-v1-is-out.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./material-ui-v1-is-out.md';
 
-const pageFilename = 'blog/material-ui-v1-is-out';
-const requireRaw = require.context('!raw-loader!./', false, /material-ui-v1-is-out\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js
index c8796a26adc5af..5b48159dcb79ab 100644
--- a/docs/pages/blog/material-ui-v4-is-out.js
+++ b/docs/pages/blog/material-ui-v4-is-out.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./material-ui-v4-is-out.md';
 
-const pageFilename = 'blog/material-ui-v4-is-out';
-const requireRaw = require.context('!raw-loader!./', false, /material-ui-v4-is-out\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/matheus-wichman-joining.js b/docs/pages/blog/matheus-wichman-joining.js
index f399aca87fa4d9..a587b0b3314935 100644
--- a/docs/pages/blog/matheus-wichman-joining.js
+++ b/docs/pages/blog/matheus-wichman-joining.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./matheus-wichman-joining.md';
 
-const pageFilename = 'blog/matheus-wichman-joining';
-const requireRaw = require.context('!raw-loader!./', false, /matheus-wichman-joining\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js
index c154f4dfe56208..b4d0594344fd12 100644
--- a/docs/pages/blog/may-2019-update.js
+++ b/docs/pages/blog/may-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./may-2019-update.md';
 
-const pageFilename = 'blog/may-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /may-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/michal-dudak-joining.js b/docs/pages/blog/michal-dudak-joining.js
index d09e9e259ed60a..3fec14b73506ac 100644
--- a/docs/pages/blog/michal-dudak-joining.js
+++ b/docs/pages/blog/michal-dudak-joining.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./michal-dudak-joining.md';
 
-const pageFilename = 'blog/michal-dudak-joining';
-const requireRaw = require.context('!raw-loader!./', false, /michal-dudak-joining\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/november-2019-update.js b/docs/pages/blog/november-2019-update.js
index 0e2aa5a507f5d6..657875186a3b29 100644
--- a/docs/pages/blog/november-2019-update.js
+++ b/docs/pages/blog/november-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./november-2019-update.md';
 
-const pageFilename = 'blog/november-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /november-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/october-2019-update.js b/docs/pages/blog/october-2019-update.js
index f0297d4d3aa7b2..7d05a083750b3b 100644
--- a/docs/pages/blog/october-2019-update.js
+++ b/docs/pages/blog/october-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./october-2019-update.md';
 
-const pageFilename = 'blog/october-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /october-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/september-2019-update.js b/docs/pages/blog/september-2019-update.js
index 8004a834713a86..f7afd8768949a2 100644
--- a/docs/pages/blog/september-2019-update.js
+++ b/docs/pages/blog/september-2019-update.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./september-2019-update.md';
 
-const pageFilename = 'blog/september-2019-update';
-const requireRaw = require.context('!raw-loader!./', false, /september-2019-update\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/siriwat-kunaporn-joining.js b/docs/pages/blog/siriwat-kunaporn-joining.js
index ead39ca1708a1e..620444ef13b90e 100644
--- a/docs/pages/blog/siriwat-kunaporn-joining.js
+++ b/docs/pages/blog/siriwat-kunaporn-joining.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./siriwat-kunaporn-joining.md';
 
-const pageFilename = 'blog/siriwat-kunaporn-joining';
-const requireRaw = require.context('!raw-loader!./', false, /siriwat-kunaporn-joining\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/blog/spotlight-damien-tassone.js b/docs/pages/blog/spotlight-damien-tassone.js
index 3ffb4891633024..6d1704f10f49ab 100644
--- a/docs/pages/blog/spotlight-damien-tassone.js
+++ b/docs/pages/blog/spotlight-damien-tassone.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import { docs } from '!@material-ui/markdown/loader!./spotlight-damien-tassone.md';
 
-const pageFilename = 'blog/spotlight-damien-tassone';
-const requireRaw = require.context('!raw-loader!./', false, /spotlight-damien-tassone\.md$/);
-
-export default function Page({ docs }) {
+export default function Page() {
   return <TopLayoutBlog docs={docs} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/company/about.js b/docs/pages/company/about.js
index d879c7da8d7827..d9b0725a3ad561 100644
--- a/docs/pages/company/about.js
+++ b/docs/pages/company/about.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/company/about/about.md';
 
-const pageFilename = 'company/about';
-const requireDemo = require.context('docs/src/pages/company/about', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/about',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/company/careers.js b/docs/pages/company/careers.js
index 2cf3ca41c823d1..b23899ba890fe2 100644
--- a/docs/pages/company/careers.js
+++ b/docs/pages/company/careers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/company/careers/careers.md';
 
-const pageFilename = 'company/careers';
-const requireDemo = require.context('docs/src/pages/company/careers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/careers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js
index 297be1f853e931..1dd5b844df2b23 100644
--- a/docs/pages/company/contact.js
+++ b/docs/pages/company/contact.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/company/contact/contact.md';
 
-const pageFilename = 'company/contact';
-const requireDemo = require.context('docs/src/pages/company/contact', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/contact',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/company/lead-designer.js b/docs/pages/company/lead-designer.js
index deba094da7db4c..31bf29dcef6b23 100644
--- a/docs/pages/company/lead-designer.js
+++ b/docs/pages/company/lead-designer.js
@@ -1,20 +1,11 @@
 import React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/company/lead-designer/lead-designer.md';
 
-const pageFilename = 'company/lead-designer';
-const requireDemo = require.context('docs/src/pages/company/lead-designer', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/lead-designer',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/company/software-engineer.js b/docs/pages/company/software-engineer.js
index 9eb7456befb61e..633fa6a99425b8 100644
--- a/docs/pages/company/software-engineer.js
+++ b/docs/pages/company/software-engineer.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/company/software-engineer/software-engineer.md';
 
-const pageFilename = 'company/software-engineer';
-const requireDemo = require.context(
-  'docs/src/pages/company/software-engineer',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/software-engineer',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/about-the-lab.js b/docs/pages/components/about-the-lab.js
index d33b5b84e900f5..57fd113bb265a5 100644
--- a/docs/pages/components/about-the-lab.js
+++ b/docs/pages/components/about-the-lab.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/about-the-lab/about-the-lab.md';
 
-const pageFilename = 'components/about-the-lab';
-const requireDemo = require.context(
-  'docs/src/pages/components/about-the-lab',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/about-the-lab',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/accordion.js b/docs/pages/components/accordion.js
index 09646a43a61fea..ebba934fe41c00 100644
--- a/docs/pages/components/accordion.js
+++ b/docs/pages/components/accordion.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/accordion/accordion.md';
 
-const pageFilename = 'components/accordion';
-const requireDemo = require.context('docs/src/pages/components/accordion', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/accordion',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/alert.js b/docs/pages/components/alert.js
index ea171ed512fff1..c05d4aab098a4f 100644
--- a/docs/pages/components/alert.js
+++ b/docs/pages/components/alert.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/alert/alert.md';
 
-const pageFilename = 'components/alert';
-const requireDemo = require.context('docs/src/pages/components/alert', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/alert',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/app-bar.js b/docs/pages/components/app-bar.js
index 77dbd104ae0374..3e646a2c5f68bd 100644
--- a/docs/pages/components/app-bar.js
+++ b/docs/pages/components/app-bar.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/app-bar/app-bar.md';
 
-const pageFilename = 'components/app-bar';
-const requireDemo = require.context('docs/src/pages/components/app-bar', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/app-bar',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/autocomplete.js b/docs/pages/components/autocomplete.js
index a3928ef53d8a47..24952f5ec1f26d 100644
--- a/docs/pages/components/autocomplete.js
+++ b/docs/pages/components/autocomplete.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/autocomplete';
-const requireDemo = require.context('docs/src/pages/components/autocomplete', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/autocomplete',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/autocomplete/autocomplete.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/avatars.js b/docs/pages/components/avatars.js
index 4c89ef359b7708..0fc105543b8f24 100644
--- a/docs/pages/components/avatars.js
+++ b/docs/pages/components/avatars.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/avatars/avatars.md';
 
-const pageFilename = 'components/avatars';
-const requireDemo = require.context('docs/src/pages/components/avatars', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/avatars',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/backdrop.js b/docs/pages/components/backdrop.js
index c0702c4cd77708..3acaab399bdbf1 100644
--- a/docs/pages/components/backdrop.js
+++ b/docs/pages/components/backdrop.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/backdrop/backdrop.md';
 
-const pageFilename = 'components/backdrop';
-const requireDemo = require.context('docs/src/pages/components/backdrop', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/backdrop',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/badges.js b/docs/pages/components/badges.js
index 7394fa830cf9ee..df463fbeeab88a 100644
--- a/docs/pages/components/badges.js
+++ b/docs/pages/components/badges.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/badges/badges.md';
 
-const pageFilename = 'components/badges';
-const requireDemo = require.context('docs/src/pages/components/badges', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/badges',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/bottom-navigation.js b/docs/pages/components/bottom-navigation.js
index 2dae37e9f8896e..a32b724a3c00c1 100644
--- a/docs/pages/components/bottom-navigation.js
+++ b/docs/pages/components/bottom-navigation.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/bottom-navigation/bottom-navigation.md';
 
-const pageFilename = 'components/bottom-navigation';
-const requireDemo = require.context(
-  'docs/src/pages/components/bottom-navigation',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/bottom-navigation',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/box.js b/docs/pages/components/box.js
index a3074e058180cf..9311d1200f3e1b 100644
--- a/docs/pages/components/box.js
+++ b/docs/pages/components/box.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/box/box.md';
 
-const pageFilename = 'components/box';
-const requireDemo = require.context('docs/src/pages/components/box', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/box',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/breadcrumbs.js b/docs/pages/components/breadcrumbs.js
index 3c912f252aa4e6..ce741e8d4be55f 100644
--- a/docs/pages/components/breadcrumbs.js
+++ b/docs/pages/components/breadcrumbs.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/breadcrumbs/breadcrumbs.md';
 
-const pageFilename = 'components/breadcrumbs';
-const requireDemo = require.context('docs/src/pages/components/breadcrumbs', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/breadcrumbs',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/button-group.js b/docs/pages/components/button-group.js
index 0e40c094d1d2fc..f711fac34ea4af 100644
--- a/docs/pages/components/button-group.js
+++ b/docs/pages/components/button-group.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/button-group/button-group.md';
 
-const pageFilename = 'components/button-group';
-const requireDemo = require.context('docs/src/pages/components/button-group', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/button-group',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/buttons.js b/docs/pages/components/buttons.js
index d07b0fcef5aa98..2cd1c8493af9b3 100644
--- a/docs/pages/components/buttons.js
+++ b/docs/pages/components/buttons.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/buttons/buttons.md';
 
-const pageFilename = 'components/buttons';
-const requireDemo = require.context('docs/src/pages/components/buttons', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/buttons',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/cards.js b/docs/pages/components/cards.js
index c59c974e6fb25e..291f470dd623dc 100644
--- a/docs/pages/components/cards.js
+++ b/docs/pages/components/cards.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/cards/cards.md';
 
-const pageFilename = 'components/cards';
-const requireDemo = require.context('docs/src/pages/components/cards', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/cards',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/checkboxes.js b/docs/pages/components/checkboxes.js
index 353ab591129b46..dc9de259dfd16b 100644
--- a/docs/pages/components/checkboxes.js
+++ b/docs/pages/components/checkboxes.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/checkboxes/checkboxes.md';
 
-const pageFilename = 'components/checkboxes';
-const requireDemo = require.context('docs/src/pages/components/checkboxes', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/checkboxes',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/chips.js b/docs/pages/components/chips.js
index a6c632ef3354d2..b1c005b7c861d1 100644
--- a/docs/pages/components/chips.js
+++ b/docs/pages/components/chips.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/chips/chips.md';
 
-const pageFilename = 'components/chips';
-const requireDemo = require.context('docs/src/pages/components/chips', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/chips',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/click-away-listener.js b/docs/pages/components/click-away-listener.js
index 5e74b923c937a6..8b43679eb810c2 100644
--- a/docs/pages/components/click-away-listener.js
+++ b/docs/pages/components/click-away-listener.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/click-away-listener/click-away-listener.md';
 
-const pageFilename = 'components/click-away-listener';
-const requireDemo = require.context(
-  'docs/src/pages/components/click-away-listener',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/click-away-listener',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/container.js b/docs/pages/components/container.js
index 44949f5809eaab..0c4247a02beaff 100644
--- a/docs/pages/components/container.js
+++ b/docs/pages/components/container.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/container/container.md';
 
-const pageFilename = 'components/container';
-const requireDemo = require.context('docs/src/pages/components/container', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/container',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/css-baseline.js b/docs/pages/components/css-baseline.js
index 918dbaf084264f..d1f249bdbcfd69 100644
--- a/docs/pages/components/css-baseline.js
+++ b/docs/pages/components/css-baseline.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/css-baseline/css-baseline.md';
 
-const pageFilename = 'components/css-baseline';
-const requireDemo = require.context('docs/src/pages/components/css-baseline', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/css-baseline',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/date-picker.js b/docs/pages/components/date-picker.js
index f7b47957a2ccc8..4ba0292a439a44 100644
--- a/docs/pages/components/date-picker.js
+++ b/docs/pages/components/date-picker.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/date-picker';
-const requireDemo = require.context('docs/src/pages/components/date-picker', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/date-picker',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/date-picker/date-picker.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/date-range-picker.js b/docs/pages/components/date-range-picker.js
index de60ebe5f1e7aa..e934df0379d451 100644
--- a/docs/pages/components/date-range-picker.js
+++ b/docs/pages/components/date-range-picker.js
@@ -1,28 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/date-range-picker';
-const requireDemo = require.context(
-  'docs/src/pages/components/date-range-picker',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/date-range-picker',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/date-range-picker/date-range-picker.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/date-time-picker.js b/docs/pages/components/date-time-picker.js
index 553e5a5b2fb04a..45c7aad7f730b9 100644
--- a/docs/pages/components/date-time-picker.js
+++ b/docs/pages/components/date-time-picker.js
@@ -1,28 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/date-time-picker';
-const requireDemo = require.context(
-  'docs/src/pages/components/date-time-picker',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/date-time-picker',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/date-time-picker/date-time-picker.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/dialogs.js b/docs/pages/components/dialogs.js
index 74a49bd2cc4a17..55a9e5a5cd9e5d 100644
--- a/docs/pages/components/dialogs.js
+++ b/docs/pages/components/dialogs.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/dialogs/dialogs.md';
 
-const pageFilename = 'components/dialogs';
-const requireDemo = require.context('docs/src/pages/components/dialogs', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/dialogs',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/dividers.js b/docs/pages/components/dividers.js
index 6288387c8ffade..d7dd3dd6bffa5c 100644
--- a/docs/pages/components/dividers.js
+++ b/docs/pages/components/dividers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/dividers/dividers.md';
 
-const pageFilename = 'components/dividers';
-const requireDemo = require.context('docs/src/pages/components/dividers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/dividers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/drawers.js b/docs/pages/components/drawers.js
index 638b24388d8938..a1d3ac950896c4 100644
--- a/docs/pages/components/drawers.js
+++ b/docs/pages/components/drawers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/drawers/drawers.md';
 
-const pageFilename = 'components/drawers';
-const requireDemo = require.context('docs/src/pages/components/drawers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/drawers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/floating-action-button.js b/docs/pages/components/floating-action-button.js
index fdefeb62bbd15b..5a8443f3beb3d7 100644
--- a/docs/pages/components/floating-action-button.js
+++ b/docs/pages/components/floating-action-button.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/floating-action-button/floating-action-button.md';
 
-const pageFilename = 'components/floating-action-button';
-const requireDemo = require.context(
-  'docs/src/pages/components/floating-action-button',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/floating-action-button',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/grid.js b/docs/pages/components/grid.js
index 152197e3996c2c..0f732f2204c356 100644
--- a/docs/pages/components/grid.js
+++ b/docs/pages/components/grid.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/grid/grid.md';
 
-const pageFilename = 'components/grid';
-const requireDemo = require.context('docs/src/pages/components/grid', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/grid',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/icons.js b/docs/pages/components/icons.js
index e6100200afb5ac..67ce8c648008be 100644
--- a/docs/pages/components/icons.js
+++ b/docs/pages/components/icons.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/icons/icons.md';
 
-const pageFilename = 'components/icons';
-const requireDemo = require.context('docs/src/pages/components/icons', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/icons',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/image-list.js b/docs/pages/components/image-list.js
index 88e249096fd680..8cd7a2fb2e9dea 100644
--- a/docs/pages/components/image-list.js
+++ b/docs/pages/components/image-list.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/image-list/image-list.md';
 
-const pageFilename = 'components/image-list';
-const requireDemo = require.context('docs/src/pages/components/image-list', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/image-list',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/links.js b/docs/pages/components/links.js
index c7fcac6f0dc306..63bdc23a1b716a 100644
--- a/docs/pages/components/links.js
+++ b/docs/pages/components/links.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/links/links.md';
 
-const pageFilename = 'components/links';
-const requireDemo = require.context('docs/src/pages/components/links', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/links',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/lists.js b/docs/pages/components/lists.js
index 854f2d68995202..2a896a2ee3af90 100644
--- a/docs/pages/components/lists.js
+++ b/docs/pages/components/lists.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/lists/lists.md';
 
-const pageFilename = 'components/lists';
-const requireDemo = require.context('docs/src/pages/components/lists', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/lists',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js
index dff07c1b686348..66c27b790fe038 100644
--- a/docs/pages/components/material-icons.js
+++ b/docs/pages/components/material-icons.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/material-icons/material-icons.md';
 
-const pageFilename = 'components/material-icons';
-const requireDemo = require.context(
-  'docs/src/pages/components/material-icons',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/material-icons',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} disableToc requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/menus.js b/docs/pages/components/menus.js
index 13fd8badf9da3d..a24ef6fee2c048 100644
--- a/docs/pages/components/menus.js
+++ b/docs/pages/components/menus.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/menus/menus.md';
 
-const pageFilename = 'components/menus';
-const requireDemo = require.context('docs/src/pages/components/menus', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/menus',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/modal.js b/docs/pages/components/modal.js
index 0db9ea7299caef..180a9b017f222c 100644
--- a/docs/pages/components/modal.js
+++ b/docs/pages/components/modal.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/modal/modal.md';
 
-const pageFilename = 'components/modal';
-const requireDemo = require.context('docs/src/pages/components/modal', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/modal',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/no-ssr.js b/docs/pages/components/no-ssr.js
index b7ee572348f02a..8f7ae9b826c668 100644
--- a/docs/pages/components/no-ssr.js
+++ b/docs/pages/components/no-ssr.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/no-ssr/no-ssr.md';
 
-const pageFilename = 'components/no-ssr';
-const requireDemo = require.context('docs/src/pages/components/no-ssr', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/no-ssr',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/pagination.js b/docs/pages/components/pagination.js
index 7f49e44821c96a..e88fcce3dc2a1b 100644
--- a/docs/pages/components/pagination.js
+++ b/docs/pages/components/pagination.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/pagination/pagination.md';
 
-const pageFilename = 'components/pagination';
-const requireDemo = require.context('docs/src/pages/components/pagination', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/pagination',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/paper.js b/docs/pages/components/paper.js
index f367c2f0a81f26..1b84abddbb18c0 100644
--- a/docs/pages/components/paper.js
+++ b/docs/pages/components/paper.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/paper/paper.md';
 
-const pageFilename = 'components/paper';
-const requireDemo = require.context('docs/src/pages/components/paper', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/paper',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/pickers.js b/docs/pages/components/pickers.js
index c6f23f17cef89b..f9d0ccd6e613c2 100644
--- a/docs/pages/components/pickers.js
+++ b/docs/pages/components/pickers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/pickers/pickers.md';
 
-const pageFilename = 'components/pickers';
-const requireDemo = require.context('docs/src/pages/components/pickers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/pickers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/popover.js b/docs/pages/components/popover.js
index 83fb98715ceadc..cdf48a937f0de6 100644
--- a/docs/pages/components/popover.js
+++ b/docs/pages/components/popover.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/popover/popover.md';
 
-const pageFilename = 'components/popover';
-const requireDemo = require.context('docs/src/pages/components/popover', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/popover',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/popper.js b/docs/pages/components/popper.js
index 2f294ec7d682bf..9d1c101f979e38 100644
--- a/docs/pages/components/popper.js
+++ b/docs/pages/components/popper.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/popper/popper.md';
 
-const pageFilename = 'components/popper';
-const requireDemo = require.context('docs/src/pages/components/popper', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/popper',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/portal.js b/docs/pages/components/portal.js
index 5f5c33d27e712e..5e8ba244a1d19c 100644
--- a/docs/pages/components/portal.js
+++ b/docs/pages/components/portal.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/portal/portal.md';
 
-const pageFilename = 'components/portal';
-const requireDemo = require.context('docs/src/pages/components/portal', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/portal',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/progress.js b/docs/pages/components/progress.js
index ba50f63477cdce..efc475615eaa80 100644
--- a/docs/pages/components/progress.js
+++ b/docs/pages/components/progress.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/progress/progress.md';
 
-const pageFilename = 'components/progress';
-const requireDemo = require.context('docs/src/pages/components/progress', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/progress',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/radio-buttons.js b/docs/pages/components/radio-buttons.js
index f2aec8853f1ccc..993fefc118c852 100644
--- a/docs/pages/components/radio-buttons.js
+++ b/docs/pages/components/radio-buttons.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/radio-buttons/radio-buttons.md';
 
-const pageFilename = 'components/radio-buttons';
-const requireDemo = require.context(
-  'docs/src/pages/components/radio-buttons',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/radio-buttons',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/rating.js b/docs/pages/components/rating.js
index dbe78db9b9ac66..ee7b82f0e66bfd 100644
--- a/docs/pages/components/rating.js
+++ b/docs/pages/components/rating.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/rating/rating.md';
 
-const pageFilename = 'components/rating';
-const requireDemo = require.context('docs/src/pages/components/rating', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/rating',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/selects.js b/docs/pages/components/selects.js
index f63dc4637ff54d..9b9f7e4cec3b04 100644
--- a/docs/pages/components/selects.js
+++ b/docs/pages/components/selects.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/selects/selects.md';
 
-const pageFilename = 'components/selects';
-const requireDemo = require.context('docs/src/pages/components/selects', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/selects',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/skeleton.js b/docs/pages/components/skeleton.js
index 3b83259a8e0749..7a5671c6fa17b8 100644
--- a/docs/pages/components/skeleton.js
+++ b/docs/pages/components/skeleton.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/skeleton/skeleton.md';
 
-const pageFilename = 'components/skeleton';
-const requireDemo = require.context('docs/src/pages/components/skeleton', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/skeleton',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/slider.js b/docs/pages/components/slider.js
index b2b4e758010903..6bcb2261c65171 100644
--- a/docs/pages/components/slider.js
+++ b/docs/pages/components/slider.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/slider';
-const requireDemo = require.context('docs/src/pages/components/slider', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/slider',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/slider/slider.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/snackbars.js b/docs/pages/components/snackbars.js
index cd641e83a9f2eb..244e0de01c4c35 100644
--- a/docs/pages/components/snackbars.js
+++ b/docs/pages/components/snackbars.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/snackbars/snackbars.md';
 
-const pageFilename = 'components/snackbars';
-const requireDemo = require.context('docs/src/pages/components/snackbars', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/snackbars',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/speed-dial.js b/docs/pages/components/speed-dial.js
index 47f16eea31da95..438e15dd145f11 100644
--- a/docs/pages/components/speed-dial.js
+++ b/docs/pages/components/speed-dial.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/speed-dial/speed-dial.md';
 
-const pageFilename = 'components/speed-dial';
-const requireDemo = require.context('docs/src/pages/components/speed-dial', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/speed-dial',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/stack.js b/docs/pages/components/stack.js
index dffdfc1dc45f5f..cc7931ef4fb808 100644
--- a/docs/pages/components/stack.js
+++ b/docs/pages/components/stack.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/stack/stack.md';
 
-const pageFilename = 'components/stack';
-const requireDemo = require.context('docs/src/pages/components/stack', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/stack',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/steppers.js b/docs/pages/components/steppers.js
index 7711f7188feff1..76c7e43c3b3df6 100644
--- a/docs/pages/components/steppers.js
+++ b/docs/pages/components/steppers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/steppers/steppers.md';
 
-const pageFilename = 'components/steppers';
-const requireDemo = require.context('docs/src/pages/components/steppers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/steppers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/switches.js b/docs/pages/components/switches.js
index 08fc097c248201..e27dc3f08b6cdb 100644
--- a/docs/pages/components/switches.js
+++ b/docs/pages/components/switches.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/switches/switches.md';
 
-const pageFilename = 'components/switches';
-const requireDemo = require.context('docs/src/pages/components/switches', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/switches',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/tabs.js b/docs/pages/components/tabs.js
index 689e7d82fc7dbc..b08227086a25f8 100644
--- a/docs/pages/components/tabs.js
+++ b/docs/pages/components/tabs.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/tabs/tabs.md';
 
-const pageFilename = 'components/tabs';
-const requireDemo = require.context('docs/src/pages/components/tabs', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/tabs',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/text-fields.js b/docs/pages/components/text-fields.js
index 1e43ec0ef5e1ce..d235d0c8a8a208 100644
--- a/docs/pages/components/text-fields.js
+++ b/docs/pages/components/text-fields.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/text-fields/text-fields.md';
 
-const pageFilename = 'components/text-fields';
-const requireDemo = require.context('docs/src/pages/components/text-fields', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/text-fields',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/textarea-autosize.js b/docs/pages/components/textarea-autosize.js
index 68d9391b631946..1abbea34fe6e0e 100644
--- a/docs/pages/components/textarea-autosize.js
+++ b/docs/pages/components/textarea-autosize.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/textarea-autosize/textarea-autosize.md';
 
-const pageFilename = 'components/textarea-autosize';
-const requireDemo = require.context(
-  'docs/src/pages/components/textarea-autosize',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/textarea-autosize',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/time-picker.js b/docs/pages/components/time-picker.js
index 8410701f991732..c5387d6f0e19e0 100644
--- a/docs/pages/components/time-picker.js
+++ b/docs/pages/components/time-picker.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'components/time-picker';
-const requireDemo = require.context('docs/src/pages/components/time-picker', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/time-picker',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/time-picker/time-picker.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/timeline.js b/docs/pages/components/timeline.js
index 7cc03ff46ec02b..90eed7ab83d836 100644
--- a/docs/pages/components/timeline.js
+++ b/docs/pages/components/timeline.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/timeline/timeline.md';
 
-const pageFilename = 'components/timeline';
-const requireDemo = require.context('docs/src/pages/components/timeline', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/timeline',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/toggle-button.js b/docs/pages/components/toggle-button.js
index c5e7dbaa8d3e60..26f3ece4994058 100644
--- a/docs/pages/components/toggle-button.js
+++ b/docs/pages/components/toggle-button.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/toggle-button/toggle-button.md';
 
-const pageFilename = 'components/toggle-button';
-const requireDemo = require.context(
-  'docs/src/pages/components/toggle-button',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/toggle-button',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/tooltips.js b/docs/pages/components/tooltips.js
index c2a808cd5891cb..5d5b3a76275fd1 100644
--- a/docs/pages/components/tooltips.js
+++ b/docs/pages/components/tooltips.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/tooltips/tooltips.md';
 
-const pageFilename = 'components/tooltips';
-const requireDemo = require.context('docs/src/pages/components/tooltips', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/tooltips',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/transfer-list.js b/docs/pages/components/transfer-list.js
index dfc5d542103bf8..a2697b9fc3da06 100644
--- a/docs/pages/components/transfer-list.js
+++ b/docs/pages/components/transfer-list.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/transfer-list/transfer-list.md';
 
-const pageFilename = 'components/transfer-list';
-const requireDemo = require.context(
-  'docs/src/pages/components/transfer-list',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/transfer-list',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/transitions.js b/docs/pages/components/transitions.js
index 2d350ceb190faa..c679bed7c6ec20 100644
--- a/docs/pages/components/transitions.js
+++ b/docs/pages/components/transitions.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/transitions/transitions.md';
 
-const pageFilename = 'components/transitions';
-const requireDemo = require.context('docs/src/pages/components/transitions', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/transitions',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/trap-focus.js b/docs/pages/components/trap-focus.js
index d005ea8723b718..2294a69108fb01 100644
--- a/docs/pages/components/trap-focus.js
+++ b/docs/pages/components/trap-focus.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/trap-focus/trap-focus.md';
 
-const pageFilename = 'components/trap-focus';
-const requireDemo = require.context('docs/src/pages/components/trap-focus', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/trap-focus',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/tree-view.js b/docs/pages/components/tree-view.js
index 8449214bd668d6..e3b5d74f7893ae 100644
--- a/docs/pages/components/tree-view.js
+++ b/docs/pages/components/tree-view.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/tree-view/tree-view.md';
 
-const pageFilename = 'components/tree-view';
-const requireDemo = require.context('docs/src/pages/components/tree-view', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/tree-view',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/typography.js b/docs/pages/components/typography.js
index 2a06218a54e960..3b87d4fcebccb6 100644
--- a/docs/pages/components/typography.js
+++ b/docs/pages/components/typography.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/typography/typography.md';
 
-const pageFilename = 'components/typography';
-const requireDemo = require.context('docs/src/pages/components/typography', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/typography',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/components/use-media-query.js b/docs/pages/components/use-media-query.js
index 0613dc6ada733b..73741fce216daf 100644
--- a/docs/pages/components/use-media-query.js
+++ b/docs/pages/components/use-media-query.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/components/use-media-query/use-media-query.md';
 
-const pageFilename = 'components/use-media-query';
-const requireDemo = require.context(
-  'docs/src/pages/components/use-media-query',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/use-media-query',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/breakpoints.js b/docs/pages/customization/breakpoints.js
index 687c389d931338..6ef5eb589f4555 100644
--- a/docs/pages/customization/breakpoints.js
+++ b/docs/pages/customization/breakpoints.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/breakpoints/breakpoints.md';
 
-const pageFilename = 'customization/breakpoints';
-const requireDemo = require.context(
-  'docs/src/pages/customization/breakpoints',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/breakpoints',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/color.js b/docs/pages/customization/color.js
index 0066890a322646..2df7690e1fa6fb 100644
--- a/docs/pages/customization/color.js
+++ b/docs/pages/customization/color.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/color/color.md';
 
-const pageFilename = 'customization/color';
-const requireDemo = require.context('docs/src/pages/customization/color', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/color',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/default-theme.js b/docs/pages/customization/default-theme.js
index b689e72500db8b..318e37bb3840ca 100644
--- a/docs/pages/customization/default-theme.js
+++ b/docs/pages/customization/default-theme.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/default-theme/default-theme.md';
 
-const pageFilename = 'customization/default-theme';
-const requireDemo = require.context(
-  'docs/src/pages/customization/default-theme',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/default-theme',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/density.js b/docs/pages/customization/density.js
index c3bfd6a144881e..ec99c2e1ccce1f 100644
--- a/docs/pages/customization/density.js
+++ b/docs/pages/customization/density.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/density/density.md';
 
-const pageFilename = 'customization/density';
-const requireDemo = require.context('docs/src/pages/customization/density', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/density',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/how-to-customize.js b/docs/pages/customization/how-to-customize.js
index 91d3a7396b761b..16d036e34a15b6 100644
--- a/docs/pages/customization/how-to-customize.js
+++ b/docs/pages/customization/how-to-customize.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/how-to-customize/how-to-customize.md';
 
-const pageFilename = 'customization/how-to-customize';
-const requireDemo = require.context(
-  'docs/src/pages/customization/how-to-customize',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/how-to-customize',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/palette.js b/docs/pages/customization/palette.js
index da021597371992..f9550e0a090175 100644
--- a/docs/pages/customization/palette.js
+++ b/docs/pages/customization/palette.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/palette/palette.md';
 
-const pageFilename = 'customization/palette';
-const requireDemo = require.context('docs/src/pages/customization/palette', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/palette',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/spacing.js b/docs/pages/customization/spacing.js
index c0e1c602a02a48..c564ed206e9fa2 100644
--- a/docs/pages/customization/spacing.js
+++ b/docs/pages/customization/spacing.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/spacing/spacing.md';
 
-const pageFilename = 'customization/spacing';
-const requireDemo = require.context('docs/src/pages/customization/spacing', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/spacing',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/styled.js b/docs/pages/customization/styled.js
index 7652cc5b112c16..46787676498b33 100644
--- a/docs/pages/customization/styled.js
+++ b/docs/pages/customization/styled.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/styled/styled.md';
 
-const pageFilename = 'customization/styled';
-const requireDemo = require.context('docs/src/pages/customization/styled', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/styled',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/theme-components.js b/docs/pages/customization/theme-components.js
index ceb7870759f838..81f15630dcd4e8 100644
--- a/docs/pages/customization/theme-components.js
+++ b/docs/pages/customization/theme-components.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/theme-components/theme-components.md';
 
-const pageFilename = 'customization/theme-components';
-const requireDemo = require.context(
-  'docs/src/pages/customization/theme-components',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/theme-components',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/theming.js b/docs/pages/customization/theming.js
index ad415f9b707a15..f02875f7f56789 100644
--- a/docs/pages/customization/theming.js
+++ b/docs/pages/customization/theming.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/theming/theming.md';
 
-const pageFilename = 'customization/theming';
-const requireDemo = require.context('docs/src/pages/customization/theming', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/theming',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/transitions.js b/docs/pages/customization/transitions.js
index c0de16fc00b19d..3f22c9f7f9f09e 100644
--- a/docs/pages/customization/transitions.js
+++ b/docs/pages/customization/transitions.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/transitions/transitions.md';
 
-const pageFilename = 'customization/transitions';
-const requireDemo = require.context(
-  'docs/src/pages/customization/transitions',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/transitions',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/typography.js b/docs/pages/customization/typography.js
index 5ca31c67346157..b9820c1e5e3fc2 100644
--- a/docs/pages/customization/typography.js
+++ b/docs/pages/customization/typography.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/typography/typography.md';
 
-const pageFilename = 'customization/typography';
-const requireDemo = require.context(
-  'docs/src/pages/customization/typography',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/typography',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/customization/z-index.js b/docs/pages/customization/z-index.js
index 3dacec0a79aad2..8339e6f6ad7de1 100644
--- a/docs/pages/customization/z-index.js
+++ b/docs/pages/customization/z-index.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/customization/z-index/z-index.md';
 
-const pageFilename = 'customization/z-index';
-const requireDemo = require.context('docs/src/pages/customization/z-index', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/customization/z-index',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/backers.js b/docs/pages/discover-more/backers.js
index 2b2f16fde39ab3..2369895216cc1f 100644
--- a/docs/pages/discover-more/backers.js
+++ b/docs/pages/discover-more/backers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/backers/backers.md';
 
-const pageFilename = 'discover-more/backers';
-const requireDemo = require.context('docs/src/pages/discover-more/backers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/backers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableAd />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/changelog.js b/docs/pages/discover-more/changelog.js
index 7c65e756bd1588..1e273f511394d9 100644
--- a/docs/pages/discover-more/changelog.js
+++ b/docs/pages/discover-more/changelog.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/changelog/changelog.md';
 
-const pageFilename = 'discover-more/changelog';
-const requireDemo = require.context('docs/src/pages/discover-more/changelog', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/changelog',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/languages.js b/docs/pages/discover-more/languages.js
index 17c1b65bb2ab0b..8bacdaeb70a65d 100644
--- a/docs/pages/discover-more/languages.js
+++ b/docs/pages/discover-more/languages.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/languages/languages.md';
 
-const pageFilename = 'discover-more/languages';
-const requireDemo = require.context('docs/src/pages/discover-more/languages', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/languages',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/related-projects.js b/docs/pages/discover-more/related-projects.js
index 0e5303f071c754..753a86cc72a532 100644
--- a/docs/pages/discover-more/related-projects.js
+++ b/docs/pages/discover-more/related-projects.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/related-projects/related-projects.md';
 
-const pageFilename = 'discover-more/related-projects';
-const requireDemo = require.context(
-  'docs/src/pages/discover-more/related-projects',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/related-projects',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/roadmap.js b/docs/pages/discover-more/roadmap.js
index 9b15150cbfcffd..b2fb5ad863b964 100644
--- a/docs/pages/discover-more/roadmap.js
+++ b/docs/pages/discover-more/roadmap.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/roadmap/roadmap.md';
 
-const pageFilename = 'discover-more/roadmap';
-const requireDemo = require.context('docs/src/pages/discover-more/roadmap', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/roadmap',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/showcase.js b/docs/pages/discover-more/showcase.js
index 4fefb121622eed..d34d787fb1b3d2 100644
--- a/docs/pages/discover-more/showcase.js
+++ b/docs/pages/discover-more/showcase.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/showcase/showcase.md';
 
-const pageFilename = 'discover-more/showcase';
-const requireDemo = require.context('docs/src/pages/discover-more/showcase', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/showcase',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/team.js b/docs/pages/discover-more/team.js
index ca15f1af5eab8b..7220f8aaba349a 100644
--- a/docs/pages/discover-more/team.js
+++ b/docs/pages/discover-more/team.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/team/team.md';
 
-const pageFilename = 'discover-more/team';
-const requireDemo = require.context('docs/src/pages/discover-more/team', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/team',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/discover-more/vision.js b/docs/pages/discover-more/vision.js
index 08c1f4b9db8b4b..7cb8de01bb8e78 100644
--- a/docs/pages/discover-more/vision.js
+++ b/docs/pages/discover-more/vision.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/discover-more/vision/vision.md';
 
-const pageFilename = 'discover-more/vision';
-const requireDemo = require.context('docs/src/pages/discover-more/vision', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/discover-more/vision',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/example-projects.js b/docs/pages/getting-started/example-projects.js
index 5cde45378a2847..a626cd1e1ed508 100644
--- a/docs/pages/getting-started/example-projects.js
+++ b/docs/pages/getting-started/example-projects.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/example-projects/example-projects.md';
 
-const pageFilename = 'getting-started/example-projects';
-const requireDemo = require.context(
-  'docs/src/pages/getting-started/example-projects',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/example-projects',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/faq.js b/docs/pages/getting-started/faq.js
index ce8a15fa21cd22..3979c4941d2b2a 100644
--- a/docs/pages/getting-started/faq.js
+++ b/docs/pages/getting-started/faq.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/faq/faq.md';
 
-const pageFilename = 'getting-started/faq';
-const requireDemo = require.context('docs/src/pages/getting-started/faq', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/faq',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/installation.js b/docs/pages/getting-started/installation.js
index 3f819bbbd2ae87..7c3a54e4b38395 100644
--- a/docs/pages/getting-started/installation.js
+++ b/docs/pages/getting-started/installation.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/installation/installation.md';
 
-const pageFilename = 'getting-started/installation';
-const requireDemo = require.context(
-  'docs/src/pages/getting-started/installation',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/installation',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/learn.js b/docs/pages/getting-started/learn.js
index b8f80ab52409a7..7f13df7f272632 100644
--- a/docs/pages/getting-started/learn.js
+++ b/docs/pages/getting-started/learn.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/learn/learn.md';
 
-const pageFilename = 'getting-started/learn';
-const requireDemo = require.context('docs/src/pages/getting-started/learn', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/learn',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/support.js b/docs/pages/getting-started/support.js
index 6a2164e8cfc0bc..d0b96870101a54 100644
--- a/docs/pages/getting-started/support.js
+++ b/docs/pages/getting-started/support.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/support/support.md';
 
-const pageFilename = 'getting-started/support';
-const requireDemo = require.context('docs/src/pages/getting-started/support', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/support',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/supported-components.js b/docs/pages/getting-started/supported-components.js
index 74407bbf440f98..2112075c997f66 100644
--- a/docs/pages/getting-started/supported-components.js
+++ b/docs/pages/getting-started/supported-components.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/supported-components/supported-components.md';
 
-const pageFilename = 'getting-started/supported-components';
-const requireDemo = require.context(
-  'docs/src/pages/getting-started/supported-components',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/supported-components',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/supported-platforms.js b/docs/pages/getting-started/supported-platforms.js
index bb11d0e7469116..215853c4e5bbc5 100644
--- a/docs/pages/getting-started/supported-platforms.js
+++ b/docs/pages/getting-started/supported-platforms.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/supported-platforms/supported-platforms.md';
 
-const pageFilename = 'getting-started/supported-platforms';
-const requireDemo = require.context(
-  'docs/src/pages/getting-started/supported-platforms',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/supported-platforms',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/templates.js b/docs/pages/getting-started/templates.js
index 3ab97e3ba9dbeb..804242cd36dec9 100644
--- a/docs/pages/getting-started/templates.js
+++ b/docs/pages/getting-started/templates.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/templates/templates.md';
 
-const pageFilename = 'getting-started/templates';
-const requireDemo = require.context(
-  'docs/src/pages/getting-started/templates',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/templates',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/getting-started/usage.js b/docs/pages/getting-started/usage.js
index 55f82094def397..14c28972ce466f 100644
--- a/docs/pages/getting-started/usage.js
+++ b/docs/pages/getting-started/usage.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/getting-started/usage/usage.md';
 
-const pageFilename = 'getting-started/usage';
-const requireDemo = require.context('docs/src/pages/getting-started/usage', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/getting-started/usage',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/api.js b/docs/pages/guides/api.js
index 88778772cd7ef9..1ab3f9f90fa7f0 100644
--- a/docs/pages/guides/api.js
+++ b/docs/pages/guides/api.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/api/api.md';
 
-const pageFilename = 'guides/api';
-const requireDemo = require.context('docs/src/pages/guides/api', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/api',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/composition.js b/docs/pages/guides/composition.js
index 805b517c033a07..6d9808d803ba3a 100644
--- a/docs/pages/guides/composition.js
+++ b/docs/pages/guides/composition.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/composition/composition.md';
 
-const pageFilename = 'guides/composition';
-const requireDemo = require.context('docs/src/pages/guides/composition', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/composition',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/content-security-policy.js b/docs/pages/guides/content-security-policy.js
index 3f3208c372d090..ac6af42248184f 100644
--- a/docs/pages/guides/content-security-policy.js
+++ b/docs/pages/guides/content-security-policy.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/content-security-policy/content-security-policy.md';
 
-const pageFilename = 'guides/content-security-policy';
-const requireDemo = require.context(
-  'docs/src/pages/guides/content-security-policy',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/content-security-policy',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/flow.js b/docs/pages/guides/flow.js
index bb26094456c5a4..9ce19e30c03ccf 100644
--- a/docs/pages/guides/flow.js
+++ b/docs/pages/guides/flow.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/flow/flow.md';
 
-const pageFilename = 'guides/flow';
-const requireDemo = require.context('docs/src/pages/guides/flow', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/flow',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/interoperability.js b/docs/pages/guides/interoperability.js
index c0059390ae812e..cffa41111c9e51 100644
--- a/docs/pages/guides/interoperability.js
+++ b/docs/pages/guides/interoperability.js
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, requireDemo } from "!@material-ui/markdown/loader!docs/src/pages/guides/interoperability/interoperability.md";
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/interoperability/interoperability.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
diff --git a/docs/pages/guides/localization.js b/docs/pages/guides/localization.js
index 99da3231cf39de..bb35d4eed4bf40 100644
--- a/docs/pages/guides/localization.js
+++ b/docs/pages/guides/localization.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/localization/localization.md';
 
-const pageFilename = 'guides/localization';
-const requireDemo = require.context('docs/src/pages/guides/localization', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/localization',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/migration-v0x.js b/docs/pages/guides/migration-v0x.js
index b29e28de07495e..1b47f4fb8bd37b 100644
--- a/docs/pages/guides/migration-v0x.js
+++ b/docs/pages/guides/migration-v0x.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/migration-v0x/migration-v0x.md';
 
-const pageFilename = 'guides/migration-v0x';
-const requireDemo = require.context('docs/src/pages/guides/migration-v0x', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/migration-v0x',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/migration-v3.js b/docs/pages/guides/migration-v3.js
index 44f7b82ed65fe9..c563af030879e3 100644
--- a/docs/pages/guides/migration-v3.js
+++ b/docs/pages/guides/migration-v3.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/migration-v3/migration-v3.md';
 
-const pageFilename = 'guides/migration-v3';
-const requireDemo = require.context('docs/src/pages/guides/migration-v3', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/migration-v3',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/migration-v4.js b/docs/pages/guides/migration-v4.js
index 594aca958e8ba9..a2459dce71f31f 100644
--- a/docs/pages/guides/migration-v4.js
+++ b/docs/pages/guides/migration-v4.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/migration-v4/migration-v4.md';
 
-const pageFilename = 'guides/migration-v4';
-const requireDemo = require.context('docs/src/pages/guides/migration-v4', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/migration-v4',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/minimizing-bundle-size.js b/docs/pages/guides/minimizing-bundle-size.js
index d6e37ddf9755f6..d6c22e76e61624 100644
--- a/docs/pages/guides/minimizing-bundle-size.js
+++ b/docs/pages/guides/minimizing-bundle-size.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md';
 
-const pageFilename = 'guides/minimizing-bundle-size';
-const requireDemo = require.context(
-  'docs/src/pages/guides/minimizing-bundle-size',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/minimizing-bundle-size',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/pickers-migration.js b/docs/pages/guides/pickers-migration.js
index 3131e9eff5ddc9..35a6c909dcde60 100644
--- a/docs/pages/guides/pickers-migration.js
+++ b/docs/pages/guides/pickers-migration.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/pickers-migration/pickers-migration.md';
 
-const pageFilename = 'guides/pickers-migration';
-const requireDemo = require.context(
-  'docs/src/pages/guides/pickers-migration',
-  false,
-  /\.(js|tsx)$/,
-);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/pickers-migration',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/responsive-ui.js b/docs/pages/guides/responsive-ui.js
index 18a1b39312d530..cbc06e31c292b0 100644
--- a/docs/pages/guides/responsive-ui.js
+++ b/docs/pages/guides/responsive-ui.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/responsive-ui/responsive-ui.md';
 
-const pageFilename = 'guides/responsive-ui';
-const requireDemo = require.context('docs/src/pages/guides/responsive-ui', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/responsive-ui',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/right-to-left.js b/docs/pages/guides/right-to-left.js
index db65162377f429..f813de7b4c8806 100644
--- a/docs/pages/guides/right-to-left.js
+++ b/docs/pages/guides/right-to-left.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/right-to-left/right-to-left.md';
 
-const pageFilename = 'guides/right-to-left';
-const requireDemo = require.context('docs/src/pages/guides/right-to-left', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/right-to-left',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/routing.js b/docs/pages/guides/routing.js
index 5e434c3e780d53..8c608b7dcadb6a 100644
--- a/docs/pages/guides/routing.js
+++ b/docs/pages/guides/routing.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/routing/routing.md';
 
-const pageFilename = 'guides/routing';
-const requireDemo = require.context('docs/src/pages/guides/routing', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/routing',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/server-rendering.js b/docs/pages/guides/server-rendering.js
index e106dc498a677a..8b247a6ebc474b 100644
--- a/docs/pages/guides/server-rendering.js
+++ b/docs/pages/guides/server-rendering.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/server-rendering/server-rendering.md';
 
-const pageFilename = 'guides/server-rendering';
-const requireDemo = require.context('docs/src/pages/guides/server-rendering', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/server-rendering',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/styled-engine.js b/docs/pages/guides/styled-engine.js
index ba8b1ff09050d7..96159d7a493160 100644
--- a/docs/pages/guides/styled-engine.js
+++ b/docs/pages/guides/styled-engine.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/styled-engine/styled-engine.md';
 
-const pageFilename = 'guides/styled-engine';
-const requireDemo = require.context('docs/src/pages/guides/styled-engine', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/styled-engine',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/testing.js b/docs/pages/guides/testing.js
index b793005d6f9b35..4a93f59ba4eb05 100644
--- a/docs/pages/guides/testing.js
+++ b/docs/pages/guides/testing.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/testing/testing.md';
 
-const pageFilename = 'guides/testing';
-const requireDemo = require.context('docs/src/pages/guides/testing', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/testing',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/guides/typescript.js b/docs/pages/guides/typescript.js
index a2a4a6c125f7ca..d45bde0e3dab4a 100644
--- a/docs/pages/guides/typescript.js
+++ b/docs/pages/guides/typescript.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/guides/typescript/typescript.md';
 
-const pageFilename = 'guides/typescript';
-const requireDemo = require.context('docs/src/pages/guides/typescript', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/guides/typescript',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/styles/advanced.js b/docs/pages/styles/advanced.js
index 322c477e565f7c..63ad1839ea9094 100644
--- a/docs/pages/styles/advanced.js
+++ b/docs/pages/styles/advanced.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'styles/advanced';
-const requireDemo = require.context('docs/src/pages/styles/advanced', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/styles/advanced',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/styles/advanced/advanced.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/styles/api.js b/docs/pages/styles/api.js
index 1a47db40b4f24b..dfdaeea509eace 100644
--- a/docs/pages/styles/api.js
+++ b/docs/pages/styles/api.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/styles/api/api.md';
 
-const pageFilename = 'styles/api';
-const requireDemo = require.context('docs/src/pages/styles/api', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/styles/api',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/styles/basics.js b/docs/pages/styles/basics.js
index 3a465c7033613c..077f60d93b19d3 100644
--- a/docs/pages/styles/basics.js
+++ b/docs/pages/styles/basics.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/styles/basics/basics.md';
 
-const pageFilename = 'styles/basics';
-const requireDemo = require.context('docs/src/pages/styles/basics', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/styles/basics',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/advanced.js b/docs/pages/system/advanced.js
index 2a39c6c6e8cb9b..f585b23cab1c9f 100644
--- a/docs/pages/system/advanced.js
+++ b/docs/pages/system/advanced.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'system/advanced';
-const requireDemo = require.context('docs/src/pages/system/advanced', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/advanced',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/advanced/advanced.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/basics.js b/docs/pages/system/basics.js
index b894879b3d382f..3fe34e2f78f377 100644
--- a/docs/pages/system/basics.js
+++ b/docs/pages/system/basics.js
@@ -1,24 +1,15 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
-
-const pageFilename = 'system/basics';
-const requireDemo = require.context('docs/src/pages/system/basics', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/basics',
-  false,
-  /\.(js|md|tsx)$/,
-);
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/basics/basics.md';
 
 // Run styled-components ref logic
 // https://github.com/styled-components/styled-components/pull/2998
 requireDemo.keys().map(requireDemo);
 
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/borders.js b/docs/pages/system/borders.js
index 744150adbea82f..49abbb210d268f 100644
--- a/docs/pages/system/borders.js
+++ b/docs/pages/system/borders.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/borders/borders.md';
 
-const pageFilename = 'system/borders';
-const requireDemo = require.context('docs/src/pages/system/borders', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/borders',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/box.js b/docs/pages/system/box.js
index 779779228a9591..0120a863a9005a 100644
--- a/docs/pages/system/box.js
+++ b/docs/pages/system/box.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/box/box.md';
 
-const pageFilename = 'system/box';
-const requireDemo = require.context('docs/src/pages/system/box', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/box',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/display.js b/docs/pages/system/display.js
index c1e6139420745c..30edef9a5f863c 100644
--- a/docs/pages/system/display.js
+++ b/docs/pages/system/display.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/display/display.md';
 
-const pageFilename = 'system/display';
-const requireDemo = require.context('docs/src/pages/system/display', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/display',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/flexbox.js b/docs/pages/system/flexbox.js
index 8801db971e279d..5fe8dba67d938f 100644
--- a/docs/pages/system/flexbox.js
+++ b/docs/pages/system/flexbox.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/flexbox/flexbox.md';
 
-const pageFilename = 'system/flexbox';
-const requireDemo = require.context('docs/src/pages/system/flexbox', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/flexbox',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/grid.js b/docs/pages/system/grid.js
index 937d7507f7488a..ea60e2f4d783ba 100644
--- a/docs/pages/system/grid.js
+++ b/docs/pages/system/grid.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/grid/grid.md';
 
-const pageFilename = 'system/grid';
-const requireDemo = require.context('docs/src/pages/system/grid', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/grid',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/palette.js b/docs/pages/system/palette.js
index 80a368d4179ca3..10f844dec959ef 100644
--- a/docs/pages/system/palette.js
+++ b/docs/pages/system/palette.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/palette/palette.md';
 
-const pageFilename = 'system/palette';
-const requireDemo = require.context('docs/src/pages/system/palette', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/palette',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/positions.js b/docs/pages/system/positions.js
index 5215e352a66b76..d00a8904fe75eb 100644
--- a/docs/pages/system/positions.js
+++ b/docs/pages/system/positions.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/positions/positions.md';
 
-const pageFilename = 'system/positions';
-const requireDemo = require.context('docs/src/pages/system/positions', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/positions',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/properties.js b/docs/pages/system/properties.js
index 26c83160856354..05760809ec2bdd 100644
--- a/docs/pages/system/properties.js
+++ b/docs/pages/system/properties.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/properties/properties.md';
 
-const pageFilename = 'system/properties';
-const requireDemo = require.context('docs/src/pages/system/properties', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/properties',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/screen-readers.js b/docs/pages/system/screen-readers.js
index 4b959f589cbf53..f78bd7727dc7e0 100644
--- a/docs/pages/system/screen-readers.js
+++ b/docs/pages/system/screen-readers.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/screen-readers/screen-readers.md';
 
-const pageFilename = 'system/screen-readers';
-const requireDemo = require.context('docs/src/pages/system/screen-readers', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/screen-readers',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/shadows.js b/docs/pages/system/shadows.js
index d067c0139de5a5..9f149b45190981 100644
--- a/docs/pages/system/shadows.js
+++ b/docs/pages/system/shadows.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/shadows/shadows.md';
 
-const pageFilename = 'system/shadows';
-const requireDemo = require.context('docs/src/pages/system/shadows', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/shadows',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/sizing.js b/docs/pages/system/sizing.js
index f5912ab52d8790..c0a3caa5bee0d8 100644
--- a/docs/pages/system/sizing.js
+++ b/docs/pages/system/sizing.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/sizing/sizing.md';
 
-const pageFilename = 'system/sizing';
-const requireDemo = require.context('docs/src/pages/system/sizing', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/sizing',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/spacing.js b/docs/pages/system/spacing.js
index 668e6fe78129ec..292e5379464c11 100644
--- a/docs/pages/system/spacing.js
+++ b/docs/pages/system/spacing.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/spacing/spacing.md';
 
-const pageFilename = 'system/spacing';
-const requireDemo = require.context('docs/src/pages/system/spacing', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/spacing',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/system/typography.js b/docs/pages/system/typography.js
index c7dc9efbfc142b..19925749e76f01 100644
--- a/docs/pages/system/typography.js
+++ b/docs/pages/system/typography.js
@@ -1,20 +1,11 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/system/typography/typography.md';
 
-const pageFilename = 'system/typography';
-const requireDemo = require.context('docs/src/pages/system/typography', false, /\.(js|tsx)$/);
-const requireRaw = require.context(
-  '!raw-loader!../../src/pages/system/typography',
-  false,
-  /\.(js|md|tsx)$/,
-);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
-
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
-};
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index eb671d22bb7ba0..570a2c10e90f63 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import sortedUniqBy from 'lodash/sortedUniqBy';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from '@material-ui/markdown/parseMarkdown';
+import {
+  demos,
+  docs,
+  requireDemo,
+} from '!@material-ui/markdown/loader!docs/src/pages/versions/versions.md';
 
-const pageFilename = 'versions';
-const requireDemo = require.context('docs/src/pages/versions/', false, /\.(js|tsx)$/);
-const requireRaw = require.context('!raw-loader!../src/pages/versions', false, /\.(js|md|tsx)$/);
-
-export default function Page({ demos, docs }) {
+export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
 }
 
@@ -73,7 +73,5 @@ Page.getInitialProps = async () => {
 
   versions = sortedUniqBy(versions, 'version');
 
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-
-  return { demos, docs, versions };
+  return { versions };
 };