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