feat(docz): add routes from parsed entries

packages/playgrodd-core/src/Entry.ts

@@ -30,9 +30,10 @@ export class Entry {
   constructor({ src, file }: IConstructorParams) {
     const ast = convertToAst(file)
     const name = getNameFromDoc(ast) || ''
-    const route = path.join('/', path.parse(file).dir, name)
-    const source = path.relative(paths.root, src)
-    const filepath = path.relative(source, file)
+    const srcPath = path.resolve(paths.root, src)
+    const filepath = path.relative(path.relative(paths.root, src), file)
+    const dir = path.relative(srcPath, path.parse(file).dir)
+    const route = path.join('/', dir, name)
 
     this.name = name
     this.route = route

packages/playgrodd-core/templates/app.tpl.js

@@ -4,6 +4,8 @@ import React from 'react'
 import { hot } from 'react-hot-loader'
 import { Theme } from '<%- THEME %>'
 
+window.__DOCZ_ROUTES__ = <%- ROUTES %>
+
 const _wrappers = [<%- WRAPPERS %>]
 
 const recursiveWrappers = ([Wrapper, ...rest], props) => (
@@ -17,7 +19,7 @@ const Wrapper = props =>
 
 const WrappedTheme = () => (
   <Wrapper>
-    <Theme routes={<%- ROUTES %>} />
+    <Theme />
   </Wrapper>
 )
 

packages/playgrodd/package.json

@@ -17,8 +17,8 @@
     "fix:tslint": "tslint --fix --project ."
   },
   "dependencies": {
-    "playgrodd-core": "^0.0.1",
     "playgrodd-bundler-webpack": "^0.0.1",
+    "playgrodd-core": "^0.0.1",
     "playgrodd-theme-default": "^0.0.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.1",

packages/playgrodd/src/Doc.ts

@@ -1,6 +1,6 @@
 import { ulid } from 'ulid'
 import { Section, DocConstructorArgs } from 'playgrodd'
-import { container } from './DocsContainer'
+import { docsContainer } from './DocsContainer'
 
 const isFn = (value: any): boolean => typeof value === 'function'
 
@@ -72,7 +72,11 @@ export class Doc {
   }
 
   public get docRoute(): string {
-    return this._route
+    const ROUTES =
+      window && typeof window !== 'undefined' && (window as any).__DOCZ_ROUTES__
+
+    if (this._route !== `/${this._name}`) return this._route
+    return ROUTES ? ROUTES[this._name] : this._route
   }
 
   public get docOrder(): number {
@@ -83,6 +87,6 @@ export class Doc {
 export const doc = (name: string): Doc => {
   const newDoc = new Doc({ name })
 
-  container.addDoc(newDoc)
+  docsContainer.addDoc(newDoc)
   return newDoc
 }

packages/playgrodd/src/DocsContainer.ts

@@ -8,7 +8,9 @@ interface DocsState {
 export class DocsContainer extends Container<DocsState> {
   constructor() {
     super()
-    this.state = { docs: {} }
+    this.state = {
+      docs: {},
+    }
   }
 
   public addDoc(doc: Doc) {
@@ -20,4 +22,4 @@ export class DocsContainer extends Container<DocsState> {
   }
 }
 
-export const container = new DocsContainer()
+export const docsContainer = new DocsContainer()

packages/playgrodd/src/components/create-theme.tsx

@@ -1,19 +1,26 @@
+import { ComponentType } from 'react'
 import * as React from 'react'
 import { Router } from 'react-router-dom'
 import { createBrowserHistory, History } from 'history'
 import { Provider } from 'unstated'
 
-import { container } from '../DocsContainer'
+import { docsContainer } from '../DocsContainer'
 
 export const history: History = createBrowserHistory()
 
+interface ICreateThemeProps {
+  routes: {
+    [key: string]: string
+  }
+}
+
 interface ICreateTheme {
-  (WrappedComponent: React.ComponentType): React.ComponentType
+  (WrappedComponent: ComponentType): ComponentType<ICreateThemeProps>
 }
 
 export const createTheme: ICreateTheme = WrappedComponent => () => (
   <Router history={history}>
-    <Provider inject={[container]}>
+    <Provider inject={[docsContainer]}>
       <WrappedComponent />
     </Provider>
   </Router>