diff --git a/docs/App.js b/docs/App.js
index c9a0206..f2243d0 100644
--- a/docs/App.js
+++ b/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 => (
@@ -13,18 +15,39 @@ const App = connect(props => (
{props.title}
+
Compositor
x0
+
{pkg.description}
+
v{pkg.version}
+
video
+
tweet
+
github
+
+ - 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
+
+
Get Started
))
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
diff --git a/docs/Box.js b/docs/Box.js
new file mode 100644
index 0000000..142b9cf
--- /dev/null
+++ b/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
diff --git a/docs/Flex.js b/docs/Flex.js
new file mode 100644
index 0000000..8d3feb7
--- /dev/null
+++ b/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
diff --git a/docs/Style.js b/docs/Style.js
index efcbcfa..35eaf30 100644
--- a/docs/Style.js
+++ b/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;
diff --git a/docs/Title.js b/docs/Title.js
index 2f58398..1fa0813 100644
--- a/docs/Title.js
+++ b/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
diff --git a/docs/debug/index.html b/docs/debug/index.html
deleted file mode 100644
index 48e1486..0000000
--- a/docs/debug/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/lib/dev/config.js b/lib/dev/config.js
index 00665a2..ce4f736 100644
--- a/lib/dev/config.js
+++ b/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()
]
}
diff --git a/package.json b/package.json
index d78519c..d9855eb 100644
--- a/package.json
+++ b/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",