From 1043f18f0c91d74ef5c20e30249e0e81904084cf Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Sat, 21 Nov 2015 16:59:04 -0800
Subject: [PATCH] Update packages + update Typography setup

---
 components/ReadNext.jsx | 10 ++++------
 package.json            | 15 ++++++++-------
 pages/_template.jsx     |  7 ++-----
 pages/index.jsx         |  4 ++--
 utils/typography.js     | 20 ++++++++++++++++++++
 wrappers/md.jsx         |  4 ++--
 6 files changed, 38 insertions(+), 22 deletions(-)
 create mode 100644 utils/typography.js

diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
index 2dda8a0..f00ef1c 100644
--- a/components/ReadNext.jsx
+++ b/components/ReadNext.jsx
@@ -2,14 +2,12 @@ import React from 'react';
 import { Link } from 'react-router';
 import { prune, include as includes } from 'underscore.string';
 import find from 'lodash/collection/find';
+import { rhythm, fontSizeToMS } from 'utils/typography'
+import { link } from 'gatsby-helpers'
 
 export default class extends React.Component {
   render() {
-    let body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
-    ref = this.props.typography, 
-    rhythm = ref.rhythm, 
-    fontSizeToMS = ref.fontSizeToMS;
-    
+    let body, html, nextPost, readNext;
     readNext = this.props.post.readNext;
     if (readNext != null) {
       nextPost = find(this.props.pages, function(page) {
@@ -56,4 +54,4 @@ export default class extends React.Component {
       );
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 1a0214e..95a7750 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,14 @@
   },
   "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
   "dependencies": {
-    "lodash": "^3.10.0",
+    "lodash": "^3.10.1",
     "moment": "^2.10.3",
-    "react": "^0.13.3",
-    "react-document-title": "^1.0.2",
-    "react-responsive-grid": "^0.2.0",
-    "react-router": "^0.13.3",
-    "typography": "^0.3.6",
-    "underscore.string": "^3.1.1"
+    "react": "^0.14.3",
+    "react-document-title": "^2.0.1",
+    "react-dom": "^0.14.3",
+    "react-responsive-grid": "^0.2.1",
+    "react-router": "^0.13.5",
+    "typography": "^0.6.2",
+    "underscore.string": "^3.2.2"
   }
 }
diff --git a/pages/_template.jsx b/pages/_template.jsx
index 4435773..8f13d4d 100644
--- a/pages/_template.jsx
+++ b/pages/_template.jsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import { RouteHandler, Link } from 'react-router';
 import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
-import Typography from 'typography';
 import { link } from 'gatsby-helpers';
-
-let typography = new Typography();
-let rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
+import { rhythm, fontSizeToMS } from 'utils/typography'
 
 import '../css/styles.css';
 
@@ -55,7 +52,7 @@ export default class extends React.Component {
         }}
       >
         {header}
-        <RouteHandler typography={typography} {...this.props}/>
+        <RouteHandler {...this.props}/>
       </Container>
     );
   }
diff --git a/pages/index.jsx b/pages/index.jsx
index 41a2d2f..faee628 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -3,6 +3,7 @@ import { RouteHandler, Link } from 'react-router';
 import sortBy from 'lodash/collection/sortBy';
 import DocumentTitle from 'react-document-title';
 import { link } from 'gatsby-helpers';
+import { rhythm, fontSizeToMS } from 'utils/typography'
 
 export default class extends React.Component {
   static data() {
@@ -11,8 +12,7 @@ export default class extends React.Component {
     }
   }
   render() {
-    let i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
-    rhythm = this.props.typography.rhythm;
+    let i, len, page, pageLinks, ref, ref1, ref2, title;
     pageLinks = [];
     ref = sortBy(this.props.pages, (page) => {
       let ref;
diff --git a/utils/typography.js b/utils/typography.js
new file mode 100644
index 0000000..9f62b24
--- /dev/null
+++ b/utils/typography.js
@@ -0,0 +1,20 @@
+import Typography from 'typography';
+
+const options = {
+  baseFontSize: '18px',
+  baseLineHeight: '27px',
+  modularScales: [
+    {
+      "scale": "minor third"
+    }
+  ]
+}
+
+const typography = new Typography(options)
+
+// Hot reload typography in development.
+if (process.env.NODE_ENV !== "production") {
+  typography.injectStyles()
+}
+
+export default typography
diff --git a/wrappers/md.jsx b/wrappers/md.jsx
index 547488e..d4e468c 100644
--- a/wrappers/md.jsx
+++ b/wrappers/md.jsx
@@ -3,13 +3,13 @@ import moment from 'moment';
 import DocumentTitle from 'react-document-title';
 import { link } from 'gatsby-helpers';
 import ReadNext from '../components/ReadNext';
+import { rhythm, fontSizeToMS } from 'utils/typography'
 
 import '../css/zenburn.css';
 
 module.exports = React.createClass({
   render: function() {
-    var post, rhythm;
-    rhythm = this.props.typography.rhythm;
+    var post
     post = this.props.page.data;
 
     return (