Add post written in javascript to demonstrate new js frontmatter capability

package.json

@@ -7,9 +7,10 @@
     "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
   },
   "dependencies": {
-    "gatsby": "^0.12.20",
+    "gatsby": "^0.12.22",
     "lodash": "^4.17.2",
-    "moment": "^2.17.0",
+    "moment": "^2.17.1",
+    "react-dates": "^4.1.0",
     "react-helmet": "^3.2.2",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.15.0",

pages/2016-12-9-react-component-post/index.js

@@ -0,0 +1,28 @@
+const React = require('react')
+const DatePicker = require('./single-date-picker')
+require('react-dates/css/variables.scss')
+require('react-dates/css/styles.scss')
+
+class Post extends React.Component {
+  render () {
+    return (
+      <div>
+        <h1>{this.props.route.page.data.title}</h1>
+        <p>Word to the javascript yos</p>
+        <p>This is the best I think</p>
+        <p>Cause you can now do stuff like... embed a date picker in your blog posts!</p>
+        <DatePicker />
+        <br />
+        <br />
+        <p>(No doubt a secret dream of yours)</p>
+      </div>
+    )
+  }
+}
+
+export default Post
+
+exports.data = {
+  title: "A post written in Javascript!",
+  date: "2016-12-09T12:40:32.169Z",
+}

pages/2016-12-9-react-component-post/single-date-picker.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
+
+class SingleDatePickerWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false,
+      date: null,
+    };
+
+    this.onDateChange = this.onDateChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
+  }
+
+  onDateChange(date) {
+    this.setState({ date });
+  }
+
+  onFocusChange({ focused }) {
+    this.setState({ focused });
+  }
+
+  render() {
+    const { focused, date } = this.state;
+
+    return (
+      <SingleDatePicker
+        {...this.props}
+        id="date_input"
+        date={date}
+        focused={focused}
+        onDateChange={this.onDateChange}
+        onFocusChange={this.onFocusChange}
+      />
+    );
+  }
+}
+
+export default SingleDatePickerWrapper;

pages/index.js

@@ -17,7 +17,8 @@ class BlogIndex extends React.Component {
       access(page, 'data.date')
     ).reverse()
     sortedPages.forEach((page) => {
-      if (access(page, 'file.ext') === 'md' && !include(page.path, '/404')) {
+      // Posts are those with md extension that are not 404 pages OR have a date (meaning they're a react component post).
+      if (access(page, 'file.ext') === 'md' && !include(page.path, '/404') || access(page, 'data.date')) {
         const title = access(page, 'data.title') || page.path
         pageLinks.push(
           <li