Switched from DocumentTitle to Helmet for more versatility (gatsbyjs#21)

pragmaticpat · Sep 14, 2016 · b03081f · b03081f
1 parent 9897fc5
commit b03081f
Show file tree

Hide file tree

Showing 14 changed files with 212 additions and 196 deletions.
diff --git 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 { TypographyStyle, GoogleFont } from 'react-typography'
@@ -14,7 +14,7 @@ module.exports = React.createClass({
     }
   },
   render () {
-    const title = DocumentTitle.rewind()
+    const head = Helmet.rewind()
 
     let css
     if (process.env.NODE_ENV === 'production') {
@@ -30,7 +30,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
@@ -16,7 +16,7 @@
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
     "object-assign": "^4.1.0",
-    "react-document-title": "^2.0.1",
+    "react-helmet": "^3.1.0",
     "react-headroom": "^2.1.2",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.12.0",

diff --git a/pages/coffee-react.cjsx b/pages/coffee-react.cjsx
@@ -1,5 +1,5 @@
 React = require 'react'
-DocumentTitle = require 'react-document-title'
+Helmet = require 'react-helmet'
 config = require 'config'
 
 module.exports = React.createClass
@@ -13,12 +13,13 @@ module.exports = React.createClass
     @setState count: @state.count - 1
 
   render: ->
-    <DocumentTitle title={config.config.siteTitle + ' | Coffeescript React.js components'}>
-      <div>
-        <h1>Coffeescript React.js components</h1>
-        <h3>Counter example</h3>
-        <p>{@state.count}</p>
-        <button onClick={@handlePlusClick}>+</button>
-        <button onClick={@handleMinusClick}>-</button>
-      </div>
-    </DocumentTitle>
+    <div>
+      <Helmet
+        title={config.config.siteTitle + ' | Coffeescript React.js components'} 
+      />
+      <h1>Coffeescript React.js components</h1>
+      <h3>Counter example</h3>
+      <p>{@state.count}</p>
+      <button onClick={@handlePlusClick}>+</button>
+      <button onClick={@handleMinusClick}>-</button>
+    </div>
diff --git a/pages/css-modules.js b/pages/css-modules.js
@@ -1,35 +1,36 @@
 import React from 'react'
 import styles from './example.module.css'
-import DocumentTitle from 'react-document-title'
+import Helmet from 'react-helmet'
 import { config } from 'config'
 
 export default class PostCSS extends React.Component {
   render () {
     return (
-      <DocumentTitle title={`${config.siteTitle} | Hi PostCSSy friends`}>
-        <div>
-          <h1 className={styles['the-css-module-class']}>
-            Hi CSS Modules friends
-          </h1>
-          <p>You can use CSS Modules in Gatsby with Postcss, Less, and Sass. They
-            are enabled for any file in the format *.module.*
-          </p>
-          <div className={styles['css-modules-nav-example']}>
-            <h2>Nav example</h2>
-            <ul>
-              <li>
-                <a href="#">Store</a>
-              </li>
-              <li>
-                <a href="#">Help</a>
-              </li>
-              <li>
-                <a href="#">Logout</a>
-              </li>
-            </ul>
-          </div>
+      <div>
+        <Helmet
+          title={`${config.siteTitle} | Hi PostCSSy friends`} 
+        />
+        <h1 className={styles['the-css-module-class']}>
+          Hi CSS Modules friends
+        </h1>
+        <p>You can use CSS Modules in Gatsby with Postcss, Less, and Sass. They
+          are enabled for any file in the format *.module.*
+        </p>
+        <div className={styles['css-modules-nav-example']}>
+          <h2>Nav example</h2>
+          <ul>
+            <li>
+              <a href="#">Store</a>
+            </li>
+            <li>
+              <a href="#">Help</a>
+            </li>
+            <li>
+              <a href="#">Logout</a>
+            </li>
+          </ul>
         </div>
-      </DocumentTitle>
+      </div>
     )
   }
 }

diff --git a/pages/index.js b/pages/index.js
@@ -1,60 +1,65 @@
 import React from 'react'
 import { Link } from 'react-router'
 import { prefixLink } from 'gatsby-helpers'
-import DocumentTitle from 'react-document-title'
+import Helmet from "react-helmet"
 import { config } from 'config'
 
 export default class Index extends React.Component {
   render () {
     return (
-      <DocumentTitle title={config.siteTitle}>
-        <div>
-          <h1>
-            Hi people
-          </h1>
-          <p>Welcome to your new Gatsby site</p>
-          <h2>Below are some pages showing different capabilities built-in to Gatsby</h2>
-          <h3>Supported file types</h3>
-          <ul>
-            <li>
-              <Link to={prefixLink('/markdown/')}>Markdown</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/react/')}>JSX (React components)</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/coffee-react/')}>CJSX (Coffeescript React components)</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/html/')}>HTML</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/json/')}>JSON</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/yaml/')}>YAML</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/toml/')}>TOML</Link>
-            </li>
-          </ul>
-          <h3>Supported CSS processors</h3>
-          <ul>
-            <li>
-              <Link to={prefixLink('/postcss/')}>PostCSS</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/css-modules/')}>CSS Modules</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/sass/')}>Sass</Link>
-            </li>
-            <li>
-              <Link to={prefixLink('/less/')}>Less</Link>
-            </li>
-          </ul>
-        </div>
-      </DocumentTitle>
+      <div>
+        <Helmet
+          title={config.siteTitle}
+          meta={[
+            {"name": "description", "content": "Sample"},
+            {"name": "keywords", "content": "sample, something"},
+          ]}
+        />
+        <h1>
+          Hi people
+        </h1>
+        <p>Welcome to your new Gatsby site</p>
+        <h2>Below are some pages showing different capabilities built-in to Gatsby</h2>
+        <h3>Supported file types</h3>
+        <ul>
+          <li>
+            <Link to={prefixLink('/markdown/')}>Markdown</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/react/')}>JSX (React components)</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/coffee-react/')}>CJSX (Coffeescript React components)</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/html/')}>HTML</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/json/')}>JSON</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/yaml/')}>YAML</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/toml/')}>TOML</Link>
+          </li>
+        </ul>
+        <h3>Supported CSS processors</h3>
+        <ul>
+          <li>
+            <Link to={prefixLink('/postcss/')}>PostCSS</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/css-modules/')}>CSS Modules</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/sass/')}>Sass</Link>
+          </li>
+          <li>
+            <Link to={prefixLink('/less/')}>Less</Link>
+          </li>
+        </ul>
+      </div>
     )
   }
 }
diff --git a/pages/less.js b/pages/less.js
@@ -1,34 +1,35 @@
 import React from 'react'
 import './example.less'
-import DocumentTitle from 'react-document-title'
+import Helmet from 'react-helmet'
 import { config } from 'config'
 
 export default class Less extends React.Component {
   render () {
     return (
-      <DocumentTitle title={`${config.siteTitle} | Hi lessy friends`}>
-        <div>
-          <h1
-            className="the-less-class"
-          >
-            Hi lessy friends
-          </h1>
-          <div className="less-nav-example">
-            <h2>Nav example</h2>
-            <ul>
-              <li>
-                <a href="#">Store</a>
-              </li>
-              <li>
-                <a href="#">Help</a>
-              </li>
-              <li>
-                <a href="#">Logout</a>
-              </li>
-            </ul>
-          </div>
+      <div>
+        <Helmet
+          title={`${config.siteTitle} | Hi lessy friends`} 
+        />
+        <h1
+          className="the-less-class"
+        >
+          Hi lessy friends
+        </h1>
+        <div className="less-nav-example">
+          <h2>Nav example</h2>
+          <ul>
+            <li>
+              <a href="#">Store</a>
+            </li>
+            <li>
+              <a href="#">Help</a>
+            </li>
+            <li>
+              <a href="#">Logout</a>
+            </li>
+          </ul>
         </div>
-      </DocumentTitle>
+      </div>
     )
   }
 }
diff --git a/pages/postcss.js b/pages/postcss.js
@@ -1,32 +1,33 @@
 import React from 'react'
 import './example.css'
-import DocumentTitle from 'react-document-title'
+import Helmet from 'react-helmet'
 import { config } from 'config'
 
 export default class PostCSS extends React.Component {
   render () {
     return (
-      <DocumentTitle title={`${config.siteTitle} | Hi PostCSSy friends`}>
-        <div>
-          <h1 className="the-postcss-class">
-            Hi PostCSSy friends
-          </h1>
-          <div className="postcss-nav-example">
-            <h2>Nav example</h2>
-            <ul>
-              <li>
-                <a href="#">Store</a>
-              </li>
-              <li>
-                <a href="#">Help</a>
-              </li>
-              <li>
-                <a href="#">Logout</a>
-              </li>
-            </ul>
-          </div>
+      <div>
+        <Helmet
+          title={`${config.siteTitle} | Hi PostCSSy friends`} 
+        />
+        <h1 className="the-postcss-class">
+          Hi PostCSSy friends
+        </h1>
+        <div className="postcss-nav-example">
+          <h2>Nav example</h2>
+          <ul>
+            <li>
+              <a href="#">Store</a>
+            </li>
+            <li>
+              <a href="#">Help</a>
+            </li>
+            <li>
+              <a href="#">Logout</a>
+            </li>
+          </ul>
         </div>
-      </DocumentTitle>
+      </div>
     )
   }
 }
diff --git a/pages/react.js b/pages/react.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
+import Helmet from 'react-helmet'
 import { config } from 'config'
 
 export default class ReactComponent extends React.Component {
@@ -18,15 +18,16 @@ export default class ReactComponent extends React.Component {
 
   render () {
     return (
-      <DocumentTitle title={`${config.siteTitle} | React.js components`}>
-        <div>
-          <h1>React.js components</h1>
-          <h3>Counter example</h3>
-          <p>{this.state.count}</p>
-          <button onClick={() => this.handlePlusClick()}>+</button>
-          <button onClick={() => this.handleMinusClick()}>-</button>
-        </div>
-      </DocumentTitle>
+      <div>
+        <Helmet
+          title={`${config.siteTitle} | React.js components`} 
+        />
+        <h1>React.js components</h1>
+        <h3>Counter example</h3>
+        <p>{this.state.count}</p>
+        <button onClick={() => this.handlePlusClick()}>+</button>
+        <button onClick={() => this.handleMinusClick()}>-</button>
+      </div>
     )
   }
 }