changelog

changelog.js

@@ -0,0 +1,74 @@
+module.exports = {
+
+  "June 2018": [
+    "Added a section on direct curve fitting.",
+    "Added source links for all graphics.",
+    "Added the \"What's new?\" section."
+  ],
+
+  "April 2017": [
+    "Added a section on 3d normals.",
+    "Added live-updatign for the social link buttons, so it points to the specific section you're reading."
+  ],
+
+  "February 2017": [
+    "Finished rewriting the entire codebase for localization."
+  ],
+
+  "January 2016": [
+    "Added a section the Bezier interval."
+  ],
+
+  "December 2015": [
+    "Set up the split repository between BezierInfo-2 as development repository, and bezierinfo as live page.",
+    "Removed the need for client-side LaTeX parsing entirely."
+  ],
+
+  "May 2015": [
+    "Switched over to pure JS rather than Processing using Processing.js",
+    "Added Cardano's algorithm."
+  ],
+
+  "April 2015": [
+    "Added a section on arc length approximations."
+  ],
+
+  "February 2015": [
+    "Added a section on the canonical cubic Bezier form."
+  ],
+
+  "November 2014": [
+    "Switched to HTTPS."
+  ],
+
+  "July 2014": [
+    "Added the section on arc approximation."
+  ],
+
+  "April 2014": [
+    "Added the section on Catmull-Rom fitting."
+  ],
+
+  "November 2013": [
+    "Added the section on Catmull-Rom / Bezier conversion.",
+    "Added the section on Bezier cuves as matrices"
+  ],
+
+  "April 2013": [
+    "Added a section on poly-Bbeziers.",
+    "Added a section on boolean shape operations."
+  ],
+
+  "March 2013": [
+    "First drastic rewrite",
+    "Added the sections on circle approximations.",
+    "Added a section on projecting a point on a curve.",
+    "Added a section on tangents and normals.",
+    "Added Legendre-Gauss numerical data tables."
+  ],
+
+  "October 2011": [
+    "First github commit, based on the pre-Primer webpage that covered the basics of Bezier curves in HTML with Processing.js example."
+  ]
+
+};

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>
     );

stylesheets/changelog.less

@@ -0,0 +1,25 @@
+section.whats-new {
+
+  font-size: 90%;
+
+  background: rgba(150,150,50,.05);
+  border: 1px solid gray;
+  padding: 0.25em 1em;
+  box-sizing: border-box;
+
+  width: 70%;
+  margin: 1em auto -1em;
+
+  h2 {
+    margin: 0;
+    margin-top: 0.25em;
+  }
+
+  p.click-me {
+    font-size: 90%;
+
+    color: #0000c8;
+    font-style: italic;
+    cursor: pointer;
+  }
+}

stylesheets/style.base.css

@@ -132,6 +132,25 @@ navigation.compact ul li {
 navigation.compact ul li:not(:last-child) {
   margin-right: 1em;
 }
+section.whats-new {
+  font-size: 90%;
+  background: rgba(150, 150, 50, 0.05);
+  border: 1px solid gray;
+  padding: 0.25em 1em;
+  box-sizing: border-box;
+  width: 70%;
+  margin: 1em auto -1em;
+}
+section.whats-new h2 {
+  margin: 0;
+  margin-top: 0.25em;
+}
+section.whats-new p.click-me {
+  font-size: 90%;
+  color: #0000c8;
+  font-style: italic;
+  cursor: pointer;
+}
 section {
   margin-top: 4em;
 }

stylesheets/style.less

@@ -55,6 +55,7 @@ footer {
 @import "ribbon.less";
 @import "locale-switcher.less";
 @import "navigation.less";
+@import "changelog.less";
 @import "section.less";
 @import "howtocode.less";
 @import "figure.less";