Adjust docs layout

README.md

@@ -369,6 +369,8 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
 
 - [ ] props.Component in custom apps
 - [ ] peer deps
+- [ ] Head component with react helmet
+- [ ] changelog/docs
 - [x] default route sorting
 - [x] route dirname/full path
 - [x] pass front-matter as props

docs/_app.js

@@ -7,6 +7,7 @@ import {
   Box,
   Container,
 } from 'rebass'
+import Layout from './_layout'
 
 export default class App extends React.Component {
   static defaultProps = {
@@ -18,8 +19,12 @@ export default class App extends React.Component {
 
     return (
       <ScopeProvider scope={scope}>
-        <Flex>
-          {true && (
+        {false ? (
+          <Layout>
+            {render()}
+          </Layout>
+        ) : (
+          <Flex>
             <Box p={2} flex='none' width={192}>
               <ul>
                 {routes.map(route => (
@@ -31,13 +36,13 @@ export default class App extends React.Component {
                 ))}
               </ul>
             </Box>
-          )}
-          <Box width={1} p={3}>
-            <Container maxWidth={768}>
-              {render()}
-            </Container>
-          </Box>
-        </Flex>
+            <Box width={1} p={3}>
+              <Container maxWidth={768}>
+                {render()}
+              </Container>
+            </Box>
+          </Flex>
+        )}
       </ScopeProvider>
     )
   }

docs/_layout.js

@@ -12,7 +12,7 @@ import { Link } from 'react-router-dom'
 import { Logo } from '@compositor/logo'
 import theme from './theme'
 
-export default ({ render }) =>
+export default ({ children }) =>
   <Provider theme={theme}>
     <Flex alignItems='center'>
       <BlockLink
@@ -36,7 +36,7 @@ export default ({ render }) =>
         </Caps>
       </BlockLink>
     </Flex>
-    {render()}
+    {children}
     <Container>
       <Flex py={4} mt={5} flexWrap='wrap'>
         <BlockLink my={2} mr={3} href='https://github.com/c8r/x0'>

src/index.js

@@ -1,3 +1,4 @@
+export { Link, NavLink } from 'react-router-dom'
 export { default as ScopeProvider } from './ScopeProvider'
 export { default as LiveEditor } from './LiveEditor'
 export { default as LivePreview } from './LivePreview'