From 2b832d4b01372da8bc6e014577d7c6768d7ef0cd Mon Sep 17 00:00:00 2001
From: Chiedo <chiedo@chie.do>
Date: Wed, 14 Sep 2016 11:04:58 -0400
Subject: [PATCH] Switched from DocumentTitle to the More Robust HelmetJS lib

---
 html.js        |  7 ++++---
 package.json   |  2 +-
 pages/index.js | 23 ++++++++++++++---------
 wrappers/md.js | 45 +++++++++++++++++++++++----------------------
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/html.js b/html.js
index cd1c637..2b14127 100644
--- a/html.js
+++ b/html.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
+import Helmet from "react-helmet"
 import { prefixLink } from 'gatsby-helpers'
 import { GoogleFont, TypographyStyle } from 'react-typography'
 import typography from './utils/typography'
@@ -13,7 +13,7 @@ module.exports = React.createClass({
   },
   render () {
     const { body } = this.props
-    const title = DocumentTitle.rewind()
+    const head = Helmet.rewind();
 
     let css
     if (process.env.NODE_ENV === 'production') {
@@ -29,7 +29,8 @@ module.exports = React.createClass({
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <title>{title}</title>
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
           <TypographyStyle typography={typography} />
           <GoogleFont typography={typography} />
           {css}
diff --git a/package.json b/package.json
index 38f90aa..62bd64e 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "gatsby": "^0.12.6",
     "lodash": "^4.15.0",
     "moment": "^2.14.1",
-    "react-document-title": "^2.0.2",
+    "react-helmet": "^3.1.0",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.12.0",
     "safe-access": "^0.1.0",
diff --git a/pages/index.js b/pages/index.js
index 75541aa..5856499 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { Link } from 'react-router'
 import sortBy from 'lodash/sortBy'
-import DocumentTitle from 'react-document-title'
 import { prefixLink } from 'gatsby-helpers'
 import { rhythm } from 'utils/typography'
+import Helmet from "react-helmet"
 import access from 'safe-access'
 import { config } from 'config'
 import include from 'underscore.string/include'
@@ -32,14 +32,19 @@ class BlogIndex extends React.Component {
       }
     })
     return (
-      <DocumentTitle title={config.blogTitle}>
-        <div>
-          <Bio />
-          <ul>
-            {pageLinks}
-          </ul>
-        </div>
-      </DocumentTitle>
+      <div>
+        <Helmet
+          title={config.blogTitle}
+          meta={[
+            {"name": "description", "content": "Sample blog"},
+            {"name": "keywords", "content": "blog, articles"},
+          ]}
+        />
+        <Bio />
+        <ul>
+          {pageLinks}
+        </ul>
+      </div>
     )
   }
 }
diff --git a/wrappers/md.js b/wrappers/md.js
index c63c778..1fd6946 100644
--- a/wrappers/md.js
+++ b/wrappers/md.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import moment from 'moment'
-import DocumentTitle from 'react-document-title'
+import Helmet from "react-helmet"
 import ReadNext from '../components/ReadNext'
 import { rhythm } from 'utils/typography'
 import { config } from 'config'
@@ -14,27 +14,28 @@ class MarkdownWrapper extends React.Component {
     const post = route.page.data
 
     return (
-      <DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
-        <div className="markdown">
-          <h1 style={{marginTop: 0}}>{post.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: post.body }} />
-          <em
-            style={{
-              display: 'block',
-              marginBottom: rhythm(2),
-            }}
-          >
-            Posted {moment(post.date).format('MMMM D, YYYY')}
-          </em>
-          <hr
-            style={{
-              marginBottom: rhythm(2),
-            }}
-          />
-          <ReadNext post={post} pages={route.pages} />
-          <Bio />
-        </div>
-      </DocumentTitle>
+      <div className="markdown">
+        <Helmet
+          title={`${post.title} | ${config.blogTitle}`}
+        />
+        <h1 style={{marginTop: 0}}>{post.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: post.body }} />
+        <em
+          style={{
+            display: 'block',
+            marginBottom: rhythm(2),
+          }}
+        >
+          Posted {moment(post.date).format('MMMM D, YYYY')}
+        </em>
+        <hr
+          style={{
+            marginBottom: rhythm(2),
+          }}
+        />
+        <ReadNext post={post} pages={route.pages} />
+        <Bio />
+      </div>
     )
   }
 }