Add layout components for docs

docs/App.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import connect from 'refunk'
-import Title from './Title'
 import cxs from 'cxs/component'
-import Router from '../lib/Router'
+import pkg from '../package.json'
+import Title from './Title'
 import Style from './Style'
+import Flex from './Flex'
+import Box from './Box'
 
-const { Route, Link } = Router
+import Debug from './Debug'
 
 const App = connect(props => (
   <div>
@@ -13,18 +15,39 @@ const App = connect(props => (
     <title>{props.title}</title>
     <meta name='description' content={props.description} />
     <Style css={props.css} />
+    <pre>Compositor</pre>
     <Title>x0</Title>
+    <div>{pkg.description}</div>
+    <div>v{pkg.version}</div>
+    <pre>video</pre>
+    <pre>tweet</pre>
+    <pre>github</pre>
+    <pre>
+      - Isolated development environment
+      - Static site generator
+      - Hot reloading
+      - Works with virtually any React component
+      - No convoluted APIs to learn
+      - No boilerplate required
+      - Routing with react-router
+      - Works with CSS-in-JS libraries like styled-components
+      - Support for async data fetching
+    </pre>
+    <pre>Get Started</pre>
   </div>
 ))
 
 App.getInitialProps = async ({ Component, html, pathname }) => {
-  const fetch = require('isomorphic-fetch')
-  const endpoint = 'https://microbeats.now.sh/tracks'
-  const microbeats = await fetch(endpoint)
-  const tracks = await microbeats.json()
+  // const fetch = require('isomorphic-fetch')
+  // const endpoint = 'https://microbeats.now.sh/tracks'
+  // const microbeats = await fetch(endpoint)
+  // const tracks = await microbeats.json()
   const css = cxs.css()
 
-  return { hello: 'hi', css, tracks }
+  return {
+    css,
+    // tracks
+  }
 }
 
 export default App

docs/Box.js

@@ -0,0 +1,19 @@
+import styled from 'cxs/component'
+import {
+  space,
+  width,
+  fontSize,
+  color,
+  propTypes
+} from 'styled-system'
+
+const Box = styled('div')(space, width, fontSize, color)
+
+Box.propTypes = {
+  ...propTypes.space,
+  ...propTypes.width,
+  ...propTypes.fontSize,
+  ...propTypes.color
+}
+
+export default Box

docs/Flex.js

@@ -0,0 +1,20 @@
+import styled from 'cxs/component'
+import {
+  alignItems,
+  justifyContent,
+  wrap,
+  propTypes
+} from 'styled-system'
+import Box from './Box'
+
+const Flex = styled(Box)({
+  display: 'flex'
+}, alignItems, justifyContent, wrap)
+
+Flex.propTypes = {
+  ...propTypes.alignItems,
+  ...propTypes.justifyContent,
+  ...propTypes.wrap
+}
+
+export default Flex

docs/Style.js

@@ -12,6 +12,7 @@ const base = `
 *{box-sizing:border-box}
 body {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: 'Roboto Mono', Menlo, monospace;
   line-height: 1.5;
   color: white;
   background-color: black;

docs/Title.js

@@ -1,7 +1,14 @@
 import cxs from 'cxs/component'
+import { space } from 'styled-system'
 
 const Title = cxs('h1')({
-  color: 'tomato'
-})
+  display: 'inline-block',
+  color: 'black',
+  backgroundColor: 'cyan'
+}, space)
+
+Title.defaultProps = {
+  px: 2
+}
 
 export default Title

lib/dev/config.js

@@ -3,7 +3,8 @@ const webpack = require('webpack')
 
 // dev webpack config
 module.exports = {
-  devtool: 'eval',
+  // devtool: 'eval',
+  devtool: 'source-map',
   entry: [
     path.join(__dirname, './entry'),
   ],
@@ -39,6 +40,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    // new webpack.HotModuleReplacementPlugin()
   ]
 }

package.json

@@ -34,14 +34,16 @@
     "read-pkg-up": "^2.0.0",
     "update-notifier": "^2.2.0",
     "webpack": "^3.5.6",
-    "webpack-dev-server": "2.7.1"
+    "webpack-dev-server": "^2.9.1"
   },
   "devDependencies": {
+    "@compositor/logo": "^1.2.2",
     "ava": "^0.22.0",
     "cxs": "^6.1.0",
     "isomorphic-fetch": "^2.2.1",
     "nyc": "^11.2.1",
-    "refunk": "^2.0.0-1"
+    "refunk": "^2.0.0-1",
+    "styled-system": "^1.0.7"
   },
   "x0": {
     "title": "Compositor x0",