Add option to specify external CSS

Closes #10

bin/engrafo

@@ -13,6 +13,10 @@ program
     "--no-post-processing",
     "Raw LaTeXML output, without filters or postprocessors (for debugging)"
   )
+  .option(
+    "--css <path>",
+    "URL or path to external CSS to use instead of the default CSS. If passed, the defaut CSS is not copied to the output directory."
+  )
   .parse(process.argv);
 
 if (program.args.length != 1) {
@@ -28,7 +32,8 @@ var output =
 var options = {
   input: input,
   output: output,
-  postProcessing: program.postProcessing
+  postProcessing: program.postProcessing,
+  externalCSS: program.css
 };
 
 engrafo

src/index.js

@@ -1,18 +1,20 @@
 const fs = require("fs-extra");
 const jsdom = require("jsdom");
+const path = require("path");
 
 const io = require("./io");
 const latexml = require("./latexml");
 const math = require("./math");
 const postprocessors = require("./postprocessor");
 
 // Run postprocessing against a string of HTML
-exports.postprocess = htmlString => {
+exports.postprocess = (htmlString, options) => {
   var dom = jsdom.jsdom(htmlString, {
     features: { ProcessExternalResources: false, FetchExternalResources: false }
   });
 
   // Run all processing on document.
+  postprocessors.css(dom, options);
   postprocessors.footer(dom);
   postprocessors.links(dom);
   postprocessors.math(dom);
@@ -21,17 +23,17 @@ exports.postprocess = htmlString => {
 };
 
 // Do all processing on the file that LaTeXML produces
-async function processHTML(htmlPath) {
+async function processHTML(htmlPath, options) {
   let htmlString = await fs.readFile(htmlPath, "utf8");
-  htmlString = exports.postprocess(htmlString);
+  htmlString = exports.postprocess(htmlString, options);
   htmlString = await math.renderMath(htmlString);
   await fs.writeFile(htmlPath, htmlString);
 }
 
 // Render and postprocess a LaTeX file into outputDir (created if does not
 // exist). Calls callback with an error on failure or a path to an HTML file
 // on success.
-async function render({ input, output, postProcessing }) {
+async function render({ input, output, postProcessing, externalCSS }) {
   if (postProcessing === undefined) {
     postProcessing = true;
   }
@@ -40,10 +42,16 @@ async function render({ input, output, postProcessing }) {
   const texPath = await io.pickLatexFile(inputDir);
   const outputDir = await io.prepareOutputDirectory(output);
 
+  // If there is external CSS, don't let LaTeXML copy it to the output
+  // directory - we will handle it ourselves
+  const cssPath = externalCSS
+    ? null
+    : path.join(__dirname, "../dist/index.css");
+
   console.log(`Rendering tex file ${texPath} to ${outputDir}`);
-  const htmlPath = await latexml.render({ texPath, outputDir });
+  const htmlPath = await latexml.render({ texPath, outputDir, cssPath });
 
-  await processHTML(htmlPath);
+  await processHTML(htmlPath, { externalCSS });
 
   if (output.startsWith("s3://")) {
     await io.uploadOutputToS3(outputDir, output);

src/latexml.js

@@ -14,36 +14,37 @@ function unlinkIfExists(path) {
 }
 
 // render a document with latexml
-function render({ texPath, outputDir }) {
-  var htmlPath = path.join(outputDir, "index.html");
+function render({ texPath, outputDir, cssPath }) {
+  const htmlPath = path.join(outputDir, "index.html");
 
-  var latexmlc = childProcess.spawn(
-    "latexmlc",
-    [
-      "--dest",
-      htmlPath,
-      "--format",
-      "html5",
-      "--nodefaultresources",
-      "--css",
-      path.join(__dirname, "../dist/index.css"),
-      "--mathtex",
-      "--svg",
-      "--verbose",
-      "--preload",
-      "/app/latexml/engrafo.ltxml",
-      "--preload",
-      "/usr/src/latexml/lib/LaTeXML/Package/hyperref.sty.ltxml",
-      texPath
-    ],
-    {
-      cwd: path.dirname(texPath)
-    }
-  );
+  const args = [
+    "--dest",
+    htmlPath,
+    "--format",
+    "html5",
+    "--nodefaultresources",
+    "--mathtex",
+    "--svg",
+    "--verbose",
+    "--preload",
+    "/app/latexml/engrafo.ltxml",
+    "--preload",
+    "/usr/src/latexml/lib/LaTeXML/Package/hyperref.sty.ltxml"
+  ];
+
+  if (cssPath) {
+    args.push("--css", cssPath);
+  }
+
+  args.push(texPath);
+
+  const latexmlc = childProcess.spawn("latexmlc", args, {
+    cwd: path.dirname(texPath)
+  });
 
-  var stdoutReadline = readline.createInterface({ input: latexmlc.stdout });
+  const stdoutReadline = readline.createInterface({ input: latexmlc.stdout });
   stdoutReadline.on("line", console.log);
-  var stderrReadline = readline.createInterface({ input: latexmlc.stderr });
+  const stderrReadline = readline.createInterface({ input: latexmlc.stderr });
   stderrReadline.on("line", console.error);
 
   return new Promise((resolve, reject) => {

src/postprocessor/css.js

@@ -0,0 +1,13 @@
+const utils = require("./utils");
+
+module.exports = function(dom, { externalCSS }) {
+  if (externalCSS) {
+    const head = dom.querySelector("head");
+    const link = utils.nodeFromString(
+      dom,
+      '<link type="text/css" rel="stylesheet">'
+    );
+    link.setAttribute("href", externalCSS);
+    head.appendChild(link);
+  }
+};

src/postprocessor/index.js

@@ -1,4 +1,5 @@
 module.exports = {
+  css: require("./css"),
   footer: require("./footer"),
   links: require("./links"),
   math: require("./math")

src/postprocessor/utils.js

@@ -0,0 +1,14 @@
+exports.removeAll = function(els) {
+  Array.from(els).forEach(el => {
+    el.parentNode.removeChild(el);
+  });
+};
+
+exports.nodeFromString = function(dom, str) {
+  var div = dom.createElement("div");
+  div.innerHTML = str;
+  if (!div.firstChild) {
+    throw new Error("Invalid HTML passed to nodeFromString");
+  }
+  return div.firstChild;
+};