Merge branch 'demos'

Author: queerviolet

app/main.jsx

@@ -8,9 +8,7 @@ import NotFound from './components/NotFound'
 
 import firebase from 'APP/fire'
 
-// -- // Demo components // -- //
-import Scratchpad from 'APP/demos/scratchpad'
-import Whiteboard from 'APP/demos/whiteboard'
+import Demos from 'APP/demos'
 
 // Get the auth API from Firebase.
 const auth = firebase.auth()
@@ -56,9 +54,8 @@ const App = ({children}) =>
 render(
   <Router history={browserHistory}>
     <Route path="/" component={App}>
-      <IndexRedirect to="scratchpad/welcome"/>
-      <Route path="scratchpad/:title" component={Scratchpad}/>
-      <Route path="whiteboard/:title" component={Whiteboard}/>
+      <IndexRedirect to="demos"/>
+      {Demos /* Put all the demos and a description page at /demos */}
     </Route>
     <Route path='*' component={NotFound}/>
   </Router>,

demos/index.jsx

@@ -0,0 +1,27 @@
+'use strict'
+import React from 'react'
+import {Route, IndexRedirect, IndexRoute, Link} from 'react-router'
+
+import Scratchpad from './scratchpad'
+import Whiteboard from './whiteboard'
+
+const Index = ({children}) => <div>
+  <h1>Demos!</h1>
+  <h2><Link to='demos/scratchpad/welcome'>Scratchpad</Link></h2>
+  <p>
+    The scratchpad is the very simplest React/Firebase demo—a text area
+    whose content is synced with Firebase.
+  </p>
+
+  <h2><Link to='demos/whiteboard/welcome'>Whiteboard</Link></h2>
+  <p>
+    The whiteboard demonstrates the <i>journal</i> pattern, a way to use Firebase
+    to synchronize the state of Redux stores on all collaborators machines.
+  </p>
+</div>
+
+export default <Route path="/demos" component={({children}) => children}>
+  <IndexRoute component={Index}/>
+  <Route path='scratchpad/:title' component={Scratchpad}/>
+  <Route path='whiteboard/:title' component={Whiteboard}/>
+</Route>