Add working image sample

bin/build.sh

@@ -20,16 +20,21 @@ find 'edudoc' -name '*.md' | while read file; do
   echo "Processing $file, edudoc style"
 
   pdf_name="${file%.md}.pdf"
+  html_name="${file%.md}.html"
+
   header_html="${file%.md}-header.html"
 
   file_headline=$(head -n 1 "$file")
   document_title=$(echo "$file_headline" | sed -E "s/#+\s*//")
 
   sed -E "s#DOCUMENT_TITLE#$document_title#g" "assets/edudoc-header.html" |
   sed -E "s#DATE#$compile_date#g" > "$header_html"
-
-  pandoc -s --from markdown --to html5 --metadata pagetitle="$document_title" "$file" | # Markdown -> HTML
-  wkhtmltopdf --encoding 'utf-8' --user-style-sheet 'assets/edudoc-style.css' -T 15mm -B 15mm -R 15mm -L 15mm --header-html "$header_html" --footer-center "[page]" --quiet - "$pdf_name" # HTML -> PDF
+
+  # deliberately NOT using the pipe | operator here because wkhtml tries to resolve image links
+  # based on the location of its input file. If piping is used, wkhtml assumes /tmp as location
+  # and links like "./dummy-image.png" become "/tmp/dummy-image.png" instead of "edudoc/$project/dummy-image.png"
+  pandoc -s --from markdown --to html5 --metadata pagetitle="$document_title" "$file" -o "$html_name"  # Markdown -> HTML
+  wkhtmltopdf --encoding 'utf-8' --user-style-sheet 'assets/edudoc-style.css' -T 15mm -B 15mm -R 15mm -L 15mm --header-html "$header_html" --footer-center "[page]" --quiet "$html_name" "$pdf_name" # HTML -> PDF
 done
 
 # Remove potentially cached PDFs from last build run
@@ -39,8 +44,9 @@ mkdir build
 # Copy generated content into build folder
 cp -r documents build/
 cp -r edudoc build/
-# Remove source files from target build
+# Remove source files from target build and trim empty directories
 find build/ -type f -not -name "*.pdf" -delete
+find build/ -type d -empty -delete
 # Remove target PDF from source folder
 find documents/ -name "*.pdf" -delete
 find edudoc/ -name "*.pdf" -delete

edudoc/competitor-tutorial/tutorial.md

@@ -32,4 +32,5 @@ and make sure that all the scrambles are correct.
 
 ## Objects at the competition
 - **Stackmat timer**: This is the official device for measuring times at a competition.
-It can look like any of the three versions below.
+It can look like any of the three versions below.
+![Timers](images/stackmat_timers.png)