Add MDX override components

RyanWarner · Jul 31, 2020 · 7bcc246 · 7bcc246 · vercel · Jul 31, 2020
1 parent 878e744
commit 7bcc246
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 9 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -17,8 +17,8 @@ const Header = props =>
     <Link href='/'>
       <a>Home</a>
     </Link>
-    <Link href='/'>
-      <a>Blog</a>
+    <Link href='/about'>
+      <a>About</a>
     </Link>
   </Nav>
 

diff --git a/src/components/HomePage/styles.js b/src/components/HomePage/styles.js
@@ -18,7 +18,7 @@ export const Wrap = ({ children }) => (
 export const Main = ({ children }) => (
   <main
     style={{
-      maxWidth: '720px',
+      maxWidth: '700px',
       padding: '0 30px',
       width: '100%',
       marginTop: '100px',

diff --git a/src/components/MDXOverrideComponents.js b/src/components/MDXOverrideComponents.js
@@ -0,0 +1,13 @@
+export const p = ({ children }) => {
+  return (
+    <p
+      style={{
+        fontSize: '18px',
+        lineHeight: '180%',
+        marginBottom: '3rem'
+      }}
+    >
+      {children}
+    </p>
+  )
+}
diff --git a/src/components/PostPage/styles.js b/src/components/PostPage/styles.js
@@ -15,7 +15,7 @@ export const Wrap = ({ children }) => (
 export const Main = ({ children }) => (
   <main
     style={{
-      maxWidth: '720px',
+      maxWidth: '700px',
       width: '100%'
     }}
   >

diff --git a/src/components/index.js b/src/components/index.js
@@ -5,3 +5,4 @@ export PostSnippet from './PostSnippet'
 export GitHub from './GitHub'
 export HomePage from './HomePage'
 export PostPage from './PostPage'
+export * from './MDXOverrideComponents'
diff --git a/src/pages/about.mdx b/src/pages/about.mdx
@@ -0,0 +1,7 @@
+# MDX powered About page!
+
+Here lies some MDX.
+
+```
+const code = {}
+```
diff --git a/src/pages/page2.mdx b/src/pages/page2.mdx