Add basic 404

README.md

@@ -370,8 +370,8 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
 
 - [ ] changelog/docs
 
-- [ ] 404 in SidebarLayout
-- [ ] 404s generally
+- [ ] static 404 output
+- [x] 404
 - [x] Sidebar minHeight/pagination
 - [x] Sidebar hidePagination option
 - [x] bug: route.props from defaultProps

docs/404.md

@@ -0,0 +1,2 @@
+
+# Page not found

docs/_app.js

@@ -26,6 +26,7 @@ export default class App extends React.Component {
 
     // built-in layout test
     if (true) {
+      // const logo = <div style={{ width: 32, height: 32, backgroundColor: 'tomato' }} />
       return (
         <ScopeProvider scope={scope}>
           <SidebarLayout {...this.props} />

docs/examples/index.js

@@ -1,4 +1 @@
-import React from 'react'
-import { Library } from '../../components'
-
-export default Library
+export { Library as default } from '../../components'

src/SidebarLayout.js

@@ -142,12 +142,14 @@ const format = str => upperFirst(unhyphenate(str))
 
 const NavBar = ({
   title,
+  logo,
   focus,
   update,
 }) =>
   <Toolbar
     color='inherit'
     bg='transparent'>
+    {logo}
     <Heading
       px={2}
       fontSize={1}>
@@ -211,7 +213,11 @@ export const Pagination = ({ previous, next }) =>
     )}
   </Flex>
 
-const MobileNav = ({ title, update, }) =>
+const MobileNav = ({
+  title,
+  logo,
+  update
+}) =>
   <MobileOnly>
     <Toolbar px={0} color='inherit' bg='transparent'>
       <ButtonTransparent
@@ -221,7 +227,7 @@ const MobileNav = ({ title, update, }) =>
         mr='auto'
         title='Toggle Menu'
         onClick={e => update(toggle('menu'))}>
-        <MenuIcon />
+        {logo || <MenuIcon />}
       </ButtonTransparent>
       <Heading fontSize={1}>
         {title}
@@ -253,6 +259,7 @@ export default class Layout extends React.Component {
       route,
       location,
       title = 'x0',
+      logo,
       // theme,
       // color,
     } = this.props
@@ -273,6 +280,7 @@ export default class Layout extends React.Component {
       <React.Fragment>
         <MobileNav
           title={title}
+          logo={logo}
           update={update}
         />
 
@@ -283,6 +291,7 @@ export default class Layout extends React.Component {
             onClick={e => update(close)}>
             <Nav
               title={title}
+              logo={logo}
               routes={routes}
               update={update}
             />

src/entry.js

@@ -35,26 +35,18 @@ const getComponents = req => req.keys()
     module: req(key),
     Component: req(key).default || req(key),
   }))
+  .filter(component => !/404/.test(component.name))
   .filter(component => typeof component.Component === 'function')
 
 const initialComponents = getComponents(req)
 
 const DefaultApp = props => props.children
-const xDefaultApp = ({ children, routes }) => (
-  <Switch>
-    {children}
-    <Route render={props => (
-      <FileList
-        {...props}
-        routes={routes}
-      />
-    )} />
-  </Switch>
-)
 
 const Router = IS_CLIENT ? BrowserRouter : StaticRouter
 const appPath = req.keys().find(key => key === './_app.js')
 const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
+const notFoundPath = req.keys().find(key => /404/.test(key))
+const NotFound = notFoundPath ? (req(notFoundPath).default) : FileList
 
 export const getRoutes = async (components = initialComponents) => {
   const promises = await components.map(async ({
@@ -127,9 +119,6 @@ export default class Root extends React.Component {
       path = '/'
     } = this.props
 
-    // add customization options
-    const NotFound = FileList
-
     const render = appProps => (
       <Switch>
         {routes.map(({ Component, ...route }) => (