mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Improve recipe speed
This commit is contained in:
Nicholas Jitkoff
parent
6ba4b49808
commit
bbde578058
4 changed files with 81 additions and 58 deletions
|
|
@ -8,11 +8,11 @@
|
|||
<link rel="stylesheet" href="/index.css">
|
||||
<meta id="themeColor" name="theme-color" content="white" media="(prefers-color-scheme: light)">
|
||||
<meta id="themeColorDark" name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<script src="/js/lzma/lzma-d-min.js"></script>
|
||||
<script src="/js/lzma/lzma_worker-min.js"></script>
|
||||
<!-- <link rel="manifest" href="/manifest.json"> -->
|
||||
<script src="/js/lzma/lzma-d-min.js"></script>
|
||||
<script src="/bitty.js" type="module"></script>
|
||||
<script src="/index.js" type="module"></script>
|
||||
<script src="/js/gzip/pako.js" type="module"></script>
|
||||
<script nomodule> location.href = "/v1/" + location.hash </script>
|
||||
<noscript>itty.bitty requires JavaScript.</noscript>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
Loading…
Reference in a new issue