Add a png fallback mechanism for browsers that don't support svg

Author: marijnh

00_intro.txt

@@ -8,7 +8,7 @@ do. Computers are about as common as screwdrivers today, but contain a
 lot more hidden complexity, and thus are harder to operate and
 understand. To many, they remain alien, slightly threatening things.
 
-image::img/computer.png[alt="Communicating with a computer"]
+image::img/generated/computer.png[alt="Communicating with a computer"]
 
 (((graphical user interface)))We've found two effective ways of
 bridging the communication gap between us, squishy biological

Makefile

@@ -4,9 +4,13 @@ CHAPTERS := 00_intro 01_values 02_program_structure 03_functions 04_data 05_high
   07_elife 08_error 09_regexp 10_modules 11_language 12_browser 13_dom 14_event 15_game 16_canvas \
   17_http 18_forms 19_paint 20_node 21_skillsharing
 
+SVGS := $(wildcard img/*.svg)
+
 .SECONDARY: $(foreach CHAP,$(CHAPTERS),tex/$(CHAP).db)
 
-html: $(foreach CHAP,$(CHAPTERS),html/$(CHAP).html) html/js/chapter_info.js code/skillsharing.zip code/solutions/20_4_a_public_space_on_the_web.zip
+html: $(foreach CHAP,$(CHAPTERS),html/$(CHAP).html) html/js/chapter_info.js \
+      code/skillsharing.zip code/solutions/20_4_a_public_space_on_the_web.zip \
+      $(patsubst img/%.svg,img/generated/%.png,$(SVGS))
 
 html/%.html: %.txt asciidoc_html.conf
 	PATH=node_modules/codemirror/bin:$(PATH) asciidoc -f asciidoc_html.conf --backend=html5 -o $@ $<
@@ -15,6 +19,12 @@ html/%.html: %.txt asciidoc_html.conf
 html/js/chapter_info.js: $(foreach CHAP,$(CHAPTERS),$(CHAP).txt) code/solutions/* bin/chapter_info.js
 	node bin/chapter_info.js > html/js/chapter_info.js
 
+img/generated/%.png: img/%.svg
+	inkscape --export-png=$@ $<
+
+img/generated/%.pdf: img/%.svg
+	inkscape --export-pdf=$@ $<
+
 code/skillsharing.zip: html/21_skillsharing.html
 	rm -f $@
 	cd code; zip skillsharing.zip skillsharing/*.js* skillsharing/public/*.*
@@ -38,7 +48,8 @@ test: html
 	@node bin/check_links.js
 	@echo Done.
 
-book.pdf: tex/book/book.tex $(foreach CHAP,$(CHAPTERS),tex/$(CHAP).tex) tex/solutions.tex
+book.pdf: tex/book/book.tex $(foreach CHAP,$(CHAPTERS),tex/$(CHAP).tex) tex/solutions.tex \
+          $(patsubst img/%.svg,img/generated/%.pdf,$(SVGS))
 	cd tex/book && xelatex book.tex
 	cd tex/book && xelatex book.tex
 	makeindex -s tex/book/nostarch.ist -o tex/book/book.ind tex/book/book.idx

bin/pre_latex.js

@@ -51,9 +51,6 @@ function convertImage(name, type) {
     } catch (e) {
       newAge = 0;
     }
-    var oldAge = fs.statSync(oldName).atime;
-    if (newAge < oldAge)
-      child.spawn("inkscape", ["--export-pdf=" + newName, oldName]);
     return newName;
   } else {
     return oldName;

html/js/ejs.js

@@ -1,4 +1,12 @@
 window.addEventListener("load", function() {
+  // Fall back to pngs when svg images are not supported
+  if (document.getElementsByTagName && !document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
+    var imgs = document.getElementsByTagName("img");
+    for (var i = 0, svg; i < imgs.length; i++)
+      if (svg = /^(.*?img\/)([^.]+)\.svg$/.exec(imgs[i].src))
+        imgs[i].src = svg[1] + "generated/" + svg[2] + ".png";
+  }
+
   // If there's no ecmascript 5 support, don't try to initialize
   if (!Object.create || !window.JSON) return;