Render chapter pictures

Author: marijnh

01_values.md

@@ -11,7 +11,11 @@ essence stays invisibly below.
 
 quote}}
 
-{{index "Yuan-Ma", "Book of Programming", "binary data", data, bit, memory}}
+{{index "Yuan-Ma", "Book of Programming"}}
+
+{{figure {url: "img/chapter_picture_1.jpg", alt: "A sea of bits", chapter: framed}}}
+
+{{index "binary data", data, bit, memory}}
 
 Inside the computer's world, there is only data. You can read data,
 modify data, create new data—but that which isn't data cannot be

02_program_structure.md

@@ -11,6 +11,8 @@ quote}}
 
 {{index why, "Poignant Guide"}}
 
+{{figure {url: "img/chapter_picture_2.jpg", alt: "Tentacles holding objects", chapter: framed}}}
+
 In this chapter, we start to do things that can actually be called
 _programming_. We will expand our command of the JavaScript language
 beyond the nouns and sentence fragments we've seen so far, to the
@@ -137,8 +139,6 @@ same value. A program can only access the values that it still has a
 hold on. When you need to remember something, you grow a tentacle to
 hold on to it or you reattach one of your existing tentacles to it.
 
-{{figure {url: "img/octopus.jpg", alt: "Bindings as tentacles"}}}
-
 Let's look at another example. To remember the number of dollars that
 Luigi still owes you, you create a binding. And then when he pays back
 $35, you give this binding a new value.

03_functions.md

@@ -8,7 +8,11 @@ build on each other, like a wall of mini stones.
 
 quote}}
 
-{{index "Knuth, Donald", function, "code structure"}}
+{{index "Knuth, Donald"}}
+
+{{figure {url: "img/chapter_picture_3.jpg", alt: "Fern leaves with a fractal shape", chapter: framed}}}
+
+{{index function, "code structure"}}
 
 Functions are the bread and butter of JavaScript programming. The
 concept of wrapping a piece of program in a value has many uses. It

04_data.md

@@ -11,7 +11,11 @@ ideas that could provoke such a question.
 
 quote}}
 
-{{index "Babbage, Charles", object, "data structure"}}
+{{index "Babbage, Charles"}}
+
+{{figure {url: "img/chapter_picture_4.jpg", alt: "A weresquirrel", chapter: framed}}}
+
+{{index object, "data structure"}}
 
 Numbers, Booleans, and strings are the atoms that ((data)) structures
 are built from. Many types of information require more than one

05_higher_order.md

@@ -27,6 +27,8 @@ deficiencies.
 
 quote}}
 
+{{figure {url: "img/chapter_picture_5.jpg", alt: "Letters from different scripts", chapter: true}}}
+
 {{index "program size"}}
 
 A large program is a costly program, and not just because of the time

html/css/ejs.css

@@ -379,6 +379,20 @@ figure {
   margin: 0 30px;
 }
 
+figure.chapter {
+  text-align: center;
+  margin: 3em 0 2em;
+}
+
+figure.chapter img {
+  max-width: 75%;
+}
+
+figure.framed img {
+  border-radius: 50%;
+  border: 2px solid black;
+}
+
 @media screen and (max-width: 500px) {
   figure {
     margin: 0;

html/index.html

@@ -32,10 +32,9 @@ <h1>Eloquent JavaScript<div style="font-size: 70%">3rd edition</div></h2>
   may also be considered licensed under
   an <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
 
-  <p>Illustrations by various artists: Cover by
-  Madalina Tantareanu. Octopus in Chapter 2 by Jim Tierney. Pixel art in
-  Chapters 7 and 16 by Antonio Perdomo Pastor. Regular expression
-  diagrams in Chapter 9 generated
+  <p>Illustrations by various artists: Cover and chapter illustrations
+  by Madalina Tantareanu. Pixel art in Chapters 7 and 16 by Antonio
+  Perdomo Pastor. Regular expression diagrams in Chapter 9 generated
   with <a href="http://regexper.com">regexper.com</a> by Jeff
   Avallone. Village photograph in Chapter 11 by Fabrice Creuzot. Game
   concept for Chapter 15 by <a href="http://lessmilk.com">Thomas