changelog

components/Changelog.jsx

@@ -0,0 +1,52 @@
+var React = require("react");
+var changelog = require("../changelog");
+
+var Changelog = React.createClass({
+  getInitialState: function() {
+    return { showContent: false };
+  },
+
+  getContent: function() {
+    var headers = Object.keys(changelog);
+    return headers.map(header => {
+      return (
+        <div className="period">
+          <h3>{header}</h3>
+          <ul className="changes">
+            {  changelog[header].map(line => <li>{line}</li>)}
+          </ul>
+        </div>
+      );
+    });
+  },
+
+  toggle: function() {
+    console.log("setting state");
+    this.setState({
+      showContent: !this.state.showContent
+    });
+  },
+
+  render: function() {
+    var content = '';
+
+    if (this.state.showContent) {
+      content = this.getContent();
+    }
+
+    return (
+      <section className="whats-new">
+        <h2>What's new?</h2>
+        <p>
+          This primer is a living document, and so depending on when you last
+          look at it, there may be new content. Click the following link to
+          expand this section to have a look at what got added, when.
+        </p>
+        <p className={'click-me'} onClick={this.toggle}>Click here to {this.state.showContent? 'hide' : 'view'} the change log.</p>
+        <div>{ content }</div>
+      </section>
+    );
+  }
+});
+
+module.exports = Changelog;

components/Graphic.jsx

@@ -26,7 +26,7 @@ var baseClass = {
       <figure className={this.props.inline ? "inline": false}>
         <canvas ref="canvas" {...cprops} {...handlers} />
         <figcaption>
-          <a className="source" href={sourceLink}>source</a>
+          <a className="source" href={sourceLink}>view source</a>
           {this.props.title}
           {this.props.children}
         </figcaption>

components/Page.jsx

@@ -2,6 +2,7 @@ var React = require("react");
 
 var Ribbon = require("./Ribbon.jsx");
 var Header = require("./Header.jsx");
+var Changelog = require("./Changelog.jsx");
 var LocaleSwitcher = require("./localized").LocaleSwitcher;
 var Navigation = require("./Navigation.jsx");
 var Footer = require("./Footer.jsx");
@@ -21,6 +22,7 @@ var Page = React.createClass({
       <div>
         <LocaleSwitcher/>
         <Navigation/>
+        <Changelog/>
         {this.props.children}
       </div>
     );