From ad40b8bad4b058543925a21781efe608ed231aa1 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Nov 2019 18:13:07 +0400
Subject: [PATCH] Split markdown rendering

---
 components/about-header/style.js |  4 ++--
 components/faq-list/index.js     |  6 +++---
 components/md-renderer/index.js  | 10 ++++++++++
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 components/md-renderer/index.js

diff --git a/components/about-header/style.js b/components/about-header/style.js
index 1c512105d..0290780c2 100644
--- a/components/about-header/style.js
+++ b/components/about-header/style.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const AboutHeaderWrap = styled.div`
   text-align: left;
-  padding: 70px 20px;
+  padding: 70px 0;
   margin: 0 auto;
   
   .author-info {
@@ -46,4 +46,4 @@ export const AboutHeaderWrap = styled.div`
     border-radius: 5px;
     text-decoration: none;
   }
-`;
\ No newline at end of file
+`;
diff --git a/components/faq-list/index.js b/components/faq-list/index.js
index 9bd671e09..c7db1761c 100644
--- a/components/faq-list/index.js
+++ b/components/faq-list/index.js
@@ -1,14 +1,14 @@
 import { FaqContainer } from './style';
-import GuideBody from 'components/guide-body';
+import MdRenderer from 'components/md-renderer';
 
 const AboutPage = require(`../../storage/pages/about.md`).default;
 
 const FaqList = () => (
   <FaqContainer className='border-top bg-light'>
     <div className="container container-small">
-      <GuideBody>
+      <MdRenderer>
         <AboutPage />
-      </GuideBody>
+      </MdRenderer>
     </div>
   </FaqContainer>
 );
diff --git a/components/md-renderer/index.js b/components/md-renderer/index.js
new file mode 100644
index 000000000..09ec58527
--- /dev/null
+++ b/components/md-renderer/index.js
@@ -0,0 +1,10 @@
+import { MDXProvider } from '@mdx-js/react';
+import MdxComponents from 'components/mdx-components';
+
+const MdRenderer = (props) => (
+  <MDXProvider components={ MdxComponents }>
+    { props.children }
+  </MDXProvider>
+);
+
+export default MdRenderer;