Split markdown rendering

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;
   }
-`;
+`;

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>
 );

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;