Move the demonstration components into their own router to avoid merge conflicts downstream.

Author: queerviolet

app/main.jsx

@@ -54,8 +54,8 @@ const App = ({children}) =>
 render(
   <Router history={browserHistory}>
     <Route path="/" component={App}>
-      <IndexRedirect to="demos/scratchpad/welcome"/>
-      {Demos}
+      <IndexRedirect to="demos"/>
+      {Demos /* Put all the demos and a description page at /demos */}
     </Route>
     <Route path='*' component={NotFound}/>
   </Router>,

demos/index.jsx

@@ -1,12 +1,27 @@
+'use strict'
 import React from 'react'
-import {Route} from 'react-router'
+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}>
-  <IndexRedirect to="scratchpad/welcome"/>
-  <Route path="scratchpad/:title" component={Scratchpad}/>
-  <Route path="whiteboard/:title" component={Whiteboard}/>
+  <IndexRoute component={Index}/>
+  <Route path='scratchpad/:title' component={Scratchpad}/>
+  <Route path='whiteboard/:title' component={Whiteboard}/>
 </Route>
-