Make background fiddling work

make.sh

@@ -1,9 +1,8 @@
 #!/bin/bash
 
-rm -rf public/
-hugo
-rm -rf pdf
+rm -rf public/ pdf/
 mkdir pdf
+hugo
 for dir in public/print/*
 do
 	chromium --temp-profile --headless --disable-gpu --run-all-compositor-stages-before-draw --allow-file-access-from-files --allow-running-insecure-content --print-to-pdf-no-header --print-to-pdf="pdf/$(basename $dir).pdf" "${dir}/print.html"

themes/cookbook/layouts/_default/baseof.print.html

@@ -139,7 +139,7 @@
             </div>
         </div>
     </div>
-    <div id="spacer" />
+    <div id="spacer" style="position: absolute; top: 0px; right: 0mm; width: 156mm;"/>
 </body>
 {{ partial "printscript.html" }}
 </html>

themes/cookbook/static/js/print.js

@@ -1,90 +1,105 @@
-
 // Shrink up the spacing and change the size of the headers
-u('#ingredients').attr("style", "margin-bottom: .5em;")
-u('#ingredients').attr("class", "is-size-5")
-u('#directions').attr("style", "margin: 0px;")
-u('#directions').attr("class", "is-size-5")
+u("#ingredients").attr("style", "margin-bottom: .5em;");
+u("#ingredients").attr("class", "is-size-5");
+u("#directions").attr("style", "margin: 0px;");
+u("#directions").attr("class", "is-size-5");
 
 // If we have ingredients subheadings, change the h4 headings
-u('h4').addClass("is-size-6")
-u('h4').attr("style", "margin: 0px;")
+u("h4").addClass("is-size-6");
+u("h4").attr("style", "margin: 0px;");
 
 // Change the title size
-u('#mainTitle').addClass("is-size-4")
+u("#mainTitle").addClass("is-size-4");
 
 // Change the lists margins
-var directions = u('ol');
-directions.attr("style", "margin-top: 0px; margin-bottom: 0px;")
+var directions = u("ol");
+directions.attr("style", "margin-top: 0px; margin-bottom: 0px;");
 
-var ingredients = u('ul');
-ingredients.attr("style", "margin-top: 0px; margin-bottom: 0px;")
+var ingredients = u("ul");
+ingredients.attr("style", "margin-top: 0px; margin-bottom: 0px;");
 
-var listItems = u('li');
-listItems.attr("style", "margin-top: 0px;")
+var listItems = u("li");
+listItems.attr("style", "margin-top: 0px;");
 
 // Remove the last <hr> if we have a footnote
-var hrs = u('hr')
+var hrs = u("hr");
 if (hrs.length > 2) {
-    hrs.last().remove()
+  hrs.last().remove();
 }
 
 // Remove the footnote links
-u(document.getElementsByClassName('footnote-backref')).remove()
-
-// space to full pages and add kirby background on every page
-window.addEventListener('load', function () {
-  const pageHeightInPx = 869
-  const docHeight = document.children[0].offsetHeight
-  const pages = Math.ceil(docHeight/pageHeightInPx)
-  if((docHeight/pageHeightInPx)%1 != 0) {
+u(document.getElementsByClassName("footnote-backref")).remove();
+
+// Break ingredients into column-able blocks
+window.addEventListener("load", function () {
+  const zutatenNode = document
+    .evaluate('//*[@id="zutaten"]', document)
+    .iterateNext();
+
+  let nodeBlocks = [[]];
+  let nextNode = zutatenNode.nextElementSibling;
+  while (nextNode && nextNode.tagName != "H2") {
+    if (nextNode.tagName == "H4") {
+      nodeBlocks.push([]);
+    }
+    nodeBlocks[nodeBlocks.length - 1].push(nextNode);
+
+    nextNode = nextNode.nextElementSibling;
+  }
+
+  let allIngredientsDiv = document.createElement("div");
+  allIngredientsDiv.id = "allZutaten";
+  allIngredientsDiv.classList.add("allZutaten");
+  let nodeBlockIndex = 0;
+  nodeBlocks.forEach(function (nodeArray) {
+    let outerDiv = document.createElement("div");
+    outerDiv.id = `wrap${nodeBlockIndex}`;
+
+    outerDiv.classList.add("zutatenWrapper");
+    allIngredientsDiv.appendChild(outerDiv);
+    for (elem of nodeArray) {
+      outerDiv.appendChild(elem);
+    }
+
+    nodeBlockIndex += 1;
+  });
+  zutatenNode.parentNode.insertBefore(
+    allIngredientsDiv,
+    zutatenNode.nextSibling
+  );
+
+  // space to full pages and add kirby background on every page
+  const pageHeightInPx = 860;
+  const docHeight = document.children[0].offsetHeight;
+  const pages = Math.ceil(docHeight / pageHeightInPx);
+
+  if ((docHeight / pageHeightInPx) % 1 != 0) {
     // need spacing
-    const spacer = document.evaluate('//*[@id="spacer"]', document).iterateNext()
-    // spacer.style.border = "5px solid red"
-    spacer.style.height = `${(pages*pageHeightInPx) - docHeight}px`
+    const spacer = document
+      .evaluate('//*[@id="spacer"]', document)
+      .iterateNext();
+    // spacer.style.border = "1px solid red";
+    spacer.style.height = `${pages * pageHeightInPx}px`;
+    console.log("docHeight", docHeight);
+    console.log("pages", pages);
+    console.log("pages * pageHeightInPx", pages * pageHeightInPx);
+    console.log(
+      "(docHeight/pageHeightInPx)%1",
+      (docHeight / pageHeightInPx) % 1
+    );
   }
 
-  const imageString = 'url("../../recipeskirby.svg")'
-  imageArray = [imageString]
-  let positionString = "background-position: 10mm 55mm"
-  for(let i = 1 ; i < pages ; i+=1) {
-    positionString += `, 10mm ${230*i+55}mm`
-    imageArray.push(imageString)
+  // fill all pages with kirby background
+  const imageString = 'url("../../recipeskirby.svg")';
+  imageArray = [imageString];
+  let positionString = "background-position: 10mm 55mm";
+  for (let i = 1; i < pages; i += 1) {
+    positionString += `, 10mm ${230 * i + 55}mm`;
+    imageArray.push(imageString);
   }
-  const styleString = `body { background-image: ${imageArray.join(', ')}; ${positionString}; background-blend-mode: luminosity; background-repeat: no-repeat; }`
-  window.document.styleSheets[2].insertRule(styleString, 0)
-})
 
-// Break ingredients into column-able blocks
-window.addEventListener('load', function () {
-	const zutatenNode = document.evaluate('//*[@id="zutaten"]', document).iterateNext()
-
-	let nodeBlocks = [[]]
-	let nextNode = zutatenNode.nextElementSibling
-	while (nextNode && nextNode.tagName != "H2") {
-
-		if(nextNode.tagName == 'H4') {
-			nodeBlocks.push([])
-		}
-		nodeBlocks[nodeBlocks.length - 1].push(nextNode)
-
-		nextNode = nextNode.nextElementSibling
-	}
-
-	let allIngredientsDiv = document.createElement('div')
-	allIngredientsDiv.id = "allZutaten"
-	allIngredientsDiv.classList.add('allZutaten')
-	let nodeBlockIndex = 0
-	nodeBlocks.forEach(function(nodeArray) {
-		let outerDiv = document.createElement('div')
-		outerDiv.id = `wrap${nodeBlockIndex}`
-
-		outerDiv.classList.add("zutatenWrapper")
-		allIngredientsDiv.appendChild(outerDiv)
-		for(elem of nodeArray) {
-			outerDiv.appendChild(elem)
-		}
-
-		nodeBlockIndex += 1
-	})
-	zutatenNode.parentNode.insertBefore(allIngredientsDiv, zutatenNode.nextSibling)
-})
+  const styleString = `#spacer { background-image: ${imageArray.join(
+    ", "
+  )}; ${positionString}; background-blend-mode: normal; background-repeat: no-repeat; }`;
+  window.document.styleSheets[2].insertRule(styleString, 0);
+});