Refactor MarkdownLayout with MDXProvider and Rebass

Author: PRbsas

components/MarkdownLayout.js

@@ -1,5 +1,9 @@
 import styled from 'styled-components'
 import { media } from '../utils/styleUtils'
+import { MDXProvider } from '@mdx-js/tag'
+import { Container, Provider as RebassProvider } from 'rebass'
+
+import components from '../components/mdx'
 
 const MarkdownLayout = styled.div`
   line-height: 1.5;
@@ -25,5 +29,13 @@ const MarkdownLayout = styled.div`
 `
 
 export default ({ children }) => (
-  <MarkdownLayout>{ children }</MarkdownLayout>
+  <MarkdownLayout>
+    <MDXProvider components={components}>
+      <RebassProvider>
+        <Container>
+          { children }
+        </Container>
+      </RebassProvider>
+    </MDXProvider>
+  </MarkdownLayout>
 )

components/mdx.js

@@ -0,0 +1,3 @@
+import createComponents from '@rebass/markdown'
+
+export default createComponents()

package-lock.json

@@ -6,11 +6,13 @@
     "start": "next start"
   },
   "dependencies": {
+    "@rebass/markdown": "^1.0.0-1",
     "@zeit/next-mdx": "^1.1.0",
     "next": "^6.1.2",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-ga": "^2.5.3",
+    "rebass": "^2.3.2",
     "remark-capitalize": "^1.0.0",
     "styled-components": "^3.3.0",
     "to-id": "^1.0.5"