further experiments in generating a pure html/js page, with React as build tool only

.gitignore

@@ -6,3 +6,5 @@ components/sections/**/index.js
 !components/sections/index.js
 .buildmark
 npm-debug.log
+# this gets to be here for as long as I've not figured out how to do the full surgery
+index.full.html

components/sections/index.js

@@ -1,15 +1,22 @@
 /**
- * This is an ordered list of all sections for the article
+ * This is an ordered list of all sections used in the Bezier primer.
- * @type {Object}
+ *
+ * The ordering you see here reflects the ordering in which sections
+ * are present on the Primer page: do not change them unless there is
+ * a REALLY good reason to =)
+ *
  */
 module.exports = {
   preface: require("./preface"),
+
+  // the basic topic(s) introduction(s)
   introduction: require("./introduction"),
   whatis: require("./whatis"),
   explanation: require("./explanation"),
   control: require("./control"),
   extended: require("./extended"),
 
+  // basic operations
   matrix: require("./matrix"),
   decasteljau: require("./decasteljau"),
   flattening: require("./flattening"),
@@ -17,6 +24,7 @@ module.exports = {
   matrixsplit: require("./matrixsplit"),
   reordering: require("./reordering"),
 
+  // information that can be obtained through analysis
   derivatives: require("./derivatives"),
   pointvectors: require("./pointvectors"),
   components: require("./components"),
@@ -27,33 +35,41 @@ module.exports = {
   inflections: require("./inflections"),
   canonical: require("./canonical"),
 
+  // accurate arc length is hard, yo
   arclength: require("./arclength"),
   arclengthapprox: require("./arclengthapprox"),
   tracing: require("./tracing"),
 
+  // curve intersections
   intersections: require("./intersections"),
   curveintersection: require("./curveintersection"),
 
+  // curve manipulation
   abc: require("./abc"),
   moulding: require("./moulding"),
   pointcurves: require("./pointcurves"),
 
+  // A quick foray into Catmull-Rom splines
   catmullconv: require("./catmullconv"),
   catmullmoulding: require("./catmullmoulding"),
 
+  // "things made of more than on curve"
   polybezier: require("./polybezier"),
-
   shapes: require("./shapes"),
 
+  // curve offsetting
   projections: require("./projections"),
   offsetting: require("./offsetting"),
   graduatedoffset: require("./graduatedoffset"),
 
+  // circle and arc approximation
   circles: require("./circles"),
   circles_cubic: require("./circles_cubic"),
   arcapproximation: require("./arcapproximation"),
 
+  // A quick foray in to B-Spline land
   bsplines: require("./bsplines"),
 
+  // comments come last for obvious reasons
   comments: require("./comments")
 };

tools/render-to-string.js

@@ -0,0 +1,33 @@
+/**********************************************************************
+ *
+ *  This script takes the article as generated by webpack, and uses the
+ *  ReactDOMServer library to serialize it to pure HTML markup. This is
+ *  then injected into the index.html template, with code injected to
+ *  load the
+ *
+ **********************************************************************/
+
+var fs = require("fs-extra");
+var path = require("path");
+const BASEDIR = path.join(__dirname, "..");
+
+var React = require("react");
+var Server = require("react-dom/server");
+
+var FullArticle = require(path.join(BASEDIR, "./article")).FullArticle;
+var article = React.createElement(FullArticle, {});
+var staticMarkup = Server.renderToStaticMarkup(article);
+
+
+// make sure to remove the `<base>` tag from the index, and replace the JSX "className" with "class"
+var html = fs.readFileSync(path.join(BASEDIR, "index.template.html")).toString();
+html = html.replace('    <base href="..">\n', '');
+html = html.replace('<script src="en-GB/article.js');
+html = "<!-- AUTOGENERATED CONTENT, PLEASE EDIT 'index.template.html' INSTEAD! -->\n" + html;
+
+// surgery:
+var parts = html.split('<article>');
+var leadin = parts[0];
+var reassembled = leadin + staticMarkup + "  </body>\n</html>\n";
+
+fs.writeFileSync(path.join(BASEDIR, "index.full.html"), reassembled);

tools/test-render-to-string.js

@@ -1,10 +0,0 @@
-var fs = require("fs-extra");
-var React = require("react");
-var Server = require("react-dom/server");
-
-var FullArticle = require("./article").FullArticle;
-var article = React.createElement(FullArticle, {});
-var html = Server.renderToString(article);
-//var html = Server.renderToStaticMarkup(article);
-
-fs.writeFileSync("fullhtml.html", html);