diff --git a/make.sh b/make.sh index 55dee4a..e2db900 100755 --- a/make.sh +++ b/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" diff --git a/themes/cookbook/layouts/_default/baseof.print.html b/themes/cookbook/layouts/_default/baseof.print.html index 15117af..eedecee 100644 --- a/themes/cookbook/layouts/_default/baseof.print.html +++ b/themes/cookbook/layouts/_default/baseof.print.html @@ -139,7 +139,7 @@ -
+
{{ partial "printscript.html" }} diff --git a/themes/cookbook/static/js/print.js b/themes/cookbook/static/js/print.js index ecc5bf3..8025879 100644 --- a/themes/cookbook/static/js/print.js +++ b/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
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); +});