diff --git a/docs/render/recipe.css b/docs/render/recipe.css index 09fe294..eb772cc 100644 --- a/docs/render/recipe.css +++ b/docs/render/recipe.css @@ -383,14 +383,23 @@ user-select: none; @media print { body { font-size: 14px; + min-height:100vh; } - .noprint { + .print-hide { display: none; } + + @page { + size: auto; /* auto is the initial value */ + /* margin: 1cm; */ + } + + a[href]:after { content: none !important; } + img[src]:after { content: none !important; } } @media not print { - .print-only { + .print-show { display:none; } } @@ -401,7 +410,11 @@ user-select: none; img.qr { - width:100%; + margin-top:2em; + position:absolute; + bottom:0; + right:0; + width:2in; } @media screen and (max-width: 1199px) { @@ -431,7 +444,7 @@ img.qr { max-height: 100vh; height: 100vh; } - .recipe article { + .recipe-content { max-width:50em; padding: 4em; } diff --git a/docs/render/recipe.js b/docs/render/recipe.js index fc69c80..90172f2 100644 --- a/docs/render/recipe.js +++ b/docs/render/recipe.js @@ -169,20 +169,23 @@ function share() { } function render() { - delete document.documentElement.style.display; - document.body.childNodes.forEach((c) => document.body.removeChild(c)) - let data = JSON.parse(window.params.body); - try { + let data = JSON.parse(window.params.body); var json = data; //JSON.parse(data); if (json["@type"] != "Recipe") { json = (json["@graph"] ?? json).find((item) => item["@type"] == "Recipe") } console.log("Recipe", json); } catch (e) { - console.debug("Data", e, {data}); + + document.body.appendChild(m("div", "Error parsing recipe", m("p", e.message), m("p", e.stack), m("pre", window.params.body) )); + console.error("Data", e, {e, body: window.params.body}); + return; } + delete document.documentElement.style.display; + document.body.childNodes.forEach((c) => document.body.removeChild(c)) + if (!json) return; let image = json.image; @@ -295,8 +298,8 @@ function render() { let originalURL = json.mainEntityOfPage?.["@id"] || json.mainEntityOfPage || json.url; document.body.appendChild( m(".recipe", {}, - image ? m("#thumbnail-container", m("#thumbnail.thumbnail.noprint", { style: "background-image:url(" + ");" })) : null, - m("article", + image ? m("#thumbnail-container", m("#thumbnail.thumbnail.print-hide", { style: "background-image:url(" + ");" })) : null, + m(".recipe-content", m("header", m("a", {href:originalURL, target:"_blank"}, m("img.publisher", { src: json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url }), @@ -324,24 +327,22 @@ function render() { (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, m("div.spacer"), - m(".actions", - m("a.action.noprint", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.material-icons-outlined", "public")), - m("a.action.noprint", { title:"Share", onclick: share}, m(".icon.material-icons-outlined", "share")), - m("a.action.noprint", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.material-icons-outlined", "notes")), - m("a.action.noprint", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.material-icons-outlined", "print")), + m(".actions.print-hide", + originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.material-icons-outlined", "public")) : null, + m("a.action", { title:"Share", onclick: share}, m(".icon.material-icons-outlined", "share")), + m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.material-icons-outlined", "notes")), + m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.material-icons-outlined", "print")), ) ), json.description ? m(".description", clean(json.description), json.author?.name ? m("span.author", (" —⁠" + json.author?.name)) : null, - m("p"), - ) : null, ), - m("main.columns", - m("section.ingredients", ingredients, m("img.qr.print-only", {src:QRCodeURL(params.originalURL, {margin:0})})), + m(".columns", + m("section.ingredients", ingredients, m("img.qr.print-show", {src:QRCodeURL(params.originalURL, {margin:0})})), m(reformat ? "section.instructions.numbered" : "section.instructions", instructions) ), ) diff --git a/scripts/recipe.sh b/scripts/recipe.sh new file mode 100755 index 0000000..ed52882 --- /dev/null +++ b/scripts/recipe.sh @@ -0,0 +1,2 @@ +#/bin/bash +pbpaste | json-minify | base64 | xargs -0 printf "https://itty.bitty.app/#/data:application/ld+json;charset=utf-8;compress=true;base64,%s" | xargs open \ No newline at end of file