From 63523caa04628bcc0b8b34fe4f947c92f515a92f Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Fri, 25 May 2018 12:38:21 -0400
Subject: [PATCH 01/11] allow choice of syntax highlighter

---
 src/core/syntax.js                          |  8 ++++----
 src/utils/config.js                         |  7 ++++---
 themes/default/index.js                     | 14 ++++++++++++++
 themes/default/markdown/index.js            |  7 +------
 themes/default/markdown/overrides/Code.js   | 10 ++++++++--
 themes/default/markdown/overrides/Header.js | 13 ++++++++-----
 themes/default/markdown/styles.js           |  1 +
 themes/default/page/index.js                |  2 +-
 themes/default/search/index.js              |  2 +-
 9 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/core/syntax.js b/src/core/syntax.js
index fd5e318..86afe9a 100644
--- a/src/core/syntax.js
+++ b/src/core/syntax.js
@@ -7,17 +7,17 @@ module.exports = async (config) => {
   const {
     temp,
     languages,
-    theme_custom,
+    syntax,
   } = config
 
   const rsh = syspath.dirname(require.resolve('react-syntax-highlighter'))
   const langs = languages
-    .filter(lang => fs.pathExistsSync(`${rsh}/languages/prism/${lang}`))
-    .map(lang => `{ name: '${lang}', func: require('${rsh}/languages/prism/${lang}').default },`)
+    .filter(lang => fs.pathExistsSync(`${rsh}/languages/${syntax.renderer}/${lang}.js`))
+    .map(lang => `{ name: '${lang}', func: require('${rsh}/languages/${syntax.renderer}/${lang}').default },`)
     .join('\n')
 
   const content = `module.exports = {
-    theme: require('${rsh}/styles/prism/${theme_custom.syntaxTheme}').default,
+    theme: require('${rsh}/styles/${syntax.renderer}/${syntax.theme}').default,
     languages: [${langs}]
   }`
 
diff --git a/src/utils/config.js b/src/utils/config.js
index e801522..dcb1948 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -26,9 +26,10 @@ const DEFAULT_CONFIG = {
   languages: ['bash', 'json'],
   header_links: [],
   theme: 'default',
-  theme_custom: {
-    syntaxTheme: 'prism',
-    syntaxLineNumbers: false,
+  syntax: {
+    theme: 'atom-one-light',
+    renderer: 'hljs',
+    lineNumbers: true,
   },
 }
 
diff --git a/themes/default/index.js b/themes/default/index.js
index ebf28ca..1937ad0 100644
--- a/themes/default/index.js
+++ b/themes/default/index.js
@@ -2,6 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router } from 'react-router-dom'
 import { hydrate } from 'emotion'
+import { registerLanguage as registerHighlight } from 'react-syntax-highlighter/light'
+import { registerLanguage as registerPrism } from 'react-syntax-highlighter/prism-light'
+import { languages } from '@codegen/loadSyntax' // eslint-disable-line
 import history from './history'
 import App from './application'
 
@@ -15,6 +18,17 @@ const render = ReactDOM.render
 isDev && module.hot && module.hot.accept()
 _EMOTION_IDS_ && hydrate(_EMOTION_IDS_)
 
+// Ensure required languages are registered
+const renderers = {
+  hljs: registerHighlight,
+  prism: registerPrism,
+}
+
+if (window) {
+  const register = renderers[process.env.PROPS.config.syntax.renderer]
+  languages.forEach(lang => register(lang.name, lang.func))
+}
+
 render(
   <Router history={history}>
     <App {...process.env.PROPS} />
diff --git a/themes/default/markdown/index.js b/themes/default/markdown/index.js
index 9234d38..56c7af2 100644
--- a/themes/default/markdown/index.js
+++ b/themes/default/markdown/index.js
@@ -1,19 +1,14 @@
 import React from 'react'
 import Markdown from 'react-markdown'
-import { registerLanguage } from 'react-syntax-highlighter/prism-light'
-import { languages } from '@codegen/loadSyntax' // eslint-disable-line
 import { Wrapper } from './styles'
 import Code from './overrides/Code'
 import Header from './overrides/Header'
 import Link from './overrides/Link'
 
 export default function (props) {
-  languages.forEach(lang =>
-    registerLanguage(lang.name, lang.func))
-
   const options = {
     renderers: {
-      code: Code,
+      code: p => <Code {...props} {...p} />,
       link: Link,
       heading: Header,
     },
diff --git a/themes/default/markdown/overrides/Code.js b/themes/default/markdown/overrides/Code.js
index cf3c960..ed3404f 100644
--- a/themes/default/markdown/overrides/Code.js
+++ b/themes/default/markdown/overrides/Code.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import Syntax from 'react-syntax-highlighter/prism-light'
+import Highlight from 'react-syntax-highlighter/light'
+import Prism from 'react-syntax-highlighter/prism-light'
 import { theme, languages } from '@codegen/loadSyntax' // eslint-disable-line
 
 export default function (props) {
   let { language } = props
-  const { value } = props
+  const { value, renderer } = props
+  console.log(props)
 
   if (language) {
     language = language // language name aliases
@@ -18,6 +20,10 @@ export default function (props) {
     }
   }
 
+  const Syntax = renderer === 'prism'
+    ? Prism
+    : Highlight
+
   return (
     <Syntax
       style={theme}
diff --git a/themes/default/markdown/overrides/Header.js b/themes/default/markdown/overrides/Header.js
index 37802d9..8793759 100644
--- a/themes/default/markdown/overrides/Header.js
+++ b/themes/default/markdown/overrides/Header.js
@@ -33,15 +33,18 @@ const levels = {
 
 export default function (props) {
   const {
-    id,
     level = 1,
     children,
   } = props
 
-  const itemId = children[0] || id
-    .toLowerCase()
-    .split(' ')
-    .join('-')
+  // Turn headers into linkable IDs
+  const text = children[0]
+  const itemId = typeof text === 'string'
+    ? text
+      .toLowerCase()
+      .split(' ')
+      .join('-')
+    : ''
 
   return (
     <Link href={`#${itemId}`} id={itemId}>
diff --git a/themes/default/markdown/styles.js b/themes/default/markdown/styles.js
index 6b76c42..d209a03 100644
--- a/themes/default/markdown/styles.js
+++ b/themes/default/markdown/styles.js
@@ -2,6 +2,7 @@ import styled from 'react-emotion'
 
 export const Wrapper = styled('div')`
   word-wrap: break-word;
+  a { text-decoration: none }
   h1, h2, h3, h4 {
     font-weight: bold;
     text-decoration: none;
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index 6c014aa..cf5cb03 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -73,7 +73,7 @@ export default class Page extends Component {
                 : (
                   <Markdown
                     source={content || defaultContent}
-                    lineNumbers={config.theme_custom.syntaxLineNumbers}
+                    {...config.syntax}
                   />
                 )}
             </div>
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index 13224c9..f06897a 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -135,7 +135,7 @@ class Search extends Component {
           <p>
             <Highlight
               highlightClassName="highlight"
-              searchWords={query.length > 3 ? query.split(' ') : []}
+              searchWords={query.length > 2 ? query.split(' ') : []}
               autoEscape
               textToHighlight={strip(ellipsify(r.content, 400))}
             />

From d011b0fc551bba1ce78b276802b27bb00f2724bd Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Fri, 25 May 2018 14:52:01 -0400
Subject: [PATCH 02/11] add simple divider component, update markdown styling

---
 themes/default/markdown/styles.js | 13 ++++++++++---
 themes/default/sidebar/index.js   | 14 +++++++++++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/themes/default/markdown/styles.js b/themes/default/markdown/styles.js
index d209a03..bccdc62 100644
--- a/themes/default/markdown/styles.js
+++ b/themes/default/markdown/styles.js
@@ -2,11 +2,17 @@ import styled from 'react-emotion'
 
 export const Wrapper = styled('div')`
   word-wrap: break-word;
-  a { text-decoration: none }
+  color: #2f3138;
+  
+  a {
+    text-decoration: none;
+    color: #5944CC;
+  }
   h1, h2, h3, h4 {
     font-weight: bold;
     text-decoration: none;
     margin: 0;
+    color: #0D0A2B;
   }
 
   p {
@@ -39,11 +45,12 @@ export const Wrapper = styled('div')`
 
   code {
     border-radius: 4px;
-    padding: .25rem .5rem;
+    padding: .15rem .25rem;
     display: inline;
     line-height: 1.5;
     word-break: break-all;
-    background: #F4F5F6;
+    background: #EEEAFE;
+    color: #5742CA;
   }
 
   pre code {
diff --git a/themes/default/sidebar/index.js b/themes/default/sidebar/index.js
index 1bae472..67512d3 100644
--- a/themes/default/sidebar/index.js
+++ b/themes/default/sidebar/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { withRouter, NavLink } from 'react-router-dom'
+import styled from 'react-emotion'
 import { Reveal } from '@timberio/ui'
 import Logo from '../logo'
 import IconHamburger from '../icons/hamburger'
@@ -18,6 +19,15 @@ import {
   Callout,
 } from './styles'
 
+const Divider = styled('div')`
+  border-bottom: 1px solid #dfe2e6;
+  margin: .5rem 1rem .5rem 0;
+`
+
+const componentMap = {
+  Divider
+}
+
 class Sidebar extends Component {
   static propTypes = {
     manifest: PropTypes.object,
@@ -50,9 +60,7 @@ class Sidebar extends Component {
   renderTrigger = ({ title, url, component }) => {
     // @TODO: custom components
     if (component) {
-      // return (
-      //   <div>{`<${component} />`}</div>
-      // )
+      return React.createElement(componentMap[component])
     }
 
     if (!url) {

From 22dfa303b1d77688a8537f5e8ef20c7782dddacb Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 12:00:30 -0400
Subject: [PATCH 03/11] update search styles, add icons, responsive widths

---
 package.json                              |   3 +
 src/core/output.js                        |   6 +-
 src/core/socket.js                        |   6 +-
 src/utils/config.js                       |   2 +
 themes/default/application/styles.js      |  12 +-
 themes/default/components/container.js    |   6 +
 themes/default/loading/index.js           | 137 +++++++++++++++++++++-
 themes/default/loading/styles.js          |  40 +------
 themes/default/logo/styles.js             |   4 +-
 themes/default/markdown/overrides/Code.js |   1 -
 themes/default/markdown/styles.js         |   5 +
 themes/default/page/index.js              |  86 +++++++++++---
 themes/default/page/styles.js             |  53 ++++++++-
 themes/default/routes.js                  |   2 +-
 themes/default/search/index.js            |  22 ++--
 themes/default/search/styles.js           |   7 +-
 themes/default/sidebar/styles.js          |   9 +-
 themes/default/utils/index.js             |   9 ++
 yarn.lock                                 | 120 ++++++++++++++++++-
 19 files changed, 439 insertions(+), 91 deletions(-)
 create mode 100644 themes/default/components/container.js
 create mode 100644 themes/default/utils/index.js

diff --git a/package.json b/package.json
index b8ecdaa..ec870c8 100644
--- a/package.json
+++ b/package.json
@@ -76,13 +76,16 @@
 		"history": "^4.7.2",
 		"html-minifier": "^3.5.16",
 		"js-search": "^1.4.2",
+		"markdown-toc": "^1.2.0",
 		"minimist": "^1.2.0",
 		"ncp": "^2.0.0",
 		"progress": "^2.0.0",
 		"prop-types": "^15.6.1",
 		"react": "^16.4.0",
+		"react-content-loader": "^3.1.2",
 		"react-dom": "^16.4.0",
 		"react-emotion": "^9.1.3",
+		"react-feather": "^1.1.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.11.0",
 		"react-markdown": "^3.3.2",
diff --git a/src/core/output.js b/src/core/output.js
index ac5b28a..81897bd 100644
--- a/src/core/output.js
+++ b/src/core/output.js
@@ -1,5 +1,6 @@
 const fs = require('fs-extra')
 const syspath = require('path')
+const toc = require('markdown-toc')
 const { generateDatabase } = require('./database')
 const { templateForProduction } = require('./template')
 const { getContent } = require('./filesystem')
@@ -19,7 +20,10 @@ module.exports = async (entrypoints, props) => {
       const outputJson = syspath.join(item.outputDir, 'index.json')
 
       await fs.outputFile(outputHtml, template)
-      await fs.outputJson(outputJson, { content: item.content })
+      await fs.outputJson(outputJson, {
+        content: item.content,
+        toc: toc(item.content).json
+      })
     }
 
     if (items) {
diff --git a/src/core/socket.js b/src/core/socket.js
index 234b6b5..dd1dd6c 100644
--- a/src/core/socket.js
+++ b/src/core/socket.js
@@ -1,5 +1,6 @@
 const fs = require('fs')
 const WebSocket = require('ws')
+const toc = require('markdown-toc')
 const { getContent } = require('./filesystem')
 
 module.exports = (server) => {
@@ -13,7 +14,10 @@ module.exports = (server) => {
     client.on('message', file => {
       const send = async () => {
         const content = await getContent(file)
-        client.send(content)
+        client.send(JSON.stringify({
+          content,
+          toc: toc(content).json,
+        }))
       }
 
       send()
diff --git a/src/utils/config.js b/src/utils/config.js
index dcb1948..4cf4e45 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -26,6 +26,8 @@ const DEFAULT_CONFIG = {
   languages: ['bash', 'json'],
   header_links: [],
   theme: 'default',
+  prefixTitles: true,
+  tableOfContents: true,
   syntax: {
     theme: 'atom-one-light',
     renderer: 'hljs',
diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index 5efe4da..6943087 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -37,9 +37,19 @@ export const WrapperNav = styled('nav')`
   flex: 1;
   background: linear-gradient(90deg, #F0F2F4 0%, #F5F7F9 100%);
   border-right: 1px solid #E6E9EB;
-  min-width: 250px;
   text-align: right;
   overflow: auto;
+
+  @media (min-width: 850px) {
+    min-width: 270px;
+    max-width: 270px;
+  }
+
+  @media (min-width: 1440px) {
+    min-width: initial;
+    max-width: initial;
+  }
+
   @media (max-width: 850px) {
     flex: 0 auto;
     overflow: hidden;
diff --git a/themes/default/components/container.js b/themes/default/components/container.js
new file mode 100644
index 0000000..cdbb4e1
--- /dev/null
+++ b/themes/default/components/container.js
@@ -0,0 +1,6 @@
+import styled from 'react-emotion'
+
+export default styled('div')`
+  width: 1024px;
+  margin: 0 auto;
+`
diff --git a/themes/default/loading/index.js b/themes/default/loading/index.js
index 08f36c3..ce87c7d 100644
--- a/themes/default/loading/index.js
+++ b/themes/default/loading/index.js
@@ -1,14 +1,141 @@
 import React from 'react'
+import ContentLoader from 'react-content-loader'
 import { Wrapper } from './styles'
 
+// @TODO: Make this a little more responsive by passing in 400 for the height
+// on smaller screens
 export default function (props) {
   return (
     <Wrapper>
-      <div />
-      <div />
-      <div />
-      <div />
-      <div />
+      <ContentLoader
+        height={160}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
+        <rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
+        <rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
+      <ContentLoader
+        height={160}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
+        <rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
+        <rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
+      <ContentLoader
+        height={140}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" /> 
+        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" /> 
+        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" /> 
+        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" /> 
+        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" /> 
+        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" /> 
+        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
+      <ContentLoader
+        height={160}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
+        <rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
+        <rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
+      <ContentLoader
+        height={140}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" /> 
+        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" /> 
+        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" /> 
+        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" /> 
+        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" /> 
+        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" /> 
+        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
+      <ContentLoader
+        height={160}
+        width={800}
+        speed={1}
+        primaryColor="#F4F5F6"
+        secondaryColor="#ececf1"
+        {...props}
+      >
+        <rect x="0" y="0" rx="3" ry="3" width="10%" height="13" />
+        <rect x="12%" y="0" rx="3" ry="3" width="25%" height="13" />
+        <rect x="0" y="30" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="30" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="30" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="60" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="60" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="60" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="90" rx="3" ry="3" width="30%" height="10" />
+        <rect x="32%" y="90" rx="3" ry="3" width="55%" height="10" />
+        <rect x="89%" y="90" rx="3" ry="3" width="10%" height="10" />
+        <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
+      </ContentLoader>
     </Wrapper>
   )
 }
+
+// <rect x="15" y="20" rx="3" ry="3" width="130" height="10" /> 
+//         <rect x="155" y="20" rx="3" ry="3" width="130" height="10" /> 
+//         <rect x="15" y="40" rx="3" ry="3" width="90" height="10" /> 
+//         <rect x="115" y="40" rx="3" ry="3" width="60" height="10" /> 
+//         <rect x="185" y="40" rx="3" ry="3" width="60" height="10" /> 
+//         <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
\ No newline at end of file
diff --git a/themes/default/loading/styles.js b/themes/default/loading/styles.js
index d7bb81c..bcedcdf 100644
--- a/themes/default/loading/styles.js
+++ b/themes/default/loading/styles.js
@@ -1,40 +1,4 @@
-import styled, { keyframes } from 'react-emotion'
-
-const stretch = keyframes`
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1.0);
-  }
-`
+import styled from 'react-emotion'
 
 export const Wrapper = styled('div')`
-    width: 50px;
-    height: 40px;
-    text-align: center;
-    font-size: 10px;
-    div {
-      background: #E6E9EB;
-      height: 100%;
-      width: 5px;
-      display: inline-block;
-      animation: ${stretch} 1.2s infinite ease-in-out;
-      margin: 0 1px;
-      &:nth-child(2) {
-        animation-delay: -1.1s;
-      }
-      &:nth-child(3) {
-        animation-delay: -1.0s;
-      }
-      &:nth-child(4) {
-        animation-delay: -0.9s;
-      }
-      &:nth-child(5) {
-        animation-delay: -0.8s;
-      }
-    }
-  }),
-`
+`
\ No newline at end of file
diff --git a/themes/default/logo/styles.js b/themes/default/logo/styles.js
index 1fd2047..1bdfbb4 100644
--- a/themes/default/logo/styles.js
+++ b/themes/default/logo/styles.js
@@ -7,11 +7,9 @@ export const Wrapper = styled('div')`
 `
 
 export const CustomLogo = styled('div')`
-  padding: 30px;
   img {
     display: block;
-    width: 100%;
-    height: 100%;
+    height: 35px;
   }
 `
 
diff --git a/themes/default/markdown/overrides/Code.js b/themes/default/markdown/overrides/Code.js
index ed3404f..f12b993 100644
--- a/themes/default/markdown/overrides/Code.js
+++ b/themes/default/markdown/overrides/Code.js
@@ -6,7 +6,6 @@ import { theme, languages } from '@codegen/loadSyntax' // eslint-disable-line
 export default function (props) {
   let { language } = props
   const { value, renderer } = props
-  console.log(props)
 
   if (language) {
     language = language // language name aliases
diff --git a/themes/default/markdown/styles.js b/themes/default/markdown/styles.js
index bccdc62..4fe946f 100644
--- a/themes/default/markdown/styles.js
+++ b/themes/default/markdown/styles.js
@@ -8,6 +8,7 @@ export const Wrapper = styled('div')`
     text-decoration: none;
     color: #5944CC;
   }
+  
   h1, h2, h3, h4 {
     font-weight: bold;
     text-decoration: none;
@@ -15,6 +16,10 @@ export const Wrapper = styled('div')`
     color: #0D0A2B;
   }
 
+  a:first-of-type {
+    margin-top: 0;
+  }
+
   p {
     line-height: 1.7rem;
   }
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index cf5cb03..7970670 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -4,7 +4,54 @@ import axios from 'axios'
 import Markdown from '../markdown'
 import Loading from '../loading'
 import { ConfigContext } from '../context'
-import { Wrapper } from './styles'
+import { ellipsify } from '../utils'
+import { Wrapper, TOC } from './styles'
+
+const TableOfContents = ({ toc }) => {
+  // Don't show this if there aren't enough headers
+  if (toc.length < 2) return null
+  console.log(toc)
+
+  // Create TOC hierarchy and link to headers
+  const items = toc.map(t => (
+    <li
+      key={`${toc}-${t.slug}`}
+      style={{ marginLeft: (t.lvl - 2) * 10 }}
+    >
+      <a href={`#${t.slug}`}>
+        {ellipsify(t.content, 20)}
+      </a>
+    </li>
+  ))
+
+  return (
+    <TOC>
+      <ul>
+        <h5>Contents</h5>
+        {items}
+      </ul>
+    </TOC>
+  )
+}
+
+const Content = ({ content, config, route }) => {
+  const defaultContent = '##### _You don\'t have any content here yet!_'
+
+  // Prepend route title to content if `prependTitles` is set to true in config
+  let md = content
+  if (config.prefixTitles) {
+    md = `# ${route.title} \n ${content}`
+  }
+
+  return (
+    <div>
+      <Markdown
+        source={md || defaultContent}
+        {...config.syntax}
+      />
+    </div>
+  )
+}
 
 export default class Page extends Component {
   static displayName = 'Page'
@@ -14,6 +61,7 @@ export default class Page extends Component {
     this.state = {
       loading: !props.route.content,
       content: props.route.content,
+      toc: props.route.toc,
     }
   }
 
@@ -27,8 +75,10 @@ export default class Page extends Component {
       })
 
       this._socket.addEventListener('message', evt => {
+        const { content, toc } = JSON.parse(evt.data)
         this.setState({
-          content: evt.data,
+          content,
+          toc,
           loading: false,
         })
       })
@@ -36,6 +86,7 @@ export default class Page extends Component {
       const { data } = await axios.get('index.json')
       this.setState({ // eslint-disable-line
         content: data.content,
+        toc: data.toc,
         loading: false,
       })
     }
@@ -55,10 +106,9 @@ export default class Page extends Component {
     const {
       loading,
       content,
+      toc,
     } = this.state
 
-    const defaultContent = '##### _You don\'t have any content here yet!_'
-
     return (
       <ConfigContext.Consumer>
         {config =>
@@ -66,17 +116,23 @@ export default class Page extends Component {
             <Helmet>
               <title>{route.title}</title>
             </Helmet>
-
-            <div>
-              {loading
-                ? <Loading />
-                : (
-                  <Markdown
-                    source={content || defaultContent}
-                    {...config.syntax}
-                  />
-                )}
-            </div>
+            {
+              loading &&
+              <Loading />
+            }
+            {
+              !loading &&
+              <Content
+                content={content}
+                config={config}
+                route={route}
+              />
+            }
+            {
+              !loading &&
+              config.tableOfContents &&
+              <TableOfContents toc={toc} />
+            }
           </Wrapper>
         }
       </ConfigContext.Consumer>
diff --git a/themes/default/page/styles.js b/themes/default/page/styles.js
index a487fbb..f6a5d6f 100644
--- a/themes/default/page/styles.js
+++ b/themes/default/page/styles.js
@@ -1,8 +1,55 @@
 import styled from 'react-emotion'
 
 export const Wrapper = styled('div')`
-  padding: 20px 40px;
-  width: 100%;
-  max-width: 800px;
+  padding: 30px 50px;
+  max-width: 1024px;
   box-sizing: border-box;
+  display: flex;
+  @media(max-width: 1024px) {
+    flex-direction: column-reverse;
+    nav { margin-left: 0 }
+  }
+
+  @media(min-width: 1440px) {
+    max-width: 1200px;
+  }
+`
+
+export const TOC = styled('nav')`
+  margin-left: 2rem;
+  min-width: 150px;
+  flex-grow: 0;
+
+  ul {
+    list-style: none;
+    border-left: 1px solid #E6E9EB;
+    padding-left: 2rem;
+  }
+
+  h5 {
+    color: #848B8E;
+    margin: 0;
+  }
+
+  li {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 30px;
+    display: block;
+  }
+
+  a {
+    text-decoration: none;
+    color: #626469;
+    display: block;
+    &:hover {
+      color: #5742C7;
+    }
+  }
+`
+
+export const Body = styled('div')`
+
 `
diff --git a/themes/default/routes.js b/themes/default/routes.js
index cb7506b..7f85f96 100644
--- a/themes/default/routes.js
+++ b/themes/default/routes.js
@@ -19,7 +19,7 @@ class Routes extends Component {
           path={data.url}
           render={({ staticContext }) => (
             <Page
-              route={staticContext || data}
+              route={staticContext ? JSON.parse(staticContext) : data}
               socketUrl={socketUrl}
             />
           )}
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index f06897a..b9ddd51 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -2,9 +2,11 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import axios from 'axios'
 import Highlight from 'react-highlight-words'
+import { Search as SearchIcon } from 'react-feather'
 import { createDB } from './db'
 import strip from './strip'
 import history from '../history'
+import { ellipsify } from '../utils'
 import { Wrapper, Input, Results, Result } from './styles'
 
 const UP = 'ArrowUp'
@@ -12,16 +14,6 @@ const DOWN = 'ArrowDown'
 const ENTER = 'Enter'
 const ESCAPE = 'Escape'
 
-function ellipsify (text, limit) {
-  if (!text) return ''
-
-  if (text.length <= limit) {
-    return text
-  }
-
-  return `${text.substring(0, limit)}...`
-}
-
 class Search extends Component {
   constructor (props) {
     super(props)
@@ -119,6 +111,13 @@ class Search extends Component {
     this.setState({ loading: false, query: '', results: [] })
   }
 
+  renderBreadCrumb (result) {
+    return result
+      .breadcrumb
+      .slice(1)
+      .map((b, i) => <span key={`${b}-${i}`}>{b} {">"}</span>)
+  }
+
   renderResults () {
     const { query, loading, selectedIndex, results } = this.state
     if (!query.length) return null
@@ -131,7 +130,7 @@ class Search extends Component {
         onClick={this.clearSearch}
       >
         <Link to={r.url}>
-          <h4>{r.title}</h4>
+          <h4>{this.renderBreadCrumb(r)}</h4>
           <p>
             <Highlight
               highlightClassName="highlight"
@@ -157,6 +156,7 @@ class Search extends Component {
   render () {
     return (
       <Wrapper>
+        <SearchIcon color="#BCBFC1" size={20} />
         <Input
           onChange={this.handleChange}
           onKeyUp={this.handleKeyUp}
diff --git a/themes/default/search/styles.js b/themes/default/search/styles.js
index c775bfb..0323a20 100644
--- a/themes/default/search/styles.js
+++ b/themes/default/search/styles.js
@@ -4,16 +4,17 @@ export const Wrapper = styled('div')`
   flex: 1;
   display: flex;
   position: relative;
+  align-items: center;
 `
 
 export const Input = styled('input')`
   outline: none;
   font-size: .9rem;
   padding: 8px 15px;
-  border: 1px solid #E6E9EB;
   border-radius: 30px;
   display: block;
-  flex: 1;
+  width: 200px;
+  border: none;
   ::placeholder {
     color: #ACB0B2;
   }
@@ -23,7 +24,7 @@ export const Results = styled('div')`
   position: absolute;
   width: 100%;
   top: 75px;
-  height: calc(100vh - 75px);
+  height: 100vh;
   background: #FFF;
   z-index: 99;
 `
diff --git a/themes/default/sidebar/styles.js b/themes/default/sidebar/styles.js
index e5d45e9..e92e301 100644
--- a/themes/default/sidebar/styles.js
+++ b/themes/default/sidebar/styles.js
@@ -15,8 +15,9 @@ export const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
   height: 100vh;
-  max-width: 250px;
   margin-left: auto;
+  min-width: 270px;
+  max-width: 270px;
   text-align: left;
   @media (max-width: 850px) {
     max-width: 100%;
@@ -30,10 +31,11 @@ export const Wrapper = styled('div')`
 export const TopWrapper = styled('div')`
   flex-shrink: 0;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   height: 70px;
   padding: 0 20px;
+  border-bottom: 1px solid #E6E9EB;
   @media (max-width: 850px) {
     justify-content: space-between;
   }
@@ -81,9 +83,8 @@ export const Hamburger = styled('div')`
 
 export const Nav = styled('nav')`
   flex: 1 0 auto;
-  border-top: 1px solid #E6E9EB;
   border-bottom: 1px solid #E6E9EB;
-  padding: 30px 0 30px 15px;
+  padding: 20px 0 20px 15px;
 `
 
 export const NavList = styled(Accordion)`
diff --git a/themes/default/utils/index.js b/themes/default/utils/index.js
new file mode 100644
index 0000000..c151084
--- /dev/null
+++ b/themes/default/utils/index.js
@@ -0,0 +1,9 @@
+export function ellipsify (text, limit) {
+  if (!text) return ''
+
+  if (text.length <= limit) {
+    return text
+  }
+
+  return `${text.substring(0, limit)}...`
+}
diff --git a/yarn.lock b/yarn.lock
index f635b76..32166d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -360,6 +360,12 @@ ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
+ansi-red@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -378,6 +384,10 @@ ansi-styles@^3.1.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+
 ansi@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/ansi/-/ansi-0.3.1.tgz#0c42d4fb17160d5a9af1e484bace1c66922c1b21"
@@ -435,6 +445,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@~0.1.15:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-0.1.16.tgz#cfd01e0fbba3d6caed049fbd758d40f65196f57c"
+  dependencies:
+    underscore "~1.7.0"
+    underscore.string "~2.4.0"
+
 aria-query@^0.7.0:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
@@ -567,6 +584,10 @@ atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
+autolinker@~0.15.0:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1741,6 +1762,10 @@ code@^5.2.0:
   dependencies:
     hoek "5.x.x"
 
+coffee-script@^1.12.4:
+  version "1.12.7"
+  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
+
 collapse-white-space@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.4.tgz#ce05cf49e54c3277ae573036a26851ba430a0091"
@@ -1804,7 +1829,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.5.0, concat-stream@^1.6.0:
+concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   dependencies:
@@ -2222,6 +2247,10 @@ detect-libc@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
 
+diacritics-map@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/diacritics-map/-/diacritics-map-0.1.0.tgz#6dfc0ff9d01000a2edf2865371cac316e94977af"
+
 diff@3.5.0, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -3385,6 +3414,16 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+gray-matter@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
+  dependencies:
+    ansi-red "^0.1.1"
+    coffee-script "^1.12.4"
+    extend-shallow "^2.0.1"
+    js-yaml "^3.8.1"
+    toml "^2.3.2"
+
 gray-matter@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.1.tgz#375263c194f0d9755578c277e41b1c1dfdf22c7d"
@@ -4118,7 +4157,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.11.0, js-yaml@^3.6.1, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.11.0, js-yaml@^3.6.1, js-yaml@^3.8.1, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -4246,6 +4285,12 @@ lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
 
+lazy-cache@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
+  dependencies:
+    set-getter "^0.1.0"
+
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@@ -4273,6 +4318,15 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+list-item@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/list-item/-/list-item-1.1.1.tgz#0c65d00e287cb663ccb3cb3849a77e89ec268a56"
+  dependencies:
+    expand-range "^1.8.1"
+    extend-shallow "^2.0.1"
+    is-number "^2.1.0"
+    repeat-string "^1.5.2"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -4420,6 +4474,27 @@ markdown-escapes@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.2.tgz#e639cbde7b99c841c0bacc8a07982873b46d2122"
 
+markdown-link@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-link/-/markdown-link-0.1.1.tgz#32c5c65199a6457316322d1e4229d13407c8c7cf"
+
+markdown-toc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/markdown-toc/-/markdown-toc-1.2.0.tgz#44a15606844490314afc0444483f9e7b1122c339"
+  dependencies:
+    concat-stream "^1.5.2"
+    diacritics-map "^0.1.0"
+    gray-matter "^2.1.0"
+    lazy-cache "^2.0.2"
+    list-item "^1.1.1"
+    markdown-link "^0.1.1"
+    minimist "^1.2.0"
+    mixin-deep "^1.1.3"
+    object.pick "^1.2.0"
+    remarkable "^1.7.1"
+    repeat-string "^1.6.1"
+    strip-color "^0.1.0"
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -4603,7 +4678,7 @@ mississippi@^2.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
-mixin-deep@^1.2.0:
+mixin-deep@^1.1.3, mixin-deep@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
   dependencies:
@@ -4985,7 +5060,7 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
-object.pick@^1.3.0:
+object.pick@^1.2.0, object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
   dependencies:
@@ -5574,6 +5649,10 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-content-loader@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-3.1.2.tgz#98230b4604b4b744eaa2d3fc88917dd988df6766"
+
 react-dom@^16.3.2, react-dom@^16.4.0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
@@ -5590,6 +5669,10 @@ react-emotion@^9.1.3:
     babel-plugin-emotion "^9.1.2"
     create-emotion-styled "^9.1.2"
 
+react-feather@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.0.tgz#f0aa692497de952237ca1f3b118ebcb5427152e1"
+
 react-helmet@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
@@ -5859,6 +5942,13 @@ remark-parse@^5.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
+remarkable@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.1.tgz#aaca4972100b66a642a63a1021ca4bac1be3bff6"
+  dependencies:
+    argparse "~0.1.15"
+    autolinker "~0.15.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6137,6 +6227,12 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
 
+set-getter@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
+  dependencies:
+    to-object-path "^0.3.0"
+
 set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
@@ -6549,6 +6645,10 @@ strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
+strip-color@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b"
+
 strip-dirs@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strip-dirs/-/strip-dirs-2.1.0.tgz#4987736264fc344cf20f6c34aca9d13d1d4ed6c5"
@@ -6742,6 +6842,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toml@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.3.tgz#8d683d729577cb286231dfc7a8affe58d31728fb"
+
 touch@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
@@ -6885,6 +6989,14 @@ unbzip2-stream@^1.0.9:
     buffer "^3.0.1"
     through "^2.3.6"
 
+underscore.string@~2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b"
+
+underscore@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
+
 unherit@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.1.tgz#132748da3e88eab767e08fabfbb89c5e9d28628c"

From d8f3f8caa1290e55118789d88c4276d17e292f92 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 13:14:06 -0400
Subject: [PATCH 04/11] add search scrolling, toc, and better empty state

---
 package.json                    |  1 +
 themes/default/page/index.js    |  1 -
 themes/default/search/index.js  | 65 +++++++++++++++++++++++++++++----
 themes/default/search/styles.js | 30 +++++++++++----
 yarn.lock                       |  8 +++-
 5 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index ec870c8..039ab26 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
 		"progress": "^2.0.0",
 		"prop-types": "^15.6.1",
 		"react": "^16.4.0",
+		"react-click-outside": "^3.0.1",
 		"react-content-loader": "^3.1.2",
 		"react-dom": "^16.4.0",
 		"react-emotion": "^9.1.3",
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index 7970670..0b05104 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -10,7 +10,6 @@ import { Wrapper, TOC } from './styles'
 const TableOfContents = ({ toc }) => {
   // Don't show this if there aren't enough headers
   if (toc.length < 2) return null
-  console.log(toc)
 
   // Create TOC hierarchy and link to headers
   const items = toc.map(t => (
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index b9ddd51..0483650 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
+import enhanceClickOutside from 'react-click-outside'
 import { Link } from 'react-router-dom'
 import axios from 'axios'
 import Highlight from 'react-highlight-words'
-import { Search as SearchIcon } from 'react-feather'
+import { Search as SearchIcon, ChevronRight } from 'react-feather'
 import { createDB } from './db'
 import strip from './strip'
 import history from '../history'
 import { ellipsify } from '../utils'
-import { Wrapper, Input, Results, Result } from './styles'
+import { Wrapper, Input, Results, Result, Center } from './styles'
 
 const UP = 'ArrowUp'
 const DOWN = 'ArrowDown'
@@ -30,6 +31,32 @@ class Search extends Component {
     this.loadResults()
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (this.state.selectedIndex !== prevState.selectedIndex) {
+      this.ensureActiveItemVisible()
+    }
+  }
+
+  ensureActiveItemVisible () {
+    if (!this.activeItem) return false
+    const distanceFromTop = this.activeItem.offsetTop
+    const height = this.activeItem.offsetHeight
+    const scrollTop = this.results.scrollTop
+    const clientHeight = this.results.clientHeight
+
+    if (distanceFromTop === 0) {
+      return this.results.scrollTop = 0
+    }
+
+    if (distanceFromTop < scrollTop) {
+      return this.results.scrollTop = distanceFromTop
+    }
+
+    if ((distanceFromTop + height) > (scrollTop + clientHeight)) {
+      return this.results.scrollTop = distanceFromTop - height
+    }
+  }
+
   async loadResults () {
     // Initialize search instance and set indices
     const resp = await axios.get('/db.json')
@@ -98,6 +125,10 @@ class Search extends Component {
     this.setState({ selectedIndex: nextIndex })
   }
 
+  handleClickOutside () {
+    this.clearSearch()
+  }
+
   fetchResults (query) {
     return new Promise((resolve, reject) => {
       const results = this.db
@@ -114,8 +145,25 @@ class Search extends Component {
   renderBreadCrumb (result) {
     return result
       .breadcrumb
-      .slice(1)
-      .map((b, i) => <span key={`${b}-${i}`}>{b} {">"}</span>)
+      .slice(1, result.breadcrumb.length)
+      .concat(result.title)
+      .map((b, i) => (
+        <span key={`${b}-${i}`}>
+          {
+            i !== 0 &&
+            <ChevronRight
+              size={14}
+              style={{
+                display: 'inline-block',
+                padding: '0 .25rem',
+                position: 'relative',
+                top: 2,
+              }}
+            />
+          }
+          {b}
+        </span>
+      ))
   }
 
   renderResults () {
@@ -127,6 +175,7 @@ class Search extends Component {
       <Result
         key={r.file}
         selected={i === selectedIndex}
+        innerRef={ref => i === selectedIndex ? this.activeItem = ref : null}
         onClick={this.clearSearch}
       >
         <Link to={r.url}>
@@ -136,7 +185,7 @@ class Search extends Component {
               highlightClassName="highlight"
               searchWords={query.length > 2 ? query.split(' ') : []}
               autoEscape
-              textToHighlight={strip(ellipsify(r.content, 400))}
+              textToHighlight={strip(ellipsify(r.content, 200))}
             />
           </p>
           <span className="url">{r.url}</span>
@@ -145,9 +194,9 @@ class Search extends Component {
     )
 
     return (
-      <Results>
+      <Results innerRef={ref => this.results = ref}>
         {items.length !== 0 && !loading && items}
-        {items.length === 0 && !loading && <span>No Results...</span>}
+        {items.length === 0 && !loading && <Center>No Results Found matching "{query}"...</Center>}
         {loading && <span>Loading...</span>}
       </Results>
     )
@@ -169,4 +218,4 @@ class Search extends Component {
   }
 }
 
-export default Search
+export default enhanceClickOutside(Search)
diff --git a/themes/default/search/styles.js b/themes/default/search/styles.js
index 0323a20..2b40351 100644
--- a/themes/default/search/styles.js
+++ b/themes/default/search/styles.js
@@ -11,10 +11,10 @@ export const Input = styled('input')`
   outline: none;
   font-size: .9rem;
   padding: 8px 15px;
-  border-radius: 30px;
   display: block;
   width: 200px;
   border: none;
+  flex-grow: 1;
   ::placeholder {
     color: #ACB0B2;
   }
@@ -23,33 +23,49 @@ export const Input = styled('input')`
 export const Results = styled('div')`
   position: absolute;
   width: 100%;
-  top: 75px;
-  height: 100vh;
+  top: 70px;
+  height: 50vh;
+  max-height: 700px;
+  overflow: scroll;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1);
   background: #FFF;
   z-index: 99;
 `
 
 export const Result = styled('div')`
-  padding: .5rem;
+  padding: 1rem;
   background: ${props => props.selected ? '#f6f5fb' : '#FFF'};
   a { text-decoration: none }
   &:hover {
     background: #f6f5fb;
-    h4 { color: #6457DC; }
+    h4 { color: #6457DC; text-decoration: underline; }
   }
   h4 {
     font-weight: bold;
-    text-decoration: underline;
+    text-decoration: none;
     margin: 0;
     color: ${props => props.selected ? '#6457DC' : '#0d2b3e'};
+    text-decoration: ${props => props.selected ? 'underline' : 'none'};
   }
   p {
-    color: rgba(0,0,0,0.85);
+    color: rgba(0,0,0,0.75);
     text-decoration: none;
     margin: 0;
+    font-size: 1rem;
   }
   p .highlight { background: #d1ccec }
   .url {
     font-size: 12px;
   }
 `
+
+export const Center = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
diff --git a/yarn.lock b/yarn.lock
index 32166d4..d6cf9c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3613,7 +3613,7 @@ hoek@5.x.x:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.3.tgz#b71d40d943d0a95da01956b547f83c4a5b4a34ac"
 
-hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1:
+hoist-non-react-statics@^2.1.1, hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
 
@@ -5649,6 +5649,12 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-click-outside@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-3.0.1.tgz#6e77e84d2f17afaaac26dbad743cbbf909f5e24c"
+  dependencies:
+    hoist-non-react-statics "^2.1.1"
+
 react-content-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-3.1.2.tgz#98230b4604b4b744eaa2d3fc88917dd988df6766"

From 21a9ccb4f9264b56b075bfc828e571da224054c2 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 13:18:41 -0400
Subject: [PATCH 05/11] linting fixes

---
 themes/default/loading/index.js  | 44 ++++++++++++++++----------------
 themes/default/loading/styles.js |  2 +-
 themes/default/search/index.js   |  2 +-
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/themes/default/loading/index.js b/themes/default/loading/index.js
index ce87c7d..dd87936 100644
--- a/themes/default/loading/index.js
+++ b/themes/default/loading/index.js
@@ -57,14 +57,14 @@ export default function (props) {
         secondaryColor="#ececf1"
         {...props}
       >
-        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" /> 
-        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" /> 
-        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" /> 
-        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" /> 
-        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" /> 
-        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" /> 
-        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" /> 
-        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" />
+        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" />
+        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" />
+        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" />
+        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" />
+        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" />
+        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" />
+        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" />
         <rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
         <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
       </ContentLoader>
@@ -97,14 +97,14 @@ export default function (props) {
         secondaryColor="#ececf1"
         {...props}
       >
-        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" /> 
-        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" /> 
-        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" /> 
-        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" /> 
-        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" /> 
-        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" /> 
-        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" /> 
-        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" /> 
+        <rect x="0" y="0" rx="3" ry="3" width="70" height="13" />
+        <rect x="80" y="0" rx="3" ry="3" width="100" height="13" />
+        <rect x="190" y="0" rx="3" ry="3" width="10" height="13" />
+        <rect x="15" y="30" rx="3" ry="3" width="130" height="13" />
+        <rect x="155" y="30" rx="3" ry="3" width="130" height="13" />
+        <rect x="15" y="60" rx="3" ry="3" width="90" height="13" />
+        <rect x="115" y="60" rx="3" ry="3" width="60" height="13" />
+        <rect x="185" y="60" rx="3" ry="3" width="60" height="13" />
         <rect x="0" y="90" rx="3" ry="3" width="30" height="13" />
         <rect x="0" y="130" rx="3" ry="3" width="100%" height="1" />
       </ContentLoader>
@@ -133,9 +133,9 @@ export default function (props) {
   )
 }
 
-// <rect x="15" y="20" rx="3" ry="3" width="130" height="10" /> 
-//         <rect x="155" y="20" rx="3" ry="3" width="130" height="10" /> 
-//         <rect x="15" y="40" rx="3" ry="3" width="90" height="10" /> 
-//         <rect x="115" y="40" rx="3" ry="3" width="60" height="10" /> 
-//         <rect x="185" y="40" rx="3" ry="3" width="60" height="10" /> 
-//         <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
\ No newline at end of file
+// <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
+//         <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
+//         <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
+//         <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
+//         <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
+//         <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
diff --git a/themes/default/loading/styles.js b/themes/default/loading/styles.js
index bcedcdf..19d0a8e 100644
--- a/themes/default/loading/styles.js
+++ b/themes/default/loading/styles.js
@@ -1,4 +1,4 @@
 import styled from 'react-emotion'
 
 export const Wrapper = styled('div')`
-`
\ No newline at end of file
+`
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index 0483650..8d28492 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -196,7 +196,7 @@ class Search extends Component {
     return (
       <Results innerRef={ref => this.results = ref}>
         {items.length !== 0 && !loading && items}
-        {items.length === 0 && !loading && <Center>No Results Found matching "{query}"...</Center>}
+        {items.length === 0 && !loading && <Center>No Results Found matching {`"${query}"`}...</Center>}
         {loading && <span>Loading...</span>}
       </Results>
     )

From c912368935e7b8bb702e0d64dfbfe559ae247c10 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 13:19:15 -0400
Subject: [PATCH 06/11] remove comment

---
 themes/default/loading/index.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/themes/default/loading/index.js b/themes/default/loading/index.js
index dd87936..bcfa42a 100644
--- a/themes/default/loading/index.js
+++ b/themes/default/loading/index.js
@@ -132,10 +132,3 @@ export default function (props) {
     </Wrapper>
   )
 }
-
-// <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
-//         <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
-//         <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
-//         <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
-//         <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
-//         <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />

From 5b21c7ce1ef27db8a1dff9783bce4a08645bd260 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 14:07:18 -0400
Subject: [PATCH 07/11] adjust monospace styles

---
 themes/default/application/styles.js | 5 +++--
 themes/default/markdown/styles.js    | 9 ++++-----
 themes/default/search/index.js       | 8 +++++++-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index 6943087..dabd82c 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -14,9 +14,10 @@ const fontMain = css`
 `
 
 const fontMono = css`
-  font-family: 'Menlo', monospace;
+  font-family: "Menlo", "Source Code Pro", "Inconsolata","monospace", serif;
   line-height: 1;
-  font-size: 1.1rem;
+  font-size: 13.5px;
+  line-height: 22px;
 `
 
 export const Wrapper = styled('div')`
diff --git a/themes/default/markdown/styles.js b/themes/default/markdown/styles.js
index 4fe946f..f124999 100644
--- a/themes/default/markdown/styles.js
+++ b/themes/default/markdown/styles.js
@@ -41,11 +41,11 @@ export const Wrapper = styled('div')`
 
   pre {
     overflow-x: scroll;
+    background: #FAFAFD !important;
   }
 
   pre, code {
-    font-family: monospace;
-    -webkit-font-smoothing: initial !important;
+    // -webkit-font-smoothing: initial;
   }
 
   code {
@@ -59,18 +59,17 @@ export const Wrapper = styled('div')`
   }
 
   pre code {
-    font-size: 1.1rem;
     border: none;
     word-break: break-all;
     white-space: pre-wrap;
     display: inline-block !important;
     background: inherit;
-    color: rgb(52, 50, 64);
+    color: #485672;
   }
 
   pre {
     border-radius: 4px;
-    font-family: Roboto Mono, monospace;
+    // font-family: Roboto Mono, monospace;
     border-radius: 3px;
     line-height: 19px;
   }
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index 8d28492..bf879f1 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -39,6 +39,7 @@ class Search extends Component {
 
   ensureActiveItemVisible () {
     if (!this.activeItem) return false
+
     const distanceFromTop = this.activeItem.offsetTop
     const height = this.activeItem.offsetHeight
     const scrollTop = this.results.scrollTop
@@ -139,7 +140,12 @@ class Search extends Component {
   }
 
   clearSearch = () => {
-    this.setState({ loading: false, query: '', results: [] })
+    this.setState({
+      loading: false,
+      query: '',
+      results: [],
+      selectedIndex: 0,
+    })
   }
 
   renderBreadCrumb (result) {

From 239622893da3d1d9adf4cf98aa3e9c36bd5ce5ad Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 14:13:02 -0400
Subject: [PATCH 08/11] ellipsify in css

---
 themes/default/application/styles.js      | 4 ++--
 themes/default/markdown/overrides/Code.js | 2 +-
 themes/default/markdown/styles.js         | 5 -----
 themes/default/page/index.js              | 5 ++---
 themes/default/page/styles.js             | 7 ++++---
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index dabd82c..e388dcc 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -16,8 +16,8 @@ const fontMain = css`
 const fontMono = css`
   font-family: "Menlo", "Source Code Pro", "Inconsolata","monospace", serif;
   line-height: 1;
-  font-size: 13.5px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 21px;
 `
 
 export const Wrapper = styled('div')`
diff --git a/themes/default/markdown/overrides/Code.js b/themes/default/markdown/overrides/Code.js
index f12b993..a462310 100644
--- a/themes/default/markdown/overrides/Code.js
+++ b/themes/default/markdown/overrides/Code.js
@@ -28,7 +28,7 @@ export default function (props) {
       style={theme}
       language={language}
       showLineNumbers={props.lineNumbers}
-      lineNumberStyle={{ opacity: 0.5 }}
+      lineNumberStyle={{ opacity: 0.3 }}
       useInlineStyles
     >
       {value}
diff --git a/themes/default/markdown/styles.js b/themes/default/markdown/styles.js
index f124999..6f132a4 100644
--- a/themes/default/markdown/styles.js
+++ b/themes/default/markdown/styles.js
@@ -52,7 +52,6 @@ export const Wrapper = styled('div')`
     border-radius: 4px;
     padding: .15rem .25rem;
     display: inline;
-    line-height: 1.5;
     word-break: break-all;
     background: #EEEAFE;
     color: #5742CA;
@@ -137,10 +136,6 @@ export const Wrapper = styled('div')`
     padding-left: 5px !important;
   }
 
-  .react-syntax-highlighter-line-number {
-    font-size: .85rem;
-  }
-
   .syntax-shell .react-syntax-highlighter-line-number {
     opacity: 0.5;
     visibility: hidden;
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index 0b05104..8a3645b 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -4,7 +4,6 @@ import axios from 'axios'
 import Markdown from '../markdown'
 import Loading from '../loading'
 import { ConfigContext } from '../context'
-import { ellipsify } from '../utils'
 import { Wrapper, TOC } from './styles'
 
 const TableOfContents = ({ toc }) => {
@@ -15,10 +14,10 @@ const TableOfContents = ({ toc }) => {
   const items = toc.map(t => (
     <li
       key={`${toc}-${t.slug}`}
-      style={{ marginLeft: (t.lvl - 2) * 10 }}
+      style={{ marginLeft: (t.lvl - 3) * 10 }}
     >
       <a href={`#${t.slug}`}>
-        {ellipsify(t.content, 20)}
+        {t.content}
       </a>
     </li>
   ))
diff --git a/themes/default/page/styles.js b/themes/default/page/styles.js
index f6a5d6f..f8bf639 100644
--- a/themes/default/page/styles.js
+++ b/themes/default/page/styles.js
@@ -32,9 +32,6 @@ export const TOC = styled('nav')`
   }
 
   li {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     font-size: 13px;
     line-height: 30px;
     display: block;
@@ -44,6 +41,10 @@ export const TOC = styled('nav')`
     text-decoration: none;
     color: #626469;
     display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    
     &:hover {
       color: #5742C7;
     }

From 3cb10e43721ab1553b73106776a90ff795acba79 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 14:48:51 -0400
Subject: [PATCH 09/11] pull out toc logic, fix config casing, don't parse JSON
 when we don't need to

---
 src/core/filesystem.js               |  6 ++++++
 src/core/output.js                   |  5 ++---
 src/core/socket.js                   |  5 ++---
 src/utils/config.js                  |  4 ++--
 themes/default/application/styles.js |  2 +-
 themes/default/page/index.js         |  6 +++---
 themes/default/routes.js             |  2 +-
 themes/default/search/index.js       |  3 ++-
 themes/default/sidebar/index.js      | 15 +++++++--------
 themes/default/sidebar/styles.js     |  6 ++++--
 10 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/core/filesystem.js b/src/core/filesystem.js
index 2bcef7d..a6f0a03 100644
--- a/src/core/filesystem.js
+++ b/src/core/filesystem.js
@@ -1,6 +1,7 @@
 const fs = require('fs-extra')
 const syspath = require('path')
 const { ncp } = require('ncp')
+const toc = require('markdown-toc')
 const { parseFrontmatter } = require('../utils/frontmatter')
 
 const INDEX_FILES = ['index', 'readme']
@@ -154,6 +155,10 @@ async function getContent (path) {
   return content
 }
 
+function getTableOfContents (content) {
+  return toc(content).json
+}
+
 /**
  * because of https://github.com/zeit/pkg/issues/420
  */
@@ -171,6 +176,7 @@ module.exports = {
   checkForConflicts,
   dirTree,
   getContent,
+  getTableOfContents,
   copyDir,
 }
 
diff --git a/src/core/output.js b/src/core/output.js
index 81897bd..6c37250 100644
--- a/src/core/output.js
+++ b/src/core/output.js
@@ -1,9 +1,8 @@
 const fs = require('fs-extra')
 const syspath = require('path')
-const toc = require('markdown-toc')
 const { generateDatabase } = require('./database')
 const { templateForProduction } = require('./template')
-const { getContent } = require('./filesystem')
+const { getContent, getTableOfContents } = require('./filesystem')
 
 module.exports = async (entrypoints, props) => {
   const db = await generateDatabase(props.manifest)
@@ -22,7 +21,7 @@ module.exports = async (entrypoints, props) => {
       await fs.outputFile(outputHtml, template)
       await fs.outputJson(outputJson, {
         content: item.content,
-        toc: toc(item.content).json
+        toc: getTableOfContents(item.content),
       })
     }
 
diff --git a/src/core/socket.js b/src/core/socket.js
index dd1dd6c..1260481 100644
--- a/src/core/socket.js
+++ b/src/core/socket.js
@@ -1,7 +1,6 @@
 const fs = require('fs')
 const WebSocket = require('ws')
-const toc = require('markdown-toc')
-const { getContent } = require('./filesystem')
+const { getContent, getTableOfContents } = require('./filesystem')
 
 module.exports = (server) => {
   const socket = new WebSocket.Server({
@@ -16,7 +15,7 @@ module.exports = (server) => {
         const content = await getContent(file)
         client.send(JSON.stringify({
           content,
-          toc: toc(content).json,
+          toc: getTableOfContents(content),
         }))
       }
 
diff --git a/src/utils/config.js b/src/utils/config.js
index 4cf4e45..5fdce4d 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -26,8 +26,8 @@ const DEFAULT_CONFIG = {
   languages: ['bash', 'json'],
   header_links: [],
   theme: 'default',
-  prefixTitles: true,
-  tableOfContents: true,
+  prefix_titles: true,
+  table_of_contents: true,
   syntax: {
     theme: 'atom-one-light',
     renderer: 'hljs',
diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index e388dcc..57868a4 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -15,7 +15,6 @@ const fontMain = css`
 
 const fontMono = css`
   font-family: "Menlo", "Source Code Pro", "Inconsolata","monospace", serif;
-  line-height: 1;
   font-size: 13px;
   line-height: 21px;
 `
@@ -38,6 +37,7 @@ export const WrapperNav = styled('nav')`
   flex: 1;
   background: linear-gradient(90deg, #F0F2F4 0%, #F5F7F9 100%);
   border-right: 1px solid #E6E9EB;
+  box-shadow: inset -4px 0px 2px -2px rgba(202, 209, 226, 0.2);
   text-align: right;
   overflow: auto;
 
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index 8a3645b..53f1c48 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -14,7 +14,7 @@ const TableOfContents = ({ toc }) => {
   const items = toc.map(t => (
     <li
       key={`${toc}-${t.slug}`}
-      style={{ marginLeft: (t.lvl - 3) * 10 }}
+      style={{ marginLeft: (t.lvl - 2) * 10 }}
     >
       <a href={`#${t.slug}`}>
         {t.content}
@@ -37,7 +37,7 @@ const Content = ({ content, config, route }) => {
 
   // Prepend route title to content if `prependTitles` is set to true in config
   let md = content
-  if (config.prefixTitles) {
+  if (config.prefix_titles) {
     md = `# ${route.title} \n ${content}`
   }
 
@@ -128,7 +128,7 @@ export default class Page extends Component {
             }
             {
               !loading &&
-              config.tableOfContents &&
+              config.table_of_contents &&
               <TableOfContents toc={toc} />
             }
           </Wrapper>
diff --git a/themes/default/routes.js b/themes/default/routes.js
index 7f85f96..cb7506b 100644
--- a/themes/default/routes.js
+++ b/themes/default/routes.js
@@ -19,7 +19,7 @@ class Routes extends Component {
           path={data.url}
           render={({ staticContext }) => (
             <Page
-              route={staticContext ? JSON.parse(staticContext) : data}
+              route={staticContext || data}
               socketUrl={socketUrl}
             />
           )}
diff --git a/themes/default/search/index.js b/themes/default/search/index.js
index bf879f1..5a0f272 100644
--- a/themes/default/search/index.js
+++ b/themes/default/search/index.js
@@ -72,7 +72,8 @@ class Search extends Component {
     const { value } = e.target
     this.setState({
       query: value,
-      loading: value.length !== 0
+      loading: value.length !== 0,
+      selectedIndex: 0,
     }, async () => {
       const results = await this.fetchResults(value)
       this.setState({ results, loading: false })
diff --git a/themes/default/sidebar/index.js b/themes/default/sidebar/index.js
index 67512d3..d917116 100644
--- a/themes/default/sidebar/index.js
+++ b/themes/default/sidebar/index.js
@@ -148,15 +148,14 @@ class Sidebar extends Component {
               <Nav>
                 {this.renderNavItems(manifest.items, true)}
               </Nav>
-
-              <Callout
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://github.com/timberio/gitdocs"
-              >
-                Powered by GitDocs
-              </Callout>
             </MenuWrapper>
+            <Callout
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/timberio/gitdocs"
+            >
+              Powered by GitDocs
+            </Callout>
           </Wrapper>
         }
       </ConfigContext.Consumer>
diff --git a/themes/default/sidebar/styles.js b/themes/default/sidebar/styles.js
index e92e301..0b61091 100644
--- a/themes/default/sidebar/styles.js
+++ b/themes/default/sidebar/styles.js
@@ -42,9 +42,11 @@ export const TopWrapper = styled('div')`
 `
 
 export const MenuWrapper = styled('div')`
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  overflow: scroll;
+
   @media (max-width: 850px) {
     background: #F5F7F9;
     box-shadow: -2px 0 3px rgba(0, 0, 0, .2);
@@ -83,7 +85,6 @@ export const Hamburger = styled('div')`
 
 export const Nav = styled('nav')`
   flex: 1 0 auto;
-  border-bottom: 1px solid #E6E9EB;
   padding: 20px 0 20px 15px;
 `
 
@@ -135,6 +136,7 @@ export const Callout = styled('a')`
   padding: 20px 0;
   text-decoration: none;
   text-align: center;
+  border-top: 1px solid #E6E9EB;
   :hover {
     color: rgba(0, 0, 0, .3);
   }

From f9fad76eee8bfc8b00e52c618cb91a56a88f6f8b Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 15:31:40 -0400
Subject: [PATCH 10/11] adjust content wrapper

---
 themes/default/application/styles.js | 2 +-
 themes/default/page/index.js         | 6 +++---
 themes/default/page/styles.js        | 9 +++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index 57868a4..0ab11b6 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -46,7 +46,7 @@ export const WrapperNav = styled('nav')`
     max-width: 270px;
   }
 
-  @media (min-width: 1440px) {
+  @media (min-width: 1450px) {
     min-width: initial;
     max-width: initial;
   }
diff --git a/themes/default/page/index.js b/themes/default/page/index.js
index 53f1c48..ead7265 100644
--- a/themes/default/page/index.js
+++ b/themes/default/page/index.js
@@ -4,7 +4,7 @@ import axios from 'axios'
 import Markdown from '../markdown'
 import Loading from '../loading'
 import { ConfigContext } from '../context'
-import { Wrapper, TOC } from './styles'
+import { Wrapper, ContentWrapper, TOC } from './styles'
 
 const TableOfContents = ({ toc }) => {
   // Don't show this if there aren't enough headers
@@ -42,12 +42,12 @@ const Content = ({ content, config, route }) => {
   }
 
   return (
-    <div>
+    <ContentWrapper>
       <Markdown
         source={md || defaultContent}
         {...config.syntax}
       />
-    </div>
+    </ContentWrapper>
   )
 }
 
diff --git a/themes/default/page/styles.js b/themes/default/page/styles.js
index f8bf639..b28887f 100644
--- a/themes/default/page/styles.js
+++ b/themes/default/page/styles.js
@@ -5,19 +5,20 @@ export const Wrapper = styled('div')`
   max-width: 1024px;
   box-sizing: border-box;
   display: flex;
+
   @media(max-width: 1024px) {
     flex-direction: column-reverse;
     nav { margin-left: 0 }
   }
 
-  @media(min-width: 1440px) {
+  @media(min-width: 1450px) {
     max-width: 1200px;
   }
 `
 
 export const TOC = styled('nav')`
   margin-left: 2rem;
-  min-width: 150px;
+  width: 150px;
   flex-grow: 0;
 
   ul {
@@ -51,6 +52,6 @@ export const TOC = styled('nav')`
   }
 `
 
-export const Body = styled('div')`
-
+export const ContentWrapper = styled('div')`
+  padding: 0 50px;
 `

From dad524719a61339a3dd61bf4da2b661eefe65929 Mon Sep 17 00:00:00 2001
From: Zach Sherman <zksherm@gmail.com>
Date: Sat, 26 May 2018 16:05:57 -0400
Subject: [PATCH 11/11] update background

---
 themes/default/application/styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/themes/default/application/styles.js b/themes/default/application/styles.js
index 0ab11b6..405bc66 100644
--- a/themes/default/application/styles.js
+++ b/themes/default/application/styles.js
@@ -36,6 +36,7 @@ export const Wrapper = styled('div')`
 export const WrapperNav = styled('nav')`
   flex: 1;
   background: linear-gradient(90deg, #F0F2F4 0%, #F5F7F9 100%);
+  background: #FAFAFD;
   border-right: 1px solid #E6E9EB;
   box-shadow: inset -4px 0px 2px -2px rgba(202, 209, 226, 0.2);
   text-align: right;