Move docs around for development

docs/__app.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  Provider,
+  Flex,
+  Box,
+  Container,
+  Text,
+  Caps,
+  BlockLink,
+} from 'rebass'
+import { Link } from 'react-router-dom'
+import { Logo } from '@compositor/logo'
+import theme from './theme'
+
+export default ({ render }) =>
+  <Provider theme={theme}>
+    <Flex alignItems='center'>
+      <BlockLink
+        href='https://compositor.io'>
+        <Flex px={1} py={2} alignItems='center'>
+          <Logo size={32} />
+          <Caps fontWeight='bold'>
+            Compositor
+          </Caps>
+        </Flex>
+      </BlockLink>
+      <Box mx='auto' />
+      <BlockLink px={3} is={Link} to='/'>
+        <Caps fontWeight='bold'>
+          x0
+        </Caps>
+      </BlockLink>
+      <BlockLink px={3} href='https://github.com/c8r/x0'>
+        <Caps fontWeight='bold'>
+          GitHub
+        </Caps>
+      </BlockLink>
+    </Flex>
+    {render()}
+    <Container>
+      <Flex py={4} mt={5} flexWrap='wrap'>
+        <BlockLink my={2} mr={3} href='https://github.com/c8r/x0'>
+          <Caps fontWeight='bold'>
+            GitHub
+          </Caps>
+        </BlockLink>
+        <BlockLink my={2} mr={3} href='https://compositor.io'>
+          <Caps fontWeight='bold'>
+            Compositor
+          </Caps>
+        </BlockLink>
+        <Box mx='auto' />
+        <Text my={2} fontSize={0}>
+          © 2018 Compositor, Inc. All rights reserved
+        </Text>
+      </Flex>
+    </Container>
+  </Provider>

docs/beep.jsx

@@ -0,0 +1,8 @@
+---
+title: Beep JSX
+---
+import { Box, Heading } from 'rebass'
+
+<Box p={3} bg='tomato'>
+  <Heading>Beep JSX</Heading>
+</Box>

docs/components.md

@@ -0,0 +1,13 @@
+---
+title: Components
+---
+
+# Components
+
+This is a standard markdown file.
+
+This is a live/editable code block:
+
+```.jsx
+<h1>Hello</h1>
+```

docs/home.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import {
+  Container,
+  Box,
+  Flex,
+  Caps,
+  Heading,
+  Text,
+  Button,
+  Pre,
+} from 'rebass'
+import { Logo } from '@compositor/logo'
+
+const Video = styled.video([], {
+  display: 'block',
+  maxWidth: '100%',
+  height: 'auto',
+  borderRadius: '16px',
+})
+
+export default class extends React.Component {
+  render () {
+    return (
+      <React.Fragment>
+        <Container py={5}>
+          <Heading
+            is='h1'
+            mb={4}
+            lineHeight={1.125}
+            fontWeight='bold'
+            fontSize={[ 4, 5, 6 ]}>
+            x0: Zero-config React development environment & static site generator
+          </Heading>
+          <Box mb={4}>
+            <Video
+              autoPlay
+              loop
+              muted
+              playsInline
+              poster='hello-x0.gif'
+              src='hello-x0.mp4'
+            />
+          </Box>
+          <Pre>npm i -g @compositor/x0</Pre>
+          <Flex py={4}>
+            <Button
+              is='a'
+              px={4}
+              py={3}
+              bg='black'
+              href='https://github.com/c8r/x0'>
+              GitHub
+            </Button>
+            <Box mx={1} />
+            <Button
+              is={Link}
+              px={4}
+              py={3}
+              bg='black'
+              to='/docs'>
+              Documentation
+            </Button>
+          </Flex>
+        </Container>
+      </React.Fragment>
+    )
+  }
+}