From b3ad275eceab4cee6a6180ee3bf3b9399cfc474b Mon Sep 17 00:00:00 2001 From: Pomax Date: Sun, 26 Mar 2017 12:10:47 -0700 Subject: [PATCH] further experiments in generating a pure html/js page, with React as build tool only --- .gitignore | 2 ++ components/sections/index.js | 22 +++++++++++++++++++--- tools/render-to-string.js | 33 +++++++++++++++++++++++++++++++++ tools/test-render-to-string.js | 10 ---------- 4 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 tools/render-to-string.js delete mode 100644 tools/test-render-to-string.js diff --git a/.gitignore b/.gitignore index e33a5f4e..288654e6 100644 --- a/.gitignore +++ b/.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 diff --git a/components/sections/index.js b/components/sections/index.js index 442e6182..85a53622 100644 --- a/components/sections/index.js +++ b/components/sections/index.js @@ -1,15 +1,22 @@ /** - * This is an ordered list of all sections for the article - * @type {Object} + * This is an ordered list of all sections used in the Bezier primer. + * + * 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") }; diff --git a/tools/render-to-string.js b/tools/render-to-string.js new file mode 100644 index 00000000..0f5cc7b9 --- /dev/null +++ b/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 `` 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(' \n', ''); +html = html.replace('