diff --git a/docs/index.html b/docs/index.html index 9265357..a2ee847 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,11 +8,11 @@ - - - + + + diff --git a/docs/index.js b/docs/index.js index 203b44b..a01da6c 100644 --- a/docs/index.js +++ b/docs/index.js @@ -64,7 +64,7 @@ } const renderers = { - "application/ld+json": {script:"recipe"}, + "application/ld+json": {script:"recipe", sandbox:"none"}, "text/canvas+javascript": {script:"canvas"}, "text/javascript": {script:"script"}, "application/bitsy": {script:"/render/bitsy.html", sandbox:"bitsy"}, @@ -156,11 +156,15 @@ window.addEventListener("message", function(e) { console.debug("Message:", e.origin, e.data) + showLoader(false); + if (e.data.loading != undefined) showLoader(e.data.loading); + if (e.data.title) document.title = e.data.title; if (e.data.favicon) setFavicon(e.data.favicon); if (e.data.themeColor) setThemeColor(e.data.themeColor); if (e.data.updateURL) { - window.location.pathname = bitty.metadataToPath(e.data); + let path = bitty.metadataToPath(e.data) + window.location.hash; + window.history.replaceState(null, null, path); } if (e.data.share) { @@ -392,7 +396,7 @@ iframe.contentWindow.postMessage(params, "*"); delete iframe.onload iframe.contentWindow.focus(); - showLoader(false) + // showLoader(false) }); // writeDocContent(iframe.contentWindow.document, SCRIPT_LOADER) // iframe.srcdoc = SCRIPT_LOADER; @@ -404,7 +408,8 @@ src = params.script; } let sandbox = params.renderer?.sandbox; - if (sandbox == "hash") { // Generate sandbox based off of body hash + if (sandbox == "none") { // passthrough + } else if (sandbox == "hash") { // Generate sandbox based off of body hash let hash = await bitty.hashString(params.body); src = src.replace("https://", "https://script-" + hash + "."); } else if (sandbox) { // Use named sandbox diff --git a/docs/render/recipe.css b/docs/render/recipe.css index de54d6b..7ce118d 100644 --- a/docs/render/recipe.css +++ b/docs/render/recipe.css @@ -127,6 +127,13 @@ img.publisher { justify-content: center; /* flex-direction: row-reverse; */ margin-top: 1em; + /* height: auto; */ + } + + +.headercolumns { + display: flex; + flex-direction: row-reverse; } header { @@ -548,14 +555,17 @@ hr { img.qr { /* margin-top:2em; */ - position: absolute; + /* position: absolute; */ /* bottom:0; */ /* left: 0; */ - max-width: 100%; - height: auto; + /* max-width: 100%; */ + /* height: auto; */ /* background-color: var(--background-color); */ /* display: table-caption; */ - /* width: 100%; */ + width: 5cm; + height: 5cm; + margin-left: 1em; + page-break-before: always; } @media screen and (max-width: 1199px) { @@ -768,6 +778,7 @@ span.timer.active.expired { min-height:100vh; margin: 0; padding: 0; + height: 100%; } .print-hide { display: none !important; @@ -775,12 +786,16 @@ span.timer.active.expired { .recipe { margin:0; - max-width:unset; + max-width: + unset; + min-height: 100vh; } .recipe-content { max-width: unset; - padding-left: 2em; + /* padding-left: 2em; */ + /* min-height: 100vh; */ + height: 100%; } @page { diff --git a/docs/render/recipe.js b/docs/render/recipe.js index f2bd5af..bcbe62b 100644 --- a/docs/render/recipe.js +++ b/docs/render/recipe.js @@ -584,7 +584,7 @@ function render() { console.log("image", bgImg.src) let originalURL = json.mainEntityOfPage?.["@id"] ?? ((json.mainEntityOfPage == true) ? false : json.mainEntityOfPage) ?? json.url; - console.log({originalURL}) + let hostname = originalURL ? new URL(originalURL).hostname.replace("www.","") : "" let qrImage = QRCodeURL(params.originalURL, {margin:0}); let publisherImage = json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url; @@ -593,55 +593,56 @@ function render() { m(".recipe", {}, image ? m("#thumbnail-container", m("#thumbnail.thumbnail.print-hide", { style: "background-image:url(" + image + ");" })) : null, m(".recipe-content", - m("header", - m("a.publisherlink", {href:originalURL, target:"_blank"}, - publisherImage ? m("img.publisher", { src: publisherImage }) : hostname, - ), - m(".headerflex", - m(".headerleft", - m("h1", {onclick:keepAwake}, title), - m(".metadata", - (recipeYield) ? m("div", m("span.yield", m(".icon.servings", {innerHTML:icons.servings}), recipeYield)) : null, - json.totalTime ? m(".time", - m(".icon.time", {innerHTML:icons.timer}), - - json.totalTime ? m("span", formatTime(json.totalTime)) : undefined, - // " (", - // json.prepTime ? m("span", formatTime(json.prepTime), " prep") : undefined, - // json.cookTime ? m("span", ", ", formatTime(json.cookTime), " cook") : undefined, - // ")" - ) : null, - (rating) ? m("div.rating", - m(".icon.rating", {innerHTML:icons.rating}), - parseFloat(rating.ratingValue).toFixed(1), " ", - // ratingCount ? m("span.count", ratingCount.toString()) : null - ) - : null, - json.nutrition?.calories ? - m("div", m(".icon.info", {innerHTML:icons.info}), - (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, - - // m("div.spacer"), - ), + m("div.headercolumns", + m("header", + m("a.publisherlink", {href:originalURL, target:"_blank"}, + publisherImage ? m("img.publisher", { src: publisherImage }) : hostname, ), - m(".actions.print-hide", - originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.public", {innerHTML:icons.public})) : null, - m("a.action", { title:"Share", onclick: share}, m(".icon.share", {innerHTML:icons.share})), - // m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.checklist")), - m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.print", {innerHTML:icons.print})), - ) - ), - description ? m(".description", {innerHTML:description}, - json.author?.name ? m("span.author", (" —⁠" + json.author?.name)) : null, - m("p"), - ) : null, + m(".headerflex", + m(".headerleft", + m("h1", {onclick:keepAwake}, title), + m(".metadata", + (recipeYield) ? m("div", m("span.yield", m(".icon.servings", {innerHTML:icons.servings}), recipeYield)) : null, + json.totalTime ? m(".time", + m(".icon.time", {innerHTML:icons.timer}), + json.totalTime ? m("span", formatTime(json.totalTime)) : undefined, + // " (", + // json.prepTime ? m("span", formatTime(json.prepTime), " prep") : undefined, + // json.cookTime ? m("span", ", ", formatTime(json.cookTime), " cook") : undefined, + // ")" + ) : null, + (rating) ? m("div.rating", + m(".icon.rating", {innerHTML:icons.rating}), + parseFloat(rating.ratingValue).toFixed(1), " ", + // ratingCount ? m("span.count", ratingCount.toString()) : null + ) + : null, + json.nutrition?.calories ? + m("div", m(".icon.info", {innerHTML:icons.info}), + (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, + + // m("div.spacer"), + ), + ), + m(".actions.print-hide", + originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.public", {innerHTML:icons.public})) : null, + m("a.action", { title:"Share", onclick: share}, m(".icon.share", {innerHTML:icons.share})), + // m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.checklist")), + m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.print", {innerHTML:icons.print})), + ) + ), + description ? m(".description", {innerHTML:description}, + json.author?.name ? m("span.author", (" —⁠" + json.author?.name)) : null, + m("p"), + ) : null, + + ), ), m(".columns", m("section.ingredients.hanging", m("caption.ingredients-title", {onclick:(e) => {e.target.closest("section").classList.toggle("hanging")}},"Ingredients"), ingredients, - qrImage ? m("img#qr.qr.print-show", {src:qrImage}) : null, // m("canvas#qr") ), m(reformat ? "section.instructions.numbered" : "section.instructions.numbered", @@ -651,7 +652,9 @@ function render() { ), instructions) ), - ) + ), + qrImage ? m("img#qr.qr.print-show", {src:qrImage, onclick:() => window.print()}) : null, + ) ) } @@ -691,7 +694,7 @@ loadScript(path + '/../../js/qrious.min.js', null, "").then(() => { background: 'transparent', foreground: 'currentColor', size: 512, - value: params.originalUrl.substring(), + value: params.originalUrl.substring(0), }); }) loadSyle(cssURL).then(render); \ No newline at end of file