gatsbyjs · KyleAMathews · Sep 11, 2015 · Sep 10, 2015 · Sep 10, 2015 · Sep 10, 2015
diff --git a/app.coffee b/app.coffee
diff --git a/app.js b/app.js
@@ -0,0 +1,11 @@
+exports.loadContext = function(callback) {
+  var context;
+  context = require.context('./pages', true);
+  if (module.hot) {
+    module.hot.accept(context.id, function() {
+      context = require.context('./pages', true);
+      return callback(context);
+    });
+  }
+  return callback(context);
+};
diff --git a/components/ReadNext.cjsx b/components/ReadNext.cjsx
diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { prune, include as includes } from 'underscore.string';
+import find from 'lodash/collection/find';
+
+module.exports = React.createClass({
+  render: function() {
+    var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
+    ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
+    readNext = this.props.post.readNext;
+    if (readNext != null) {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+    }
+    if (!nextPost) {
+      return React.createElement("noscript", null);
+    } else {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+      // Create pruned version of the body.
+      html = nextPost.data.body;
+      body = prune(html.replace(/<[^>]*>/g, ''), 200);
+
+      return (
+        <div>
+          <h6
+            style={{
+              margin: 0,
+              fontSize: fontSizeToMS(-1).fontSize,
+              lineHeight: fontSizeToMS(-1).lineHeight,
+              letterSpacing: -0.5
+            }}
+          >
+            READ THIS NEXT:
+          </h6>
+          <h3
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link
+              to={nextPost.path}
+              query={{readNext: true}}
+            >
+              {nextPost.data.title}
+            </Link>
+          </h3>
+          <p>{body}</p>
+          <hr />
+        </div>
+      );
+    }
+  }
+});
diff --git a/html.cjsx b/html.cjsx
diff --git a/html.jsx b/html.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import Typography from 'typography';
+import DocumentTitle from 'react-document-title';
+
+var TypographyStyle = new Typography().TypographyStyle;
+
+module.exports = React.createClass({
+  getDefaultProps: function() {
+    return {
+      body: ""
+    };
+  },
+
+  render: function() {
+    var title, urlPrefix;
+    title = DocumentTitle.rewind();
+    if (this.props.title) {
+      title = this.props.title;
+    }
+    if ((typeof __GH_PAGES__ !== "undefined" && __GH_PAGES__ !== null) && __GH_PAGES__) {
+      urlPrefix = this.props.config.ghPagesURLPrefix;
+    } else {
+      urlPrefix = "";
+    }
+
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8"/>
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
+          <meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
+          <title>{this.props.title}</title>
+          <link rel="shortcut icon" href={this.props.favicon}/>
+          <TypographyStyle/>
+          <style dangerouslySetInnerHTML={{__html:
+            `
+              body {
+                color: rgb(66,66,66);
+              }
+              h1,h2,h3,h4,h5,h6 {
+                color: rgb(44,44,44);
+              }
+              a {
+                color: rgb(42,93,173);
+                text-decoration: none;
+              }
+              a:hover {
+                text-decoration: underline;
+              }
+            `
+          }}/>
+        </head>
+        <body className="landing-page">
+          <div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
+          <script src={urlPrefix + "/bundle.js"}/>
+        </body>
+      </html>
+    );
+
+  }
+});
diff --git a/pages/_template.cjsx b/pages/_template.cjsx
diff --git a/pages/_template.jsx b/pages/_template.jsx
@@ -0,0 +1,62 @@
+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';
+
+var typography = new Typography();
+var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
+
+import '../css/styles.css';
+
+module.exports = React.createClass({
+  render: function() {
+    var header;
+    if (this.props.state.path === link('/')) {
+      header = (
+        <h1
+          style={{
+            fontSize: fontSizeToMS(2.5).fontSize,
+            lineHeight: fontSizeToMS(2.5).lineHeight,
+            marginBottom: rhythm(1.5)
+          }}
+        >
+          <Link
+            style={{
+              textDecoration: 'none',
+              color: 'inherit'
+            }}
+            to={link('/')}
+          >
+            {this.props.config.blogTitle}
+          </Link>
+        </h1>
+      );
+    } else {
+      header = (
+        <h3>
+          <Link
+            style={{
+              textDecoration: 'none',
+              color: 'inherit'
+            }}
+            to={link('/')}
+          >
+            {this.props.config.blogTitle}
+          </Link>
+        </h3>
+      );
+    }
+    return (
+      <Container
+        style={{
+          maxWidth: rhythm(24),
+          padding: `${rhythm(2)} ${rhythm(1/2)}`
+        }}
+      >
+        {header}
+        <RouteHandler typography={typography} {...this.props}/>
+      </Container>
+    );
+  }
+});