[Enhancement] Timber Styles

package.json

@@ -76,13 +76,17 @@
 		"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-click-outside": "^3.0.1",
+		"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",

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,
 }
 

src/core/output.js

@@ -2,7 +2,7 @@ const fs = require('fs-extra')
 const syspath = require('path')
 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)
@@ -19,7 +19,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: getTableOfContents(item.content),
+      })
     }
 
     if (items) {

src/core/socket.js

@@ -1,6 +1,6 @@
 const fs = require('fs')
 const WebSocket = require('ws')
-const { getContent } = require('./filesystem')
+const { getContent, getTableOfContents } = require('./filesystem')
 
 module.exports = (server) => {
   const socket = new WebSocket.Server({
@@ -13,7 +13,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: getTableOfContents(content),
+        }))
       }
 
       send()

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}]
   }`
 

src/utils/config.js

@@ -26,9 +26,12 @@ const DEFAULT_CONFIG = {
   languages: ['bash', 'json'],
   header_links: [],
   theme: 'default',
-  theme_custom: {
-    syntaxTheme: 'prism',
-    syntaxLineNumbers: false,
+  prefix_titles: true,
+  table_of_contents: true,
+  syntax: {
+    theme: 'atom-one-light',
+    renderer: 'hljs',
+    lineNumbers: true,
   },
 }
 

themes/default/application/styles.js

@@ -14,9 +14,9 @@ const fontMain = css`
 `
 
 const fontMono = css`
-  font-family: 'Menlo', monospace;
-  line-height: 1;
-  font-size: 1.1rem;
+  font-family: "Menlo", "Source Code Pro", "Inconsolata","monospace", serif;
+  font-size: 13px;
+  line-height: 21px;
 `
 
 export const Wrapper = styled('div')`
@@ -36,10 +36,22 @@ 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;
-  min-width: 250px;
+  box-shadow: inset -4px 0px 2px -2px rgba(202, 209, 226, 0.2);
   text-align: right;
   overflow: auto;
+
+  @media (min-width: 850px) {
+    min-width: 270px;
+    max-width: 270px;
+  }
+
+  @media (min-width: 1450px) {
+    min-width: initial;
+    max-width: initial;
+  }
+
   @media (max-width: 850px) {
     flex: 0 auto;
     overflow: hidden;

themes/default/components/container.js

@@ -0,0 +1,6 @@
+import styled from 'react-emotion'
+
+export default styled('div')`
+  width: 1024px;
+  margin: 0 auto;
+`

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} />

themes/default/loading/index.js

@@ -1,14 +1,134 @@
 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>
   )
 }

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;
-      }
-    }
-  }),
 `

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