Basics are in place

.gitignore

@@ -0,0 +1 @@
+node_modules/

app.coffee

@@ -0,0 +1,2 @@
+exports.context = ->
+  return require.context './pages', true

components/ReadNext.cjsx

@@ -0,0 +1,50 @@
+React = require 'react'
+Router = require 'react-router'
+{Link} = Router
+prune = require 'underscore.string/prune'
+includes = require 'underscore.string/include'
+find = require 'lodash/collection/find'
+
+module.exports = React.createClass
+
+  render: ->
+    {rhythm, fontSizeToMS} = @props.typography
+    readNext = @props.post.readNext
+    if readNext?
+      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
+    unless nextPost
+      <noscript />
+    else
+      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
+
+      # Create prunned version of the body.
+      html = nextPost.data.body
+      body = prune(html.replace(/<[^>]*>/g, ''), 200)
+
+      <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>
+

config.toml

@@ -0,0 +1,2 @@
+blogTitle = "My Awesome Blog"
+authorName = "Kyle Mathews"

css/styles.css

@@ -0,0 +1,7 @@
+blockquote {
+  padding-left: 16.875px;
+  border-left: 6px solid lightgray;
+  margin-left: 10.875px;
+  margin-right: 0;
+  padding-right: 0;
+}

css/zenburn.css

@@ -0,0 +1,150 @@
+/*
+
+Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
+based on dark.css by Ivan Sagalaev
+
+*/
+
+.markdown pre {
+  display: block;
+  background: #3F3F3F;
+  color: #DCDCDC;
+  overflow-y: hidden;
+}
+
+.markdown pre code {
+  background: none;
+  border: none;
+  border-radius: 3px;
+  display: inline-block;
+  overflow: inherit;
+  padding: 1.58333rem;
+  white-space: inherit;
+  word-wrap: normal;
+}
+
+code {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -hp-pre-wrap;
+  word-wrap: break-word;
+  background: #e5e5e5;
+  border: 1px solid #cccccc;
+  display: inline;
+  font-family: Inconsolata, monospace, serif;
+  max-width: 100%;
+  overflow: auto;
+  padding: 0 0.1625rem;
+}
+
+.hljs-keyword,
+.hljs-tag,
+.css .hljs-class,
+.css .hljs-id,
+.lisp .hljs-title,
+.nginx .hljs-title,
+.hljs-request,
+.hljs-status,
+.clojure .hljs-attribute {
+  color: #E3CEAB;
+}
+
+.django .hljs-template_tag,
+.django .hljs-variable,
+.django .hljs-filter .hljs-argument {
+  color: #DCDCDC;
+}
+
+.hljs-number,
+.hljs-date {
+  color: #8CD0D3;
+}
+
+.dos .hljs-envvar,
+.dos .hljs-stream,
+.hljs-variable,
+.apache .hljs-sqbracket {
+  color: #EFDCBC;
+}
+
+.dos .hljs-flow,
+.diff .hljs-change,
+.python .exception,
+.python .hljs-built_in,
+.hljs-literal,
+.tex .hljs-special {
+  color: #EFEFAF;
+}
+
+.diff .hljs-chunk,
+.hljs-subst {
+  color: #8F8F8F;
+}
+
+.dos .hljs-keyword,
+.python .hljs-decorator,
+.hljs-title,
+.haskell .hljs-type,
+.diff .hljs-header,
+.ruby .hljs-class .hljs-parent,
+.apache .hljs-tag,
+.nginx .hljs-built_in,
+.tex .hljs-command,
+.hljs-prompt {
+    color: #efef8f;
+}
+
+.dos .hljs-winutils,
+.ruby .hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.ruby .hljs-string {
+  color: #DCA3A3;
+}
+
+.diff .hljs-deletion,
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.sql .hljs-aggregate,
+.hljs-javadoc,
+.smalltalk .hljs-class,
+.smalltalk .hljs-localvars,
+.smalltalk .hljs-array,
+.css .hljs-rules .hljs-value,
+.hljs-attr_selector,
+.hljs-pseudo,
+.apache .hljs-cbracket,
+.tex .hljs-formula,
+.coffeescript .hljs-attribute {
+  color: #CC9393;
+}
+
+.hljs-shebang,
+.diff .hljs-addition,
+.hljs-comment,
+.java .hljs-annotation,
+.hljs-template_comment,
+.hljs-pi,
+.hljs-doctype {
+  color: #7F9F7F;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+  opacity: 0.5;
+}
+

html.cjsx

@@ -0,0 +1,41 @@
+React = require 'react'
+Typography = require 'typography'
+
+typography = new Typography()
+{TypographyStyle} = typography
+
+module.exports = React.createClass
+  getDefaultProps: ->
+    title: "Default title"
+    body: ""
+
+  render: ->
+    <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>{@props.title}</title>
+        <link rel="shortcut icon" href={@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: @props.body}} />
+        <script src="/bundle.js"/>
+      </body>
+    </html>

pages/2015-05-01-hello-world/index.md

@@ -0,0 +1,17 @@
+---
+title: Hello World
+date: "2015-05-01T22:12:03.284Z"
+layout: post
+readNext: "/my-second-post/"
+path: "/hello-world/"
+---
+
+This is my first post on my new fake blog! How exciting!
+
+I'm sure I'll write a lot more interesting things in the future.
+
+Oh, and here's a great quote from this Wikipedia on [duck eggs](http://en.wikipedia.org/wiki/Salted_duck_egg).
+
+>A salted duck egg is a Chinese preserved food product made by soaking duck eggs in brine, or packing each egg in damp, salted charcoal. In Asian supermarkets, these eggs are sometimes sold covered in a thick layer of salted charcoal paste. The eggs may also be sold with the salted paste removed, wrapped in plastic, and vacuum packed. From the salt curing process, the salted duck eggs have a briny aroma, a gelatin-like egg white and a firm-textured, round yolk that is bright orange-red in color.
+
+![Chinese Salty Egg](http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Salty_egg.JPG/270px-Salty_egg.JPG)

pages/2015-05-06-my-second-post/index.md

@@ -0,0 +1,11 @@
+---
+title: My Second Post!
+date: "2015-05-06T23:46:37.121Z"
+layout: post
+readNext: "/hi-folks/"
+path: "/my-second-post/"
+---
+
+Wow! I love blogging so much already. Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."?
+
+Yeah, I didn't either.

pages/2015-05-28-hi-folks/index.md

@@ -0,0 +1,19 @@
+---
+title: New Beginnings
+date: "2015-05-28T22:40:32.169Z"
+layout: post
+readNext: "/hosting-static-sites-with-docker-and-nginx/"
+path: "/hi-folks/"
+---
+
+This post is going to be a little hard for those that don't speak latin to read:
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel neque dignissim mi maximus interdum. Cras dictum quam et ex molestie facilisis. Proin dapibus sed sapien nec gravida. Praesent at leo ut erat varius rhoncus at non mi. Quisque cursus non leo et varius. Maecenas porttitor scelerisque sapien at venenatis. Proin pellentesque gravida elementum. Nam eget porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec commodo lacus, eu mollis nisi. Nullam felis mi, tempus ac ipsum a, venenatis blandit magna. Sed mattis magna est, quis tincidunt massa aliquam vitae. Ut in ipsum blandit, ultrices lacus a, condimentum nibh. Sed commodo, lorem eget interdum molestie, lacus nisi lacinia velit, tempus commodo lacus erat porttitor dolor.
+
+Phasellus vitae ante justo. Fusce dui elit, finibus non posuere sed, ullamcorper at odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque molestie lorem dolor, eget tincidunt ligula suscipit sit amet. Maecenas tempor nulla orci, sed scelerisque massa convallis id. Fusce iaculis nibh et lectus bibendum viverra. Nulla volutpat vehicula tortor non cursus. Maecenas vulputate mi nec accumsan ultricies. Praesent vitae tellus ligula. Praesent placerat fringilla purus, ac fermentum ipsum faucibus sed. Fusce semper, sapien hendrerit fringilla sagittis, lacus felis accumsan tellus, ac mollis ex arcu vitae lorem. Duis vitae semper felis. Duis consectetur, diam id laoreet suscipit, felis felis imperdiet sem, vel posuere leo ligula nec sapien. Maecenas at imperdiet nulla. Quisque quam nibh, feugiat vitae rhoncus ac, hendrerit eu quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+Nullam vehicula lorem sed felis rutrum gravida. Nam mattis cursus lacinia. Cras sit amet interdum elit. Morbi viverra, est a tincidunt facilisis, est est maximus urna, id rhoncus mi metus et lacus. Pellentesque finibus ex vel nulla fermentum tempus. Nunc vel lorem enim. Sed varius scelerisque nulla, nec ultrices ligula gravida eu. Curabitur eu turpis sit amet nisl vehicula tempor ultrices eu lacus. Curabitur malesuada nulla neque. Aenean mattis lectus ex, molestie ultricies elit fringilla eget. Quisque iaculis volutpat nisl, vitae lobortis ipsum elementum sed. Nulla facilisi. Maecenas cursus turpis ac lacus efficitur, non bibendum ligula consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris accumsan placerat felis, at bibendum ante.
+
+Quisque varius dui vel commodo lobortis. Vestibulum eu metus vel dui lobortis volutpat. Cras vitae neque ornare, vehicula urna et, efficitur dolor. Nunc congue euismod leo non rhoncus. Nulla mollis libero a ullamcorper placerat. Morbi bibendum viverra orci in auctor. Donec in est varius, hendrerit risus vitae, commodo purus. Praesent eget rhoncus ligula. Suspendisse quis ultricies ligula. Nullam tincidunt rutrum nisl eget luctus. Phasellus eget nulla semper, varius ligula a, gravida urna. Etiam tempor feugiat elit eu cursus. Donec tristique ligula a aliquam tempor.
+
+Proin nec nunc tellus. Donec sapien leo, ornare quis condimentum a, euismod sit amet augue. Aliquam tincidunt mauris at arcu suscipit, quis scelerisque justo rhoncus. Vestibulum lobortis dui at odio lacinia mattis. Praesent nunc urna, bibendum ut dui eget, consequat suscipit leo. Curabitur auctor vel dui fermentum auctor. Sed ultrices ligula mauris, id blandit sapien ultrices id. Morbi volutpat tortor quis ex convallis aliquam. Nunc eleifend risus eget dui condimentum scelerisque.

pages/app.cjsx

@@ -0,0 +1,57 @@
+React = require 'react'
+Router = require 'react-router'
+{RouteHandler, Link} = Router
+{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
+Typography = require 'typography'
+require '../css/styles.css'
+
+typography = Typography()
+{rhythm, fontSizeToMS} = typography
+
+module.exports = React.createClass
+  render: ->
+    if @props.state.path is "/"
+      header = (
+        <h1
+          style={{
+            fontSize: fontSizeToMS(2.5).fontSize
+            lineHeight: fontSizeToMS(2.5).lineHeight
+            marginBottom: rhythm(1.5)
+          }}
+        >
+          <Link
+            style={{
+              textDecoration: 'none'
+              color: 'inherit'
+            }}
+            to="/"
+          >
+            {@props.config.blogTitle}
+          </Link>
+        </h1>
+      )
+    else
+      header = (
+        <h3>
+          <Link
+            style={{
+              textDecoration: 'none'
+              color: 'inherit'
+            }}
+            to="/"
+          >
+            {@props.config.blogTitle}
+          </Link>
+        </h3>
+      )
+
+    <Container
+      style={{
+        maxWidth: rhythm(24)
+        padding: "#{rhythm(2)} #{rhythm(1)}"
+      }}
+    >
+      {header}
+      <RouteHandler typography={typography} {...@props}/>
+    </Container>
+

pages/index.cjsx

@@ -0,0 +1,49 @@
+React = require 'react'
+Router = require 'react-router'
+{RouteHandler, Link} = Router
+sortBy = require 'lodash/collection/sortby'
+
+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 "/" and not page.data?.draft
+        pageLinks.push (
+          <li
+            key={page.path}
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link to={page.path}>{title}</Link>
+          </li>
+        )
+
+    <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>

pages/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

wrappers/html.cjsx

@@ -0,0 +1,11 @@
+React = require 'react'
+
+module.exports = React.createClass
+  displayName: "HTMLWrapper"
+
+  render: ->
+    #html = require "../" + @props.page.requirePath
+    console.log @props
+    html = "<div>fix me</div>"
+    <div dangerouslySetInnerHTML={{__html: html}}/>
+

wrappers/md.cjsx

@@ -0,0 +1,47 @@
+React = require 'react'
+require '../css/zenburn.css'
+moment = require 'moment'
+DocumentTitle = require 'react-document-title'
+
+ReadNext = require '../components/ReadNext'
+
+module.exports = React.createClass
+  displayName: "MarkdownWrapper"
+
+  render: ->
+    {rhythm} = @props.typography
+    post = @props.page.data
+
+    <DocumentTitle title="Name of blog | #{post.title}">
+      <div className="markdown">
+        <h1>{post.title}</h1>
+        <div dangerouslySetInnerHTML={{__html: post.body}}/>
+        <em
+          style={{
+            display: 'block'
+            marginBottom: rhythm(2)
+          }}
+        >
+          Posted {moment(post.date).format('MMMM D, YYYY')}
+        </em>
+        <hr
+          style={{
+            marginBottom: rhythm(2)
+          }}
+        />
+        <ReadNext post={post} {...@props}/>
+        <p>
+          <img
+            src="/kyle-round-small-pantheon.jpg"
+            style={{
+              float: 'left'
+              marginRight: rhythm(1/4)
+              marginBottom: 0
+              width: rhythm(2)
+              height: rhythm(2)
+            }}
+          />
+          <strong>{@props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
+        </p>
+      </div>
+    </DocumentTitle>