dual rendering possible using --singles

components/App.jsx

@@ -1,13 +1,5 @@
 var React = require("react");
 var ReactDOM = require("react-dom");
-var Article = require("./Article.jsx");
-
-require("../stylesheets/style.less");
-
-ReactDOM.render(<Article/>, document.getElementById("article"), function() {
-  // trigger a #hash navigation
-  if (window.location.hash) {
-    var hash = window.location.hash;
-    window.location.hash = hash;
-  }
-});
+var FullArticle = require("./FullArticle.jsx");
+var generateSingleSection = require("../pages/generateSingleSection");
+ReactDOM.render(<FullArticle/>, document.getElementById("article"));

components/Article.jsx

@@ -1,62 +0,0 @@
-var React = require("react");
-var ReactDOM = require("react-dom");
-var Ribbon = require("./Ribbon.jsx");
-
-var Article = React.createClass({
-
-  getInitialState: function() {
-    return {
-      sections: require("./sections")
-    };
-  },
-
-  setSectionId: function(name, entry) {
-    ReactDOM.findDOMNode(this.refs[name]).setAttribute("id", name);
-  },
-
-  componentDidMount: function() {
-    // Not sure why this doesn't just work by passing a props.id
-    this.sectionMap(this.setSectionId);
-  },
-
-  sectionMap: function(mapping) {
-    return this.getSectionNames().map(mapping);
-  },
-
-  getSectionNames: function() {
-    return Object.keys(this.state.sections);
-  },
-
-  generateSection: function(name, entry) {
-    var Type = this.state.sections[name];
-    return <Type key={name} ref={name} name={name} number={entry}/>;
-  },
-
-  generateNavItem: function(section, entry) {
-    var name = section.props.name;
-    var title = section.props.title;
-    return <li key={name} data-number={entry}><a href={'#' + name}>{ title }</a></li>;
-  },
-
-  render: function() {
-    var sections = this.sectionMap(this.generateSection);
-    return (<div>
-      <Ribbon />
-      <div ref="navigation">
-        <navigation>
-          <ul className="navigation">
-          { sections.map(this.generateNavItem) }
-          </ul>
-        </navigation>
-      </div>
-      <div ref="sections">{ sections }</div>
-      <footer class="copyright">
-        This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code,
-        and images are <a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md">almost
-        no rights reserved</a>. Go do something cool with it!
-      </footer>
-    </div>);
-  }
-});
-
-module.exports = Article;

components/Footer.jsx

@@ -0,0 +1,17 @@
+var React = require('react');
+
+var Footer = React.createClass({
+
+  render: function() {
+    return (
+      <footer className="copyright">
+        This article is © 2011-2016 to me, Mike "Pomax" Kamermans, but the text, code,
+        and images are <a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md">almost
+        no rights reserved</a>. Go do something cool with it!
+      </footer>
+    );
+  }
+
+});
+
+module.exports = Footer;

components/FullArticle.jsx

@@ -0,0 +1,19 @@
+var React = require("react");
+var Page = require("./Page.jsx");
+
+var sectionList = require("./sections"),
+    sectionMap = function(mapping) {
+      return Object.keys(sectionList).map(mapping);
+    },
+    allSections = sectionMap(function(name, entry) {
+      var Type = sectionList[name];
+      return <Type key={name} name={name} number={entry} />;
+    });
+
+var FullArticle = React.createClass({
+  render: function() {
+    return <Page content={ allSections }/>;
+  }
+});
+
+module.exports = FullArticle;

components/Header.jsx

@@ -0,0 +1,14 @@
+var React = require('react');
+
+var Header = React.createClass({
+  render: function() {
+    return (
+      <header>
+        <h1>A Primer on Bézier Curves</h1>
+        <h2>A free, online book for when you really need to know how to do Bézier things.</h2>
+      </header>
+    );
+  }
+});
+
+module.exports = Header;

components/Navigation.jsx

@@ -0,0 +1,38 @@
+var React = require('react');
+var ReactRouter = require('react-router');
+var Link = ReactRouter.Link;
+
+var sections = require("./sections");
+var sectionPages = Object.keys(sections);
+
+// LESS is automatically turned into CSS and bundled in:
+require("../stylesheets/style.less");
+
+var Navigation = React.createClass({
+  generateNavItem: function(name, entry) {
+    var Type = sections[name];
+    var title = Type.getDefaultProps().title;
+    var link = <a href={'#' + name}>{ title }</a>;
+    if (this.props.fullNav) { link = <Link to={(name!=="preface") ? name : "/"}>{title}</Link>; }
+    return <li key={name} data-number={entry}>{link}</li>;
+  },
+
+  generateNav: function() {
+    if (this.props.compact) return null;
+    return (
+      <div ref="navigation">
+        <navigation className={ this.props.compact ? "compact" : null }>
+          <ul className="navigation">
+          { sectionPages.map(this.generateNavItem) }
+          </ul>
+        </navigation>
+      </div>
+    );
+  },
+
+  render: function() {
+    return this.generateNav();
+  }
+});
+
+module.exports = Navigation;

components/Page.jsx

@@ -0,0 +1,31 @@
+var React = require("react");
+
+var Ribbon = require("./Ribbon.jsx");
+var Header = require("./Header.jsx");
+var Relatives = require("./Relatives.jsx");
+var Navigation = require("./Navigation.jsx");
+var Footer = require("./Footer.jsx");
+
+var Page = React.createClass({
+  render: function() {
+    var nav = <Navigation compact={this.props.compact}/>;
+    var orderedContent = [nav].concat();
+    if (this.props.compact) {
+      orderedContent.splice(0,1);
+      orderedContent.push(nav);
+    }
+    return (
+      <div>
+        <Ribbon/>
+        <Header/>
+        {nav}
+        <Relatives prev={this.props.prev} next={this.props.next} position="before" />
+        {this.props.content}
+        <Relatives prev={this.props.prev} next={this.props.next} position="after" />
+        <Footer/>
+      </div>
+    );
+  }
+});
+
+module.exports = Page;

components/Relatives.jsx

@@ -0,0 +1,46 @@
+var React = require('react');
+var ReactRouter = require('react-router');
+var Link = ReactRouter.Link;
+
+var sections = require("./sections");
+var pageIDs = Object.keys(sections);
+
+var Relatives = React.createClass({
+  getInitialState() {
+    console.log(this.props);
+
+    var prev = this.props.prev;
+    if (prev > -1) {
+      prev = {
+        to: pageIDs[prev],
+        title: sections[pageIDs[prev]].getDefaultProps().title
+      };
+    } else { prev = false; }
+
+    var next = this.props.next;
+    if (next < pageIDs.length) {
+      next = {
+        to: pageIDs[next],
+        title: sections[pageIDs[next]].getDefaultProps().title
+      };
+    } else { next = false; }
+
+    return {
+      prev:  prev,
+      next: next
+    };
+  },
+
+  render: function() {
+    if (!this.props.prev && !this.props.next) return null;
+    return (
+      <div className={"relatives " + this.props.position}>
+        { !this.state.next ? null : <Link className="next" to={this.state.next.to}>{this.props.next + ". " + this.state.next.title}</Link> }
+        { this.state.prev ? <Link to="/">Index</Link> : null }
+        { !this.state.prev ? null : <Link className="prev" to={this.state.prev.to}>{this.props.prev + ". " + this.state.prev.title}</Link> }
+      </div>
+    );
+  }
+});
+
+module.exports = Relatives;

components/decorators/keyhandling-decorator.jsx

@@ -6,7 +6,8 @@ module.exports = function(Component) {
       propName = options.propName || "",
       values = options.values || {},
       controller = options.controller || noop,
-      getDefaultProps = Component.getDefaultProps;
+      getDefaultProps = Component.getDefaultProps,
+      ref = "wrappedComponent";
 
   return React.createClass({
     values: values,
@@ -26,8 +27,16 @@ module.exports = function(Component) {
       }
     },
 
+    getComponent: function() {
+      var wrappedComponent = this.refs[ref];
+      if (wrappedComponent.getComponent) {
+        return wrappedComponent.getComponent();
+      }
+      return wrappedComponent;
+    },
+
     render: function() {
-      return <Component {...this.props} onKeyDown={this.onKeyDown} />;
+      return <Component {...this.props} onKeyDown={this.onKeyDown} ref={ref} />;
     }
   });
 };