prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix ingredient parsing

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-05-11 21:05:02 -07:00
parent ebe7b75b0b
commit b0bf2d745f
2 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/render/recipe.css
View file

@ -4,6 +4,12 @@
body {
margin: 0 8vw;
background-color: var(--background-color);
color: var(--text-color);
--text-color:black;
--background-color:white;
}
.thumbnail {
@ -163,7 +169,7 @@ border-radius: 2px;}
/* color: rgba(0,0,0,0.8); */}
.noun {
font-weight: 700;
color: rgba(0,0,0,1.0);}
/* color: rgba(0,0,0,1.0); */}
.instructions {
white-space: pre-wrap;
@ -249,9 +255,10 @@ a.action {
box-sizing: border-box;
line-height: 17px; */
border-radius:1em;
cursor:pointer;
}
a.action:hover:not(:active) img {
a.action:hover:not(:active) .icon {
opacity:1.0;
/* text-decoration: none;
box-shadow: 0 1px 1px currentColor;
@ -278,10 +285,20 @@ a.action:hover:not(:active) img {
}
}
.metadata .icon {
font-size: 15px;
vertical-align: middle;
margin-top: -4px;
margin-right: 4px;
opacity:0.6;
color:var(--text-color);
}
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: white;
--text-color:white;
--background-color:#222;
}
}

23
docs/render/recipe.js
View file

@ -142,7 +142,7 @@ function highlightStep(e) {
}
const ingredientMatch = /^(?:A )?([\/0-9 \-\u00BC-\u00BE\u2153-\u215E\u2009]*) ?(.*)/
const ingredientMatch = /^(?:A )?([\/0-9 \u00BC-\u00BE\u2153-\u215E\u2009]*) (.*)/
function ingredientEl(string, terms) {
@ -154,7 +154,7 @@ function ingredientEl(string, terms) {
let match = FRACTION_MAP.replace(clean(string)).match(ingredientMatch);
if (match) {
return [m("span.quantity", match[1]), m("div", {innerHTML:highlightTerms(match[2], terms)})]
return [m("span.quantity", match[1].replace(" ", "\u202F")), m("div", {innerHTML:highlightTerms(match[2], terms)})]
}
return [m("span.quantity", ""), m("div", {innerHTML:string})];
}
@ -281,9 +281,9 @@ function render() {
m("img.publisher", { src: json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url }),
m("h1", title),
m(".metadata",
m("div", m("span.yield", m("img", {src:"recipe/restaurant_black_24dp.svg"}), yield)),
m("div", m("span.yield", m(".icon.material-icons-outlined", "restaurant"), yield)),
m(".time",
m("img", {src:"recipe/timer_black_24dp.svg"}),
m(".icon.material-icons-outlined", "timer"),
json.totalTime ? m("span", formatTime(json.totalTime)) : undefined,
// " (",
@ -292,17 +292,17 @@ function render() {
// ")"
),
(rating) ? m("div.rating",
m("img", {src:"recipe/grade_black_24dp.svg"}),
m(".icon.material-icons-outlined", "grade"),
parseFloat(rating.ratingValue).toFixed(1), " ",
// ratingCount ? m("span.count", ratingCount.toString()) : null
)
: null,
json.nutrition?.calories ? m("div", m("img", {src:"recipe/info_black_24dp.svg"}), (json.nutrition?.calories) + (parseFloat(json.nutrition?.calories) != NaN ? " calories" : "")) : null,
json.nutrition?.calories ? m("div", m(".icon.material-icons-outlined", "info"), (json.nutrition?.calories) + (parseFloat(json.nutrition?.calories) != NaN ? " calories" : "")) : null,
m("div.spacer"),
m("a.action.noprint", { href: json.mainEntityOfPage || json.url, target:"_blank"}, m("img", {src:"recipe/link_black_24dp.svg"})),
m("a.action.noprint", { href: "#", onclick: () => {reformat = !reformat; render(); return false;}}, m("img", {src:"recipe/format_list_numbered_black_24dp.svg"})),
m("a.action.noprint", { href: "#", onclick: () => window.print() }, m("img", {src:"recipe/print_black_24dp.svg"})),
m("a.action.noprint", { title:"Open original", href: json.mainEntityOfPage || json.url, target:"_blank"}, m(".icon.material-icons-outlined", "link")),
m("a.action.noprint", { title:"Show steps as list", href: "#", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.material-icons-outlined", "format_list_numbered")),
m("a.action.noprint", { title:"Print", href: "#", onclick: () => window.print() }, m(".icon.material-icons-outlined", "print")),
),
json.description ? m(".description",
@ -324,8 +324,9 @@ function render() {
var path = script.src.substring(0, script.src.lastIndexOf("."));
var cssURL = path + ".css";
let style = m("link", { rel: "stylesheet", type: "text/css", href: cssURL })
document.head.appendChild(style);
document.head.appendChild(m("link", { rel: "stylesheet", type: "text/css", href: cssURL }));
document.head.appendChild(m("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" }));
}