Add many more examples to make this starter a kitchen sink starter.

css/tomorrow.css

@@ -0,0 +1,45 @@
+/* Tomorrow Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+.tomorrow-comment, pre .comment, pre .title {
+  color: #8e908c;
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: #c82829;
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: #f5871f;
+}
+
+.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
+  color: #eab700;
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: #718c00;
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: #3e999f;
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: #4271ae;
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: #8959a8;
+}
+
+pre code {
+  display: block;
+  background: white;
+  color: #4d4d4c;
+  font-family: Menlo, Monaco, Consolas, monospace;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  padding: 10px;
+}

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

package.json

@@ -19,6 +19,7 @@
     "react-responsive-grid": "^0.3.0",
     "react-router": "^2.0.0",
     "safe-access": "^0.1.0",
+    "toml-js": "0.0.8",
     "typography": "^0.7.0"
   },
   "devDependencies": {

pages/404.md

@@ -0,0 +1,3 @@
+# NOT FOUND
+
+You just hit a route that doesn't exist... the sadness.

pages/coffee-react.cjsx

@@ -0,0 +1,20 @@
+React = require 'react'
+
+module.exports = React.createClass
+  getInitialState: ->
+    count: 0
+
+  handlePlusClick: ->
+    @setState count: @state.count + 1
+
+  handleMinusClick: ->
+    @setState count: @state.count - 1
+
+  render: ->
+    <div>
+      <h1>Coffeescript React.js components</h1>
+      <h3>Counter example</h3>
+      <p>{@state.count}</p>
+      <button onClick={@handlePlusClick}>+</button>
+      <button onClick={@handleMinusClick}>-</button>
+    </div>

pages/example.css

@@ -0,0 +1,27 @@
+:root {
+  --color: pink;
+}
+
+.postcss-nav-example {
+  & ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & li { display: inline-block; }
+
+  & a {
+    background: var(--color);
+    border-radius: 3px;
+    display: block;
+    margin-right: 6px;
+    padding: 3px 9px;
+    text-decoration: none;
+  }
+}
+
+.the-postcss-class {
+  text-decoration: underline;
+}
+

pages/example.less

@@ -0,0 +1,31 @@
+/* Variables */
+@color: pink;
+
+/* Mixin */
+.border-radius (@radius: 5px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+.less-nav-example {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li { display: inline-block; }
+
+  a {
+    background: @color;
+    .border-radius(3px);
+    display: block;
+    margin-right: 6px;
+    padding: 3px 9px;
+    text-decoration: none;
+  }
+}
+.the-less-class {
+  text-decoration: underline;
+}

pages/example.scss

@@ -0,0 +1,31 @@
+$color: pink;
+
+@mixin borderRadius ($radius: 5px) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+.sass-nav-example {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li { display: inline-block; }
+
+  a {
+    @include borderRadius(3px);
+
+    background: $color;
+    display: block;
+    margin-right: 6px;
+    padding: 3px 9px;
+    text-decoration: none;
+  }
+}
+
+.the-sass-class {
+  text-decoration: underline;
+}

pages/html.html

@@ -0,0 +1,5 @@
+<!--
+title: HTML <u>still</u> ROCKS!
+-->
+<p>You can also author content in raw HTML if that's your flavoring. Gatsby handles
+that just fine.</p>

pages/index.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Link } from 'react-router'
+// Styles for highlighted code blocks.
+import 'css/zenburn.css'
+
+export default class Sass extends React.Component {
+  render () {
+    return (
+      <div>
+        <h1>
+          Hi people
+        </h1>
+        <p>Welcome to your new Gatsby site</p>
+        <h3>Below are some pages showing different capabilities built-in to Gatsby</h3>
+        <h4>Supported file types</h4>
+        <ul>
+          <li>
+            <Link to="/markdown/">Markdown</Link>
+          </li>
+          <li>
+            <Link to="/react/">JSX (React components)</Link>
+          </li>
+          <li>
+            <Link to="/coffee-react/">CJSX (Coffeescript React components)</Link>
+          </li>
+          <li>
+            <Link to="/html/">HTML</Link>
+          </li>
+          <li>
+            <Link to="/json/">JSON</Link>
+          </li>
+          <li>
+            <Link to="/yaml/">YAML</Link>
+          </li>
+          <li>
+            <Link to="/toml/">TOML</Link>
+          </li>
+        </ul>
+        <h4>Supported CSS Preprocessors</h4>
+        <ul>
+          <li>
+            <Link to="/postcss/">PostCSS</Link>
+          </li>
+          <li>
+            <Link to="/sass/">Sass</Link>
+          </li>
+          <li>
+            <Link to="/less/">Less</Link>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}

pages/json.json

@@ -0,0 +1,8 @@
+{
+  "title": "Create pages from JSON!",
+  "imagine": "What you can do with raw data",
+  "integrationsWithOtherSystems": {
+    "possible": true,
+    "awesome": true
+  }
+}