From b0bf2d745f1bbc577059f182b0dc32a170f1a65f Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Wed, 11 May 2022 21:05:02 -0700
Subject: [PATCH] Fix ingredient parsing

---
 docs/render/recipe.css | 25 +++++++++++++++++++++----
 docs/render/recipe.js  | 23 ++++++++++++-----------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index 0c374a5..dbc9083 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -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;
   }
 }
 
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index b253740..3c501da 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -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" }));
+
 
 }