Support for nested routing

README.md

@@ -367,13 +367,13 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
 
 **REMOVE BEFORE MERGING**
 
-- [ ] markdown scope
 - [ ] default route sorting
-- [x] deep require context
-- [ ] route dirname/full path
-- [ ] minimatch
-- [ ] pass front-matter as props
 - [ ] props.Component in custom apps
+- [x] route dirname/full path
+- [x] pass front-matter as props
+- [x] markdown scope
+- [x] deep require context
+- [x] minimatch
 - [x] move client modules to src
 - [x] adjust resolve
 

docs/_app.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import * as scope from 'rebass'
+import { Link } from 'react-router-dom'
 import { ScopeProvider } from '../src'
 import {
   Flex,
@@ -13,15 +14,24 @@ export default class App extends React.Component {
   }
 
   render () {
-    const { render } = this.props
-    console.log('custom app', this.props.routes)
+    const { routes, route, render } = this.props
+    console.log('custom app', routes)
+    console.log('route', route)
 
     return (
       <ScopeProvider scope={scope}>
         <Flex>
-          {false && (
+          {true && (
             <Box p={2} flex='none' width={192}>
-              custom app
+              <ul>
+                {routes.map(route => (
+                  <li key={route.key}>
+                    <Link to={route.href}>
+                      {route.name} <code>({route.path})</code>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
             </Box>
           )}
           <Box width={1} p={3}>

docs/_scope.js

@@ -1,46 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import * as Rebass from 'rebass'
-import { heading, link } from '@compositor/md'
-
-const Pre = styled(Rebass.Pre)({
-  borderRadius: '8px'
-})
-
-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}
-      mb={2}
-    />),
-  h3: heading(props =>
-    <Rebass.Heading
-      {...props}
-      is='h3'
-      fontSize={4}
-      mt={2}
-    />),
-  a: link(props =>
-    <Rebass.Link
-      {...props}
-    />
-  ),
-  pre: props =>
-    <Pre
-      {...props}
-      p={3}
-      mb={3}
-      bg='#f6f6fc'
-    />
-}

docs/components.md

@@ -1,6 +1,7 @@
 ---
 title: Components
 ---
+import { Box } from 'rebass'
 
 # Components
 
@@ -11,3 +12,8 @@ This is a live/editable code block:
 ```.jsx
 <Box p={4} bg='tomato'>Hello</Box>
 ```
+
+---
+
+<Box>fm title: {frontMatter.title}</Box>
+

docs/dynamic.js

@@ -26,12 +26,18 @@ export default class extends React.Component {
   }
 
   render () {
+    const { match } = this.props
+
     return <div>
       <pre>dynamic routing</pre>
       <Link to='/'>Home</Link>
       <Link to='/dynamic'>Dynamic Routes</Link>
       <Link to='/dynamic/hello'>Hello</Link>
       <Link to='/dynamic/hi'>Hi</Link>
+
+      {match.params.id && (
+        <h1>{match.params.id}</h1>
+      )}
     </div>
   }
 }

docs/examples/index.md

@@ -1,2 +1,4 @@
 
 # Examples
+
+- [Button](Button.md)

docs/readme.js

@@ -4,7 +4,6 @@ import {
 } from 'rebass'
 import styled from 'styled-components'
 import Readme from '../README.md'
-import scope from './_scope'
 
 const Prose = styled.div([], {
   '& img': {
@@ -20,8 +19,6 @@ const Prose = styled.div([], {
 export default props =>
   <Container py={5}>
     <Prose>
-      <Readme
-        scope={scope}
-      />
+      <Readme />
     </Prose>
   </Container>

examples/jsx/pages/index.jsx

@@ -1,7 +1,8 @@
 ---
 title: Hello JSX
-scope: import scope from './_scope'
 ---
+import { Box, Heading, Text, Link } from 'rebass'
+
 <Box px={3} py={4}>
   <Heading is='h1' mb={2}>
     {props.title}

package.json

@@ -2,7 +2,7 @@
   "name": "@compositor/x0",
   "version": "5.0.8",
   "description": "Zero-config React development environment and static site generator",
-  "main": "index.js",
+  "main": "src/index.js",
   "bin": {
     "x0": "cli.js"
   },

src/entry.js

@@ -10,10 +10,10 @@ import {
   Link,
   withRouter
 } from 'react-router-dom'
+import { Provider as RebassProvider } from 'rebass'
 import minimatch from 'minimatch'
 
 import Catch from './Catch'
-import ScopeProvider from './ScopeProvider'
 import FileList from './FileList'
 import ScrollTop from './ScrollTop'
 
@@ -23,17 +23,13 @@ const req = require.context(DIRNAME, true, /\.(js|md|mdx|jsx)$/)
 const { filename, basename = '', disableScroll } = OPTIONS
 const index = filename ? path.basename(filename, path.extname(filename)) : 'index'
 
-req.keys().forEach(key => {
-  console.log(key, minimatch(key.replace(/^\.\//, ''), MATCH) )
-})
-
 const getComponents = req => req.keys()
   .filter(key => !MATCH || minimatch(key.replace(/^\.\//, ''), MATCH))
   .map(key => ({
     key,
     name: path.basename(key, path.extname(key)),
     module: req(key),
-    Component: req(key).default || req(key)
+    Component: req(key).default || req(key),
   }))
   .filter(component => !/^(\.|_)/.test(component.name))
   .filter(component => typeof component.Component === 'function')
@@ -58,14 +54,20 @@ const App = APP ? (require(APP).default || require(APP)) : DefaultApp
 export const getRoutes = async (components = initialComponents) => {
   const routes = await components.map(async ({ key, name, module, Component }) => {
     const exact = name === index
-    let pathname = exact ? '/' : '/' + name
-    const props = Component.getInitialProps
+    name = exact ? '/' : '/' + name
+    const dirname = path.dirname(key).replace(/^\./, '')
+    let pathname = dirname + (exact ? '/' : name)
+    const href = pathname
+    const initialProps = Component.getInitialProps
       ? await Component.getInitialProps({ path: pathname })
       : {}
+    const meta = module.frontMatter || {}
+    const props = { ...meta, ...initialProps }
     pathname = props.path || pathname
     return {
       key: name,
       name,
+      href,
       path: pathname,
       exact,
       module,
@@ -98,15 +100,13 @@ export default class Root extends React.Component {
       path = '/'
     } = this.props
 
-    console.log('App', App.defaultProps)
-
     return (
       <Router
         context={{}}
         basename={basename}
         location={path}>
         <React.Fragment>
-          <ScopeProvider>
+          <RebassProvider>
             <Catch>
               <RouterState
                 routes={routes}
@@ -135,7 +135,7 @@ export default class Root extends React.Component {
               />
             </Catch>
             {!disableScroll && <ScrollTop />}
-          </ScopeProvider>
+          </RebassProvider>
         </React.Fragment>
       </Router>
     )

src/index.js

@@ -1,3 +1,7 @@
 export { default as ScopeProvider } from './ScopeProvider'
 export { default as LiveEditor } from './LiveEditor'
+export { default as LivePreview } from './LivePreview'
+export { default as FileList } from './FileList'
+export { default as Catch } from './Catch'
+export { default as ScrollTop } from './ScrollTop'
 export { default as scope } from './scope'