Converted index to ES6

pages/index.cjsx

@@ -1,53 +0,0 @@
-React = require 'react'
-Router = require 'react-router'
-{RouteHandler, Link} = Router
-sortBy = require 'lodash/collection/sortBy'
-DocumentTitle = require 'react-document-title'
-{link} = require 'gatsby-helpers'
-
-module.exports = React.createClass
-  statics:
-    data: ->
-      yo: true
-
-  render: ->
-    {rhythm} = @props.typography
-    pageLinks = []
-    for page in sortBy(@props.pages, (page) -> page.data?.date).reverse()
-      title = page.data?.title || page.path
-      if page.path isnt link("/") and not page.data?.draft
-        pageLinks.push (
-          <li
-            key={page.path}
-            style={{
-              marginBottom: rhythm(1/4)
-            }}
-          >
-            <Link to={page.path}>{title}</Link>
-          </li>
-        )
-
-    <DocumentTitle title="#{@props.config.blogTitle}">
-      <div>
-        <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>{@props.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>
-      </div>
-    </DocumentTitle>

pages/index.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { RouteHandler, Link } from 'react-router';
+import sortBy from 'lodash/collection/sortBy';
+import DocumentTitle from 'react-document-title';
+import { link } from 'gatsby-helpers';
+
+module.exports = React.createClass({
+  statics: {
+    data: function() {
+      return {
+        yo: true
+      };
+    }
+  },
+  render: function() {
+    var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
+    rhythm = this.props.typography.rhythm;
+    pageLinks = [];
+    ref = sortBy(this.props.pages, function(page) {
+      var ref;
+      return (ref = page.data) != null ? ref.date : void 0;
+    }).reverse();
+    for (i = 0, len = ref.length; i < len; i++) {
+      page = ref[i];
+      title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
+      if (page.path !== link("/") && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
+        pageLinks.push(
+          <li
+            key={page.path}
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link to={page.path}>{title}</Link>
+          </li>
+        );
+      }
+    }
+    return (
+      <DocumentTitle title={this.props.config.blogTitle}>
+        <div>
+          <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>{this.props.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>
+        </div>
+      </DocumentTitle>
+    );
+  }
+});