Edit docs site

docs/_app.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Provider } from 'rebass'
+import theme from './theme'
+
+export default ({ render }) =>
+  <Provider theme={theme}>
+    {render()}
+  </Provider>

docs/_scope.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import * as Rebass from 'rebass'
+import { heading } from '@compositor/md'
+
+export default {
+  ...Rebass,
+  h1: heading(props =>
+    <Rebass.Heading
+      {...props}
+      is='h1'
+      fontSize={6}
+      mt={3}
+    />),
+  h2: heading(props =>
+    <Rebass.Heading
+      {...props}
+      is='h2'
+      fontSize={5}
+      mt={3}
+    />),
+  h3: heading(props =>
+    <Rebass.Heading
+      {...props}
+      is='h3'
+      fontSize={4}
+      mt={2}
+    />),
+  pre: props =>
+    <Rebass.Pre
+      {...props}
+      p={3}
+    />
+}

docs/docs.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import {
+  Container
+} from 'rebass'
+import styled from 'styled-components'
+import Readme from '../README.md'
+import scope from './_scope'
+
+const Prose = styled.div([], {
+  '& img': {
+    display: 'block',
+    maxWidth: '100%',
+    height: 'auto'
+  }
+})
+
+export default props =>
+  <Container py={5}>
+    <Prose>
+      <Readme
+        scope={scope}
+      />
+    </Prose>
+  </Container>

docs/index.js

@@ -1,33 +1,88 @@
 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',
+})
+
+// <Link to='/'>Home</Link>
+// <Link to='/docs'>Documentation</Link>
 
 export default class extends React.Component {
   render () {
     return (
       <React.Fragment>
-        <h1>Hello x0</h1>
-        <ul>
-          <li>
-            <Link to='/'>Home</Link>
-          </li>
-          <li>
-            <Link to='/hello'>Hello JSX</Link>
-          </li>
-          <li>
-            <Link to='/mdx'>MDX</Link>
-          </li>
-        </ul>
-        <video
-          style={{
-            maxWidth: '100%',
-            height: 'auto'
-          }}
-          autoPlay
-          loop
-          muted
-          playsInline>
-          <source src='/demo.mp4' />
-        </video>
+        <Container py={5}>
+          <Flex
+            mb={4}
+            alignItems='center'>
+            <Logo size={32} />
+            <Caps fontWeight='bold'>
+              Compositor
+            </Caps>
+          </Flex>
+          <Heading is='h1'
+            mb={2}
+            fontSize={[ 5, 6, 7 ]}>
+            x0
+          </Heading>
+          <Text
+            mb={4}
+            fontWeight='bold'
+            fontSize={4}>
+            Zero-config React development environment & static site generator
+          </Text>
+          <Box mb={4}>
+            <Video
+              autoPlay
+              loop
+              muted
+              playsInline
+              poster='demo.gif'
+              src='demo.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>
+          <Flex py={4} mt={5}>
+            <Text fontSize={0}>
+              © 2018 Compositor, Inc. All rights reserved
+            </Text>
+          </Flex>
+        </Container>
       </React.Fragment>
     )
   }

docs/theme.js

@@ -0,0 +1,8 @@
+import { theme } from 'rebass'
+
+export default {
+  ...theme,
+  radii: [
+    0, 4, 8, 16
+  ]
+}

docs/webpack.config.js

@@ -3,7 +3,20 @@ module.exports = {
     rules: [
       {
         test: /\.md$/,
-        use: 'raw-loader'
+        use: [
+          // 'raw-loader'
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                'env',
+                'stage-0',
+                'react'
+              ]
+            }
+          },
+          '@compositor/md-loader'
+        ]
       }
     ]
   }

package.json

@@ -55,10 +55,13 @@
     "webpack-serve": "^1.0.2"
   },
   "devDependencies": {
+    "@compositor/logo": "^1.3.5",
+    "@compositor/md-loader": "^1.0.27",
     "ava": "^0.25.0",
     "isomorphic-fetch": "^2.2.1",
     "nano-style": "^1.0.0",
     "nyc": "^11.8.0",
+    "raw-loader": "^0.5.1",
     "rebass": "^2.0.0-2",
     "refunk": "^3.0.1",
     "rimraf": "^2.6.2",
@@ -67,7 +70,7 @@
   },
   "x0": {
     "title": "Compositor x0",
-    "basename": "/x0"
+    "_basename": "/x0"
   },
   "ava": {
     "files": [