Render kirby on every page

content/blech_pfannkuchen.md

@@ -32,4 +32,4 @@ servings: 2
 1. Mit Hilfe von Backpapier aufrollen
 
 ## Quellen
-https://www.chefkoch.de/rezepte/867341192176282/Pfannkuchen-Rolle-vom-Blech.html
+- [ChefKoch](https://www.chefkoch.de/rezepte/867341192176282/Pfannkuchen-Rolle-vom-Blech.html)

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

@@ -88,13 +88,8 @@
     -webkit-filter: opacity(1) !important;
     filter: opacity(1) !important;
   }
-
   body {
     font-family: 'Nunito';
-    background-image: url("../../recipeskirby.svg");
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-blend-mode: luminosity;
   }
   h1 {
     font-size: 1.7em;
@@ -144,6 +139,7 @@
             </div>
         </div>
     </div>
+    <div id="spacer" />
 </body>
 {{ partial "printscript.html" }}
 </html>

themes/cookbook/static/js/print.js

@@ -31,6 +31,29 @@ if (hrs.length > 2) {
 // 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) {
+    // need spacing
+    const spacer = document.evaluate('//*[@id="spacer"]', document).iterateNext()
+    // spacer.style.border = "5px solid red"
+    spacer.style.height = `${(pages*pageHeightInPx) - docHeight}px`
+  }
+
+  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()
@@ -64,5 +87,4 @@ window.addEventListener('load', function () {
 		nodeBlockIndex += 1
 	})
 	zutatenNode.parentNode.insertBefore(allIngredientsDiv, zutatenNode.nextSibling)
-	console.log("Finished fiddling")
 })