Update packages + update Typography setup

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 {
       );
     }
   }
-}
+}

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"
   }
 }

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>
     );
   }

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;

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

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 (