Refactor markdown rendering

components/guide-body/index.js

@@ -1,13 +1,21 @@
-import { MDXProvider } from '@mdx-js/react';
+import MdRenderer from 'components/md-renderer'
-import MdxComponents from 'components/mdx-components';
+import SharePage from 'components/share-page';
 import { GuideBodyWrap } from './style';
 
-const GuideBody = (props) => (
+const GuideBody = ({ guide }) => {
-  <MDXProvider components={ MdxComponents }>
+  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;

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 }>

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>
           )
         }
         {

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>
+      <GuideBody guide={ guide } />
-        <GuideContent />
-        <SharePage title={ guide.title } url={ guide.url } twitterUsername={ guide.author.twitter } />
-      </GuideBody>
       <GuideFooter guide={ guide } />
     </GuideLayout>
   );