[docs] Parse markdown on mount

docs/next.config.js

@@ -90,6 +90,7 @@ module.exports = {
       module: {
         ...config.module,
         rules: config.module.rules.concat([
+          // used in some /getting-started/templates
           {
             test: /\.md$/,
             loader: 'raw-loader',
@@ -155,7 +156,8 @@ module.exports = {
     }
 
     // We want to speed-up the build of pull requests.
-    if (process.env.PULL_REQUEST === 'true') {
+    // TODO: revert. Only flipped for debugging
+    if (process.env.PULL_REQUEST === 'false') {
       // eslint-disable-next-line no-console
       console.log('Considering only English for SSR');
       traverse(pages, 'en');

docs/pages/api-docs/alert-title.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './alert-title.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/alert-title';
+const requireRaw = require.context('!raw-loader!./', false, /alert-title\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/alert.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './alert.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/alert';
+const requireRaw = require.context('!raw-loader!./', false, /alert\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/app-bar.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './app-bar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/app-bar';
+const requireRaw = require.context('!raw-loader!./', false, /app-bar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/autocomplete.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './autocomplete.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/autocomplete';
+const requireRaw = require.context('!raw-loader!./', false, /autocomplete\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/avatar-group.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './avatar-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/avatar-group';
+const requireRaw = require.context('!raw-loader!./', false, /avatar-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/avatar.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './avatar.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/avatar';
+const requireRaw = require.context('!raw-loader!./', false, /avatar\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/backdrop.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './backdrop.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/backdrop';
+const requireRaw = require.context('!raw-loader!./', false, /backdrop\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/badge.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './badge.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/badge';
+const requireRaw = require.context('!raw-loader!./', false, /badge\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/bottom-navigation-action.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './bottom-navigation-action.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/bottom-navigation-action';
+const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation-action\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/bottom-navigation.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './bottom-navigation.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/bottom-navigation';
+const requireRaw = require.context('!raw-loader!./', false, /bottom-navigation\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/breadcrumbs.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './breadcrumbs.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/breadcrumbs';
+const requireRaw = require.context('!raw-loader!./', false, /breadcrumbs\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/button-base.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button-base.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button-base';
+const requireRaw = require.context('!raw-loader!./', false, /button-base\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/button-group.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button-group.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button-group';
+const requireRaw = require.context('!raw-loader!./', false, /button-group\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/button.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './button.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/button';
+const requireRaw = require.context('!raw-loader!./', false, /button\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/card-action-area.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-action-area.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-action-area';
+const requireRaw = require.context('!raw-loader!./', false, /card-action-area\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/card-actions.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-actions.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-actions';
+const requireRaw = require.context('!raw-loader!./', false, /card-actions\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/card-content.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-content.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-content';
+const requireRaw = require.context('!raw-loader!./', false, /card-content\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/card-header.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-header.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-header';
+const requireRaw = require.context('!raw-loader!./', false, /card-header\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/card-media.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './card-media.md';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-export default function Page() {
-  return <MarkdownDocs markdown={markdown} />;
+const pageFilename = 'api/card-media';
+const requireRaw = require.context('!raw-loader!./', false, /card-media\.md$/);
+
+// eslint-disable-next-line react/prop-types
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
 }
+
+Page.getInitialProps = async () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};