proper div escaping during locale conversion

components/sections/control/index.js

@@ -1,11 +1,13 @@
 var React = require("react");
-var Graphic = require("../../Graphic.jsx");
-var SectionHeader = require("../../SectionHeader.jsx");
+
+var Locale = require("../../../lib/locale");
+var locale = new Locale("en-GB");
+var page = "control";
 
 var Control = React.createClass({
   getDefaultProps: function() {
     return {
-      title: "Controlling Bézier curvatures"
+      title: locale.getTitle(page)
     };
   },
 
@@ -168,99 +170,7 @@ var Control = React.createClass({
   },
 
   render: function() {
-    return (
-      <section>
-        <SectionHeader {...this.props} />
-
-        <p>Bézier curves are (like all "splines") interpolation functions, meaning they take a set of
-        points, and generate values somewhere "between" those points. (One of the consequences of this
-        is that you'll never be able to generate a point that lies outside the outline for the control
-        points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize
-        how each point contributes to the value generated by the function, so we can see which points are
-        important, where, in the curve.</p>
-
-        <p>The following graphs show the interpolation functions for quadratic and cubic curves, with "S"
-        being the strength of a point's contribution to the total sum of the Bézier function. Click or
-        click-drag to see the interpolation percentages for each curve-defining point at a
-        specific <i>t</i> value.</p>
-
-        <div className="figure">
-          <Graphic inline={true} preset="simple" title="Quadratic interpolations"  draw={this.drawQuadraticLerp}/>
-          <Graphic inline={true} preset="simple" title="Cubic interpolations"      draw={this.drawCubicLerp}/>
-          <Graphic inline={true} preset="simple" title="15th order interpolations" draw={this.draw15thLerp}/>
-        </div>
-
-        <p>Also shown is the interpolation function for a 15<sup>th</sup> order Bézier function. As you can see,
-        the start and end point contribute considerably more to the curve's shape than any other point
-        in the control point set.</p>
-
-        <p>If we want to change the curve, we need to change the weights of each point, effectively changing
-        the interpolations. The way to do this is about as straight forward as possible: just multiply each
-        point with a value that changes its strength. These values are conventionally called "Weights", and
-        we can add them to our original Bézier function:</p>
-
-        <p>\[
-          Bézier(n,t) = \sum_{i=0}^{n}
-                        \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
-                        \cdot\
-                        \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
-                        \cdot\
-                        \underset{weight}{\underbrace{w_i}}
-        \]</p>
-
-        <p>That looks complicated, but as it so happens, the "weights" are actually just the coordinate values
-        we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate,
-        w<sub>n</sub> is our last coordinate, and everything in between is a controlling coordinate. Say we want
-        a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40),
-        we use this Bézier curve:</p>
-
-        <p>\[
-        \left \{ \begin{matrix}
-          x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
-          y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
-        \end{matrix} \right. \]</p>
-
-        <p>Which gives us the curve we saw at the top of the article:</p>
-
-        <Graphic preset="simple" title="Our cubic Bézier curve" setup={this.drawCubic} draw={this.drawCurve}/>
-
-        <p>What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers
-        a multitude of possible operations and algorithms that we can apply, and the tasks they achieve.</p>
-
-        <div className="howtocode">
-          <h3>How to implement the weighted basis function</h3>
-
-          <p>Given that we already know how to implement basis function, adding in the control points
-          is remarkably easy:</p>
-
-<pre>function Bezier(n,t,w[]):
-  sum = 0
-  for(k=0; k<n; k++):
-    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
-  return sum</pre>
-
-          <p>And for the extremely optimized versions:</p>
-
-<pre>function Bezier(2,t,w[]):
-  t2 = t * t
-  mt = 1-t
-  mt2 = mt * mt
-  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2
-
-function Bezier(3,t,w[]):
-  t2 = t * t
-  t3 = t2 * t
-  mt = 1-t
-  mt2 = mt * mt
-  mt3 = mt2 * mt
-  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3</pre>
-
-          <p>And now we know how to program the weighted basis function.</p>
-        </div>
-
-
-      </section>
-    );
+    return <section>{ locale.getContent(page, this) }</section>;
   }
 });