From 1e2f5d43ef8a4e0169196373901f65fa167cd3ac Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Nov 2019 18:36:49 +0400
Subject: [PATCH] Refactor markdown rendering

---
 components/guide-body/index.js                | 22 +++++++++++++------
 components/md-renderer/index.js               |  2 +-
 .../{ => md-renderer}/mdx-components/a.js     |  0
 .../mdx-components/blockquote.js              |  0
 .../mdx-components/heading.js                 |  0
 .../mdx-components/iframe.js                  |  0
 .../{ => md-renderer}/mdx-components/img.js   |  0
 .../{ => md-renderer}/mdx-components/index.js |  0
 .../{ => md-renderer}/mdx-components/p.js     |  0
 .../{ => md-renderer}/mdx-components/pre.js   |  0
 .../{ => md-renderer}/mdx-components/table.js |  0
 components/roadmap-summary/index.js           |  5 +++--
 pages/guides/[guide].js                       |  8 +------
 13 files changed, 20 insertions(+), 17 deletions(-)
 rename components/{ => md-renderer}/mdx-components/a.js (100%)
 rename components/{ => md-renderer}/mdx-components/blockquote.js (100%)
 rename components/{ => md-renderer}/mdx-components/heading.js (100%)
 rename components/{ => md-renderer}/mdx-components/iframe.js (100%)
 rename components/{ => md-renderer}/mdx-components/img.js (100%)
 rename components/{ => md-renderer}/mdx-components/index.js (100%)
 rename components/{ => md-renderer}/mdx-components/p.js (100%)
 rename components/{ => md-renderer}/mdx-components/pre.js (100%)
 rename components/{ => md-renderer}/mdx-components/table.js (100%)

diff --git a/components/guide-body/index.js b/components/guide-body/index.js
index c0ffc8dc6..e22de34e2 100644
--- a/components/guide-body/index.js
+++ b/components/guide-body/index.js
@@ -1,13 +1,21 @@
-import { MDXProvider } from '@mdx-js/react';
-import MdxComponents from 'components/mdx-components';
+import MdRenderer from 'components/md-renderer'
+import SharePage from 'components/share-page';
 import { GuideBodyWrap } from './style';
 
-const GuideBody = (props) => (
-  <MDXProvider components={ MdxComponents }>
+const GuideBody = ({ guide }) => {
+  const GuideContent = require(`../../storage/guides/${guide.fileName}.md`).default;
+  return (
     <GuideBodyWrap>
-      { props.children }
+      <MdRenderer>
+        <GuideContent />
+        <SharePage
+          title={ guide.title }
+          url={ guide.url }
+          twitterUsername={ guide.author.twitter }
+        />
+      </MdRenderer>
     </GuideBodyWrap>
-  </MDXProvider>
-);
+  );
+};
 
 export default GuideBody;
diff --git a/components/md-renderer/index.js b/components/md-renderer/index.js
index 09ec58527..8784f3c89 100644
--- a/components/md-renderer/index.js
+++ b/components/md-renderer/index.js
@@ -1,5 +1,5 @@
 import { MDXProvider } from '@mdx-js/react';
-import MdxComponents from 'components/mdx-components';
+import MdxComponents from './mdx-components';
 
 const MdRenderer = (props) => (
   <MDXProvider components={ MdxComponents }>
diff --git a/components/mdx-components/a.js b/components/md-renderer/mdx-components/a.js
similarity index 100%
rename from components/mdx-components/a.js
rename to components/md-renderer/mdx-components/a.js
diff --git a/components/mdx-components/blockquote.js b/components/md-renderer/mdx-components/blockquote.js
similarity index 100%
rename from components/mdx-components/blockquote.js
rename to components/md-renderer/mdx-components/blockquote.js
diff --git a/components/mdx-components/heading.js b/components/md-renderer/mdx-components/heading.js
similarity index 100%
rename from components/mdx-components/heading.js
rename to components/md-renderer/mdx-components/heading.js
diff --git a/components/mdx-components/iframe.js b/components/md-renderer/mdx-components/iframe.js
similarity index 100%
rename from components/mdx-components/iframe.js
rename to components/md-renderer/mdx-components/iframe.js
diff --git a/components/mdx-components/img.js b/components/md-renderer/mdx-components/img.js
similarity index 100%
rename from components/mdx-components/img.js
rename to components/md-renderer/mdx-components/img.js
diff --git a/components/mdx-components/index.js b/components/md-renderer/mdx-components/index.js
similarity index 100%
rename from components/mdx-components/index.js
rename to components/md-renderer/mdx-components/index.js
diff --git a/components/mdx-components/p.js b/components/md-renderer/mdx-components/p.js
similarity index 100%
rename from components/mdx-components/p.js
rename to components/md-renderer/mdx-components/p.js
diff --git a/components/mdx-components/pre.js b/components/md-renderer/mdx-components/pre.js
similarity index 100%
rename from components/mdx-components/pre.js
rename to components/md-renderer/mdx-components/pre.js
diff --git a/components/mdx-components/table.js b/components/md-renderer/mdx-components/table.js
similarity index 100%
rename from components/mdx-components/table.js
rename to components/md-renderer/mdx-components/table.js
diff --git a/components/roadmap-summary/index.js b/components/roadmap-summary/index.js
index 0385862f5..08e0f9db6 100644
--- a/components/roadmap-summary/index.js
+++ b/components/roadmap-summary/index.js
@@ -5,6 +5,7 @@ import SharePage from 'components/share-page';
 import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
 import GuideBody from 'components/guide-body';
 import siteConfig from "storage/site";
+import MdRenderer from '../md-renderer';
 
 const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
 
@@ -50,9 +51,9 @@ const RoadmapSummary = ({ roadmap }) => {
       <Summary>
         {
           roadmap.upcoming && (
-            <GuideBody>
+            <MdRenderer>
               <UpcomingGuide />
-            </GuideBody>
+            </MdRenderer>
           )
         }
         {
diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js
index 1f90cc410..3fc667119 100644
--- a/pages/guides/[guide].js
+++ b/pages/guides/[guide].js
@@ -3,7 +3,6 @@ import GuideLayout from 'layouts/guide';
 import { serverOnlyProps } from 'lib/server';
 import GuideHeader from 'components/guide-header';
 import GuideBody from 'components/guide-body';
-import SharePage from 'components/share-page';
 import GuideFooter from 'components/guide-footer';
 import { getRequestedGuide } from 'lib/guide';
 import Helmet from 'components/helmet';
@@ -13,16 +12,11 @@ const Guide = ({ guide }) => {
     return <Error statusCode={ 404 } />
   }
 
-  const GuideContent = require(`../../storage/guides/${guide.fileName}.md`).default;
-
   return (
     <GuideLayout>
       <Helmet title={ guide.title } description={ guide.description } />
       <GuideHeader guide={ guide } />
-      <GuideBody>
-        <GuideContent />
-        <SharePage title={ guide.title } url={ guide.url } twitterUsername={ guide.author.twitter } />
-      </GuideBody>
+      <GuideBody guide={ guide } />
       <GuideFooter guide={ guide } />
     </GuideLayout>
   );