typst PDF: re-add missing images (the remaining)

for #509

Author: vindarel

STYLEGUIDE.md

@@ -69,3 +69,27 @@ Please exclude them from the EPUB generation with these flags:
 
 We must tweak the markdown links so that internal links work in the
 EPUB reader. See `fix-epub-links.sed` to add your link or just ping us on GitHub.
+
+## PDF gotchas
+
+### Images
+
+Now that we transform the markdown sources to Typst to PDF, the HTML
+`<img>` tags are not taken care of.
+
+The `![](path/to/image.png)` syntax works fine, however the HTML tag is nice to set CSS attributes such as the `max-width`.
+
+So, to add an image, please do:
+
+```txt
+<img src="assets/sockets-lisp-chat.gif"
+     width="470" height="247" alt="Chat app demo between two browser windows"/>
+
+<!-- pdf-include-start
+![](assets/sockets-lisp-chat.gif)
+   pdf-include-end -->
+```
+
+The first IMG works out of the box for the HTML render and the EPUB,
+while the second, in-between HTML comments, is always ignored but we
+make it present when building the PDF (`make pdf`).

data-structures.md

@@ -2313,3 +2313,8 @@ The `access` library given above provides this, with `(accesses var key1 key2…
     <img src="collections.png" alt="Collection Types in Common Lisp"/>
 </div>
 <!-- epub-exclude-end -->
+
+
+<!-- pdf-include-start
+![](collections.png)
+   pdf-include-end -->

emacs-ide.md

@@ -625,6 +625,10 @@ See also [Helpful](https://github.com/Wilfred/helpful), an alternative to the bu
 
 <img src="assets/emacs-helpful.png" style="height: 450px" alt="The Emacs helpful package shows detailed information about a symbol."/>
 
+<!-- pdf-include-start
+![](assets/emacs-helpful.png)
+   pdf-include-end -->
+
 
 ### Built-in tutorial
 

numbers.md

@@ -11,14 +11,6 @@ Some sources:
 * [`Numbers, Characters and Strings`][numbers-characters-strings]
   in Practical Common Lisp
 
-<!-- epub-exclude-start -->
-<div style="text-align: center">
-    <img src="numbertower.png" alt="Number Types in Common Lisp"/>
-</div>
-<!-- epub-exclude-end -->
-
-*Types in bold, solid boxes are the ones you will typically use.*
-
 ## Introduction
 
 ### Integer types
@@ -657,6 +649,20 @@ For example:
 Please see the [CLHS page][logand-functions] for a more detailed explanation
 or other bit-wise functions.
 
+## Appendix: the number tower
+
+<!-- epub-exclude-start -->
+<div style="text-align: center">
+    <img src="numbertower.png" alt="Number Types in Common Lisp"/>
+</div>
+<!-- epub-exclude-end -->
+
+<!-- pdf-include-start
+![](numbertower.png)
+   pdf-include-end -->
+
+*Types in bold, solid boxes are the ones you will typically use.*
+
 
 [numbers]: https://www.cs.cmu.edu/Groups/AI/html/cltl/clm/node16.html#SECTION00610000000000000000
 [numbers-characters-strings]: http://www.gigamonkeys.com/book/numbers-characters-and-strings.html

strings.md

@@ -1317,6 +1317,10 @@ _ - Conditional Newline
     <img src="string-and-chars.png" alt="String and Character Types in Common Lisp"/>
 </div>
 
+<!-- pdf-include-start
+![](string-and-chars.png)
+   pdf-include-end -->
+
 
 ## See also
 

web.md

@@ -534,6 +534,10 @@ Clack users might make a good use of plugins, like the clack-errors middleware:
 
 <img src="assets/clack-errors.png" width="800" alt="The clack-errors plugin shows the error message, a legible backtrace and environment variables."/>
 
+<!-- pdf-include-start
+![](assets/clack-errors.png)
+   pdf-include-end -->
+
 ## Weblocks - solving the "JavaScript problem"©
 
 [Weblocks][weblocks] is a widgets-based and

websockets.md

@@ -220,6 +220,10 @@ should see your chat app!
 <img src="assets/sockets-lisp-chat.gif"
      width="470" height="247" alt="Chat app demo between two browser windows"/>
 
+<!-- pdf-include-start
+![](assets/sockets-lisp-chat.gif)
+   pdf-include-end -->
+
 ## All The Code
 
 ~~~lisp