Consolidate two bios into one Bio component

components/Bio.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { config } from 'config'
+import { rhythm } from 'utils/typography'
+
+class Bio extends React.Component {
+  render () {
+    return (
+      <p
+        style={{
+          marginBottom: rhythm(2.5),
+        }}
+      >
+        <img
+          src="/kyle-round-small-pantheon.jpg"
+          style={{
+            float: 'left',
+            marginRight: rhythm(1/4),
+            marginBottom: 0,
+            width: rhythm(2),
+            height: rhythm(2),
+          }}
+        />
+        Written by <strong>{config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
+      </p>
+    )
+  }
+}
+
+export default Bio

pages/index.js

@@ -7,6 +7,7 @@ import { rhythm } from 'utils/typography'
 import access from 'safe-access'
 import { config } from 'config'
 import include from 'underscore.string/include'
+import Bio from 'components/Bio'
 
 class BlogIndex extends React.Component {
   render () {
@@ -33,23 +34,7 @@ class BlogIndex extends React.Component {
     return (
       <DocumentTitle title={config.blogTitle}>
         <div>
-          <p
+          <Bio/>
-            style={{
-              marginBottom: rhythm(2.5),
-            }}
-          >
-            <img
-              src="./kyle-round-small-pantheon.jpg"
-              style={{
-                float: 'left',
-                marginRight: rhythm(1/4),
-                marginBottom: 0,
-                width: rhythm(2),
-                height: rhythm(2),
-              }}
-            />
-            Written by <strong>{config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
-          </p>
           <ul>
             {pageLinks}
           </ul>

wrappers/md.js

@@ -5,6 +5,7 @@ import { link } from 'gatsby-helpers'
 import ReadNext from '../components/ReadNext'
 import { rhythm } from 'utils/typography'
 import { config } from 'config'
+import Bio from 'components/Bio'
 
 import '../css/zenburn.css'
 
@@ -32,19 +33,7 @@ class MarkdownWrapper extends React.Component {
             }}
           />
           <ReadNext post={post} pages={route.pages} />
-          <p>
+          <Bio />
-            <img
-              src={link('/kyle-round-small-pantheon.jpg')}
-              style={{
-                float: 'left',
-                marginRight: rhythm(1/4),
-                marginBottom: 0,
-                width: rhythm(2),
-                height: rhythm(2),
-              }}
-            />
-            <strong>{config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
-          </p>
         </div>
       </DocumentTitle>
     )