Updated opengraph functions, dark mode

2026-03-11 08:54:33 +00:00 · 2022-05-17 08:37:07 -07:00 · 2022-05-17 08:37:07 -07:00 · ba7b10dc4b
commit ba7b10dc4b
parent 19ffa2c2d3
15 changed files with 379 additions and 83 deletions
--- a/docs/base.css
+++ b/docs/base.css
@ -1 +1,4 @@
-body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family: -apple-system,BlinkMacSystemFont,sans-serif;word-wrap: break-word;}
+body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family:-apple-system,BlinkMacSystemFont,sans-serif;word-wrap:break-word;}
+
+
+@media (prefers-color-scheme: dark){body{color:white;background-color:#111;}}
--- a/docs/bitty.js
+++ b/docs/bitty.js
@ -55,7 +55,7 @@ function decompressDataURL(dataURL, preamble, callback) {
  let encoding = info.encoding;
  let encodingIndex = dataURL.indexOf(encoding);

-  if (encoding) {
+  if (encoding != "base64") {
    var base64 = dataURL.substring(encodingIndex + LZMA64_MARKER.length + 1);
    base64 = base64.replace("-",""); // TODO: apply this elsewhere;

--- a/docs/bookmarklet.url
+++ b/docs/bookmarklet.url
@ -1 +0,0 @@
-javascript:((itty_bitty_recipes) => {let ldjson = document.querySelector('script[type=%22application/ld+json%22]').innerText.trim();var blob = new Blob([ldjson],{type : 'application/ld+json;charset=utf-8'}); var a = new FileReader();a.onload = function(e) { open(itty_bitty_recipes + '/#/'%20+%20e.target.result);};a.readAsDataURL(blob);})('https://gitty.bitty.site')
--- a/docs/bookmarklet.url.js
+++ b/docs/bookmarklet.url.js
@ -0,0 +1,54 @@
+https://itty.bitty.app/Recipe_Bookmarklet/Simplify_recipes_with_a_click./%F0%9F%8D%B4#itty.bitty.recipe/
+
+
+// JSON extraction
+
+//javascript:
+((itty_bitty_recipes) => {
+    let ldjson = document.querySelector('script[type="application/ld+json"]').innerText.trim();
+  let f = new FileReader();
+  f.onload = function(e) { location.href = (itty_bitty_recipes + '/#/' + e.target.result);};
+  f.readAsDataURL(new Blob([ldjson],{type : 'application/ld+json;charset=utf-8'}));
+})('https://recipe.bitty.app')
+
+
+
+// DOM extraction
+
+javascript:f=new FileReader();f.onload=function(e){top.location.href=('https://itty.bitty.app/#/'+e.target.result)};f.readAsDataURL(new Blob([document.documentElement.outerHTML],{type:'text/raw+html;render=parse;encode=none;charset=utf-8'}));
+
+javascript:f=new FileReader();f.onload=function(e){top.location.href=('http://localhost:8888/#/'+e.target.result)};f.readAsDataURL(new Blob([document.documentElement.outerHTML],{type:'text/raw+html;render=parse;encode=none;charset=utf-8'}));
+
+
+
+// JS Injection
+
+javascript:
+(function(ittybitty){
+  let id="ittybitty";
+  if (document.getElementById(id)) return;
+  var l = document.createElement('script');
+  l.setAttribute('type','text/javascript');
+  l.setAttribute('src',ittybitty + '/extractrecipe.js');
+  l.id=id;
+  document.head.appendChild(l);
+})("https://itty.bitty.app");
+
+
+// JS Injection with fallback
+
+javascript:
+(function(host){
+  document.getElementById(host)?.remove();
+  var l = document.createElement('script');
+  l.setAttribute('type','text/javascript');
+  l.setAttribute('src', host + '/extract.js');
+  l.onerror = () => {
+    let html = document.documentElement.innerHTML;
+    let f = new FileReader();
+    f.onload = function(e) { location.href = (host + '/#/' + e.target.result);};
+    f.readAsDataURL(new Blob([html],{type : 'text/rawhtml;charset=utf-8'}));
+  };
+  l.id = id;
+  document.head.appendChild(l);
+})("https://itty.bitty.app");
--- a/docs/edit.css
+++ b/docs/edit.css
@ -1,10 +1,33 @@
+
+
+html {
+  --text-color:rgba(0, 0, 0, 0.87);
+  --text-placeholder-color:rgba(0,0,0,0.54);
+  --text-link-color:#0070e0;
+  --background-color:white;
+  --shadow-color:black;
+
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    --text-color:white;
+    --text-placeholder-color:rgba(255,255,255,0.54);
+    --text-link-color:#40a0ff;
+    --background-color:#111;
+    --shadow-color:black;
+
+  }
+}
+
 body {
  margin: 0 auto;
  padding: 12vh 10vmin;
  max-width: 35em;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
  line-height: 1.5em;
-  color: rgba(0, 0, 0, 0.87);
 }

 h1 {
@ -15,7 +38,7 @@ h2 {
 }

 a {
-  color: #0070e0;
+  color: var(--text-link-color);
 }

 *[contenteditable="true"] {
@ -29,7 +52,7 @@ body.loaded:not(.edited) #placeholder {
 #placeholder {
  display: none;
  font-style: italic;
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--text-placeholder-color);
  pointer-events: none;
  position: absolute;
 }
@ -62,14 +85,14 @@ body.drag #content {
  top: 0;
  position: absolute;
  padding: 0.5em 0;
-  font-family: monospace;
  font-weight: bold;
+  font-size:small;
 }

 body.edited #doc-title:empty:before,
 #doc-title:focus:empty:before {
  content: "untitled";
-  color: rgba(0, 0, 0, 0.333);
+  color: var(--text-placeholder-color);
 }

 #doc-title:focus {
@ -79,19 +102,25 @@ body.edited #doc-title:empty:before,
 #doc-title:empty:before {
  background: transparent;
 }
-
+ 
 #content:empty:before {
  content: attr(placeholder);
  color: rgba(0, 0, 0, 0.2);
  background: transparent;
 }
+
 #doc-file {
  border-radius: 1em;
-  background: #ebeff9;
+  background-color: #fafafa;
  padding: 0.25em 1em;
-  font-size: smaller;
+  /* font-size: smaller; */
  margin-bottom: 2em;
-}
+  background-position: top center;
+  background-repeat: no-repeat;
+
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-outside-1_116_2' maskUnits='userSpaceOnUse' x='27' y='15' width='74' height='98' fill='black'%3E%3Crect fill='white' x='27' y='15' width='74' height='98'/%3E%3Cpath d='M80 16H28V112H100V36L80 16Z'/%3E%3C/mask%3E%3Cpath d='M80 16H28V112H100V36L80 16Z' fill='white'/%3E%3Cpath d='M28 16V15H27V16H28ZM80 16L80.7071 15.2929L80.4142 15H80V16ZM28 112H27V113H28V112ZM100 112V113H101V112H100ZM100 36H101V35.5858L100.707 35.2929L100 36ZM28 17H80V15H28V17ZM29 112V16H27V112H29ZM100 111H28V113H100V111ZM99 36V112H101V36H99ZM100.707 35.2929L80.7071 15.2929L79.2929 16.7071L99.2929 36.7071L100.707 35.2929Z' fill='black' fill-opacity='0.15' mask='url(%23path-1-outside-1_116_2)'/%3E%3C/svg%3E%0A");
+
+min-height: 160px;/* background-size: 128px; */text-align: center;padding-top: 128px;}
 #doc-file:empty {
  display: none;
 }
@ -122,7 +151,6 @@ body.edited #doc-title:empty:before,
  bottom: 0;
  left: 0;
  right: 0;
-  font-family: monospace;
  font-weight: bold;
  text-align: center;
 }
@ -141,8 +169,6 @@ body.edited #doc-title:empty:before,

 #toolbar button {
  vertical-align: baseline;
-
-  font-family: monospace;
 }

 #toolbar a.invalid {
@ -164,11 +190,11 @@ body.edited #doc-title:empty:before,
  right: 0;
  padding: 0.5em 1em;
  text-align: right;
-  font-family: monospace;
+
+  font-size:small;
  font-weight: bold;
  /*transform: translateY(-2em);*/
  transition: transform 100ms ease-out;
-  background-color: white;
  border-bottom-left-radius: 1em;
  cursor: pointer;
 }
@ -181,7 +207,6 @@ body.edited #doc-title:empty:before,
  position: absolute;
  padding: 0.5em 1em;
  z-index: 100;
-  font-family: monospace;
  font-weight: bold;
 }

@ -199,17 +224,25 @@ body:not(.copied) #copy-message {
  margin-left: 0.5em;
  cursor: pointer;
  text-decoration: none;
-  color: #333;
+  color: var(--text-color);
+  vertical-align: middle;
 }
 #toolbar a:hover {
  text-decoration: underline;
-  color: #111;
 }

 .menu {
  width: auto;
  display: none;
-}
+  color:var(--text-color);
+  border: 2px solid currentColor;
+  padding: 0.5em;
+  box-shadow: 2px 2px var(--shadow-color);
+  margin-right: -0.5em;border-radius: 2px;
+margin-top: 0.7em;}
+
+div#menu-contents {}
+
 #toolbar.menu-visible .menu {
  display: block;
 }
@ -220,4 +253,6 @@ body:not(.copied) #copy-message {

 .menu hr {
  border: none;
+  background-color: currentColor;
+  height: 2px;
 }
--- a/docs/edit.html
+++ b/docs/edit.html
@ -2,35 +2,40 @@
 <html>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width">
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; connect-src https://codepen.io; style-src 'unsafe-inline' 'self'">
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; connect-src https://codepen.io; font-src https://fonts.gstatic.com; style-src https://fonts.googleapis.com 'unsafe-inline' 'self'">
 <title>itty.bitty</title>
 <link rel="stylesheet" type="text/css" href="edit.css">
+<link id="favicon" rel="icon" href='/favicon.svg'>
 <script src="/js/lzma/lzma_worker-min.js"></script>
 <script src="/js/jquery-3.3.1.min.js"></script>
 <script src="/edit.js" type="module"></script>
+
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
+
 <body>

 <div id="doc-title" contenteditable="true" placeholder="itty.bitty"></div>
 <div id="doc-file"></div>

 <div id="placeholder">
-itty bitty things<br>
-can be conveyed in a link.<br>
-type here &ndash; and then share!<p><a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a><br>
+&nbsp;itty bitty things<br>
+&nbsp;can be conveyed in a link.<br>
+&nbsp;type here &ndash; and then share!<p>&nbsp;<a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a><br>
 </div>
 <div id="copy-message">Link copied to clipboard.</div>
 <div id="content"></div>
 <span id="toolbar">
-  <a target="_blank" id="length"></a>&nbsp;<a target="_blank" id="qrcode" href="https://zxing.appspot.com/generator/">qr code</a>&nbsp;<a target="_blank" id="menu">menu</a>
+  <a target="_blank" id="length"></a>&nbsp;<a id="share" class="">share</a></div>&nbsp;<a target="_blank" class="" id="menu">menu</a>
  <div id="menu-contents" class="menu">
-    <p><a id="copy">copy link</a><br>
-    ----<br>
+    <a id="copy">copy link</a>
+    <hr>
    <span id="menus-share-hint" class="disabled">share via</span><br>
+    <a target="_blank" id="qrcode" href="https://zxing.appspot.com/generator/">qr code</a><br>
    <a target="_blank" id="twitter" href="https://twitter.com/">twitter</a><br>
    <!--  <a target="_blank" id="bitly" href="https://bitly.com/">Bitly</a><br> -->

-    ----<br>
-    <a id="new" href="/edit">new site</a><br>
+    <hr>
+    <!-- <a id="new" href="/edit">new site</a><br> -->
    <a id="about" target="_blank" href="http://about.bitty.site" id="about">about itty</a>
  </div>
 </span>
--- a/docs/edit.js
+++ b/docs/edit.js
@ -42,6 +42,9 @@ window.onload = function() {
  content.focus();
  document.execCommand("selectAll", false, null);
  QS("#qrcode").onclick = makeQRCode;
+
+  QS("#share").onclick = share;
+  if (!navigator.share) QS("#share").style.display = "none"
  QS("#twitter").onclick = tweetLink;
  QS("#copy").onclick = copyLink;
  QS("#menu").onclick = toggleMenu;
@ -110,7 +113,7 @@ function handleDrop(e) {

          importedFileData = url2;
          updateLink(url2, file.name, true);
-          setFileName("📄" + file.name);
+          setFileName(file.name);
        });
      },
      false
@ -263,6 +266,15 @@ function updateLink(url, title, push) {
  }
 }

+function share() {
+  navigator.share({
+    title: 'itty.bitty',
+    url: location.href
+  }).then(() => {
+    console.log('Thanks for sharing!');
+  })
+  .catch(console.error);
+}
 function makeQRCode() {
  var url =
    "https://chart.googleapis.com/chart?cht=qr&chs=512x512&chld=L|1&choe=UTF-8&chl=" +
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  path {fill: black; stroke:white;}
+  @media (prefers-color-scheme: dark) {
+    path { fill: white}
+  }
+</style>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3103 1H9.99995V31H21.7833C23.7042 31 25.3528 30.6562 26.7289 29.9685C28.1051 29.2521 29.1515 28.235 29.8683 26.9169C30.585 25.5989 30.9434 24.0516 30.9434 22.2751C30.9434 20.384 30.5134 18.851 29.6533 17.6762C28.8218 16.5014 27.6607 15.6418 26.1699 15.0974V14.9685C26.9153 14.6246 27.5604 14.1662 28.1051 13.5931C28.6785 12.9914 29.1229 12.2607 29.4382 11.4011C29.7823 10.5415 29.9543 9.56733 29.9543 8.47851C29.9543 6.15759 29.1945 4.33811 27.675 3.02006C26.1842 1.67335 24.0626 1 21.3103 1ZM21.3533 23.9943C20.9806 24.1948 20.5219 24.2951 19.9771 24.2951H18.3859V18.7937H19.9771C20.7799 18.7937 21.3963 19.0372 21.8263 19.5244C22.2851 19.9828 22.5144 20.6562 22.5144 21.5444C22.5144 22.1175 22.4141 22.6189 22.2134 23.0487C22.0127 23.4499 21.726 23.765 21.3533 23.9943ZM21.0093 12.0458C20.6652 12.2464 20.2352 12.3467 19.7191 12.3467H18.3859V7.53295H19.7191C20.4932 7.53295 21.0953 7.74785 21.5253 8.17765C21.9554 8.60745 22.1704 9.19484 22.1704 9.93983C22.1704 10.4269 22.07 10.8567 21.8694 11.2292C21.6687 11.5731 21.382 11.8453 21.0093 12.0458Z" fill="black"/>
+<path d="M8.99999 9.93983L1.00002 9.93983L1 31L8.99998 31L8.99999 9.93983Z" />
+<path d="M5 9C3.75728 9 2.77346 8.63964 2.04854 7.91892C1.34951 7.1982 1 6.23243 1 5.02162C1 3.81081 1.36246 2.84505 2.08738 2.12433C2.8123 1.37477 3.78317 1 5 1C6.21683 1 7.1877 1.37477 7.91262 2.12433C8.63754 2.84505 9 3.81081 9 5.02162C9 6.23243 8.63754 7.1982 7.91262 7.91892C7.21359 8.63964 6.24272 9 5 9Z"/>
+</svg>
--- a/docs/history.html
+++ b/docs/history.html
@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<title>itty.bitty.history</title>
+<meta charset="utf-8"/>
+<link rel="icon" href="favicon.svg" type="image/x-icon" />
+<meta name="viewport" content="width=device-width, viewport-fit=cover">
+<meta name="description" content="itty bitty history">
+<script src="js/util.js"></script>
+<style>
+  * {
+    font-family: sans-serif;
+    font-size:13px;
+  }
+  body {
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  a {
+    display:inline-block;
+    text-decoration:none;
+    color:black;
+    margin:1em;
+    position:relative;
+    width:200px;
+    min-height:200px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    border-radius:4px;
+  }
+
+  a:hover {
+    background-color:#fafafa;
+  }
+
+  a:hover .preview {
+    opacity:0.8;
+  }
+  a .preview {
+    width:100%;
+    padding-top:61.8%;
+    background-size:cover;
+    background-position:center;
+  }
+  div.delete {
+    width:1em;
+    height:1em;
+    background-color:orange;
+    position:absolute;
+    top: -.5em;
+    right: -.5em;
+    background-color:white;
+    border:2px solid black;
+    border-radius:1em;
+    content:'x';
+    text-align:center;
+    line-height:0.9em;
+  }
+
+  a:not(:hover) div.delete {
+    display:none;
+  }
+
+  .title {
+    padding:1em;
+  }
+</style>
+<script>
+
+navigator.storage.persist().then(function(persistent) { 
+  console.log("persist", persistent)  ;
+})
+
+
+
+let openRequest = indexedDB.open("history", 1);
+
+openRequest.onupgradeneeded = function() {
+  // let db = openRequest.result;
+  // if (!db.objectStoreNames.contains('history')) { // if there's no "books" store
+  //   db.createObjectStore('history', {keyPath: 'id'}); // create it
+  // }
+};
+
+openRequest.onerror = function() {
+  console.error("Error", openRequest.error);
+};
+
+
+
+function deleteHistoryItem(key) {
+  let db = openRequest.result;
+  console.log("db", db);
+
+  let transaction = db.transaction("history", "readwrite"); // (1)
+  let history = transaction.objectStore("history"); // (2)
+
+  document.getElementById(key).remove()
+  history.delete(key);
+  // location.reload();
+}
+
+openRequest.onsuccess = function() {
+  let db = openRequest.result;
+  console.log("db", db);
+
+  let transaction = db.transaction("history", "readwrite"); // (1)
+  let history = transaction.objectStore("history"); // (2)
+
+
+// get all books
+history.getAll()
+
+let request = history.index('created').openCursor();
+
+// called for each book found by the cursor
+request.onsuccess = function() {
+  let cursor = request.result;
+  if (cursor) {
+    try {
+    let key = cursor.key; // book key (id field)
+    let value = cursor.value; // book object
+    let url = new URL(key);
+    let path = url.pathname.split("/");
+    console.log(path)
+    path.shift()
+    let title = path.shift().replace(/_/g, " ");
+    let description = path.shift();
+    let image = path.join("/");
+    let emoji = image.startsWith("http") ? null : decodeURIComponent(image);
+    console.log(key, value);
+    console.log("image", decodeURIComponent(image));
+    document.body.appendChild(
+        m('a', {href:key, id:key},
+        m('div.emoji', emoji),
+        m('div.preview', {style:"background-image:url(" + image + ")"}),
+        m('div.delete', {onclick: (e) => {e.stopPropagation(); e.preventDefault();  deleteHistoryItem(key); return false;}}, "×"),
+        m('div.title', title),
+        m('div.desc', description)));
+    } catch (e) {console.log(e)}
+    cursor.continue();
+  } 
+};
+
+
+};
+
+
+</script>
+
--- a/docs/index.css
+++ b/docs/index.css
@ -1,6 +1,9 @@
 body {
  font-family: sans-serif;
 }
+
+@media(prefers-color-scheme: dark){body{color:white;background-color:#111;}}
+
 #iframe {
  border: none;
  position: absolute;
--- a/docs/index.html
+++ b/docs/index.html
@ -1,8 +1,10 @@
 <!DOCTYPE html>
-<html xmanifest="manifest.appcache">
+<html>
+<meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, viewport-fit=cover">
 <meta name="description" content="itty bitty things can be conveyed in a link.">
-<link id="favicon" rel="icon" href='/favicon.ico'>
+<link id="favicon" rel="icon" href='/favicon.svg'>
+
 <link rel="stylesheet" href="/index.css">
 <script src="/js/lzma/lzma-d-min.js"></script>
 <script src="/js/lzma/lzma_worker-min.js"></script>
--- a/docs/render/parse.js
+++ b/docs/render/parse.js
@ -1,9 +1,22 @@
 // let title = params.title  

+
+parent.postMessage({title:"Parsing Content..."}, "*");
+document.write("PARSING CONTENT…")
+
+
 const parser = new DOMParser();
 const doc = parser.parseFromString(params.body, "text/html");

-let ldjson = doc.querySelector('script[type="application/ld+json"]').innerText.trim();
-let f = new FileReader();
-f.onload = function(e) { top.location.href = ( '/#/' + e.target.result);};
-f.readAsDataURL(new Blob([ldjson],{type : 'application/ld+json;charset=utf-8'}));
+let ldjson = doc.querySelector('script[type="application/ld+json"]')
+if (ldjson) {
+  ldjson = ldjson.innerText.trim();
+  let f = new FileReader();
+  f.onload = function(e) { 
+    //top.location.href = ( '/#/' + e.target.result);
+    parent.postMessage({replaceURL:'/temp#/' + e.target.result}, "*");
+  };
+  f.readAsDataURL(new Blob([ldjson],{type : 'application/ld+json;charset=utf-8'}));
+} else {
+  alert("No recipe found")
+}
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@ -86,14 +86,15 @@ background-color:#f1f1f1;
 ul.step {
  padding-inline-start: 0;
  list-style-type:none;
-
-padding: 0;margin: 0em;}
+  padding: 0;margin: 0em;
+}

 .instructions:not(.numbered) .number {
  display: none;
 }
+
 span.number {
-  margin-left: -24px;
+  margin-left: -27px;
  float:left;
  border: 2px solid currentColor;
  font-weight: 800;
@ -104,8 +105,8 @@ span.number {
  font-size: 10px;
  line-height: 16px;
  opacity:0.7;
-  display:none;
-}
+/* background: black; */}
+
 .number.big {
  font-size:8px;
 }
@ -164,6 +165,8 @@ border-radius: 2px;}
 .ingredients {
  font-weight: 700;
  font-size: 90%;
+  /* position:sticky; */
+  /* top: 0px; */
  /* padding-top: 1em; */
  flex: 0 1 35%;
 /* color: rgba(0,0,0,0.8); */}
@ -176,7 +179,11 @@ border-radius: 2px;}
  /* line-height: 125%; */
  /* font-size: 100%; */
  flex: 0 1 65%;
-  margin-top: -0.4em;
+  margin-top: -0.7em;
+}
+
+.instructions.numbered li {
+  padding-left: 2em;
 }

 .substep {
@ -206,7 +213,7 @@ border-radius: 2px;}
 }

 .ingredient.complete,
-.substep.complete {
+li.complete {
  text-decoration: line-through;
  opacity: 0.33;
 }
@ -309,4 +316,8 @@ color:var(--text-color);
  .noprint {
    display: none;
  }
-}
+}
+
+.instructions.numbered hr {margin: 0.7em 0;height: 2px;opacity: 10;}
+
+.instructions.numbered {margin-top: -1.6em;}
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@ -138,7 +138,7 @@ function highlightStep(e) {
  //   e.target.parent.children.forEach((i,el) => {
  //     el.classList.toggle("complete", )
  //   }
-  e.target.closest(".substep").classList.toggle("complete")
+  e.target.closest("li").classList.toggle("complete")

 }

@ -186,7 +186,7 @@ function render() {
  image = image?.url || image;
  instructions = json.recipeInstructions;
  let title = clean(json.name);
-  parent.postMessage({title:title, favicon:"🍳", image:image, updateURL:true}, "*");
+  parent.postMessage({title:title, favicon:"🍴", image:image, updateURL:true}, "*");


  // let text = instructions.join(" ");
@ -227,9 +227,10 @@ function render() {
      return [m("hr"), m("ul.step", instruction.map(i => renderInstructions(i, terms)))];
    }

-    let text = (instruction.text || instruction);
-    if (text.startsWith("= ")) return m("h3", text.substring(2));
+    let text = (instruction?.text || instruction);
+    if (text?.startsWith("= ")) return m("h3", text.substring(2));

+    if (!text) return;
    return m("li", { onclick: highlightStep }, 
      m("span.number" + (step>9 ? ".big" : ""), `${step++}`),
      m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)}))
@ -321,13 +322,14 @@ function render() {
    )
  )

-  var path = script.src.substring(0, script.src.lastIndexOf("."));
-  var cssURL = path + ".css";
-
-  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" }));


 }

+var path = script.src.substring(0, script.src.lastIndexOf("."));
+var cssURL = path + ".css";
+
+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" }));
+
 render();
--- a/netlify/edge-functions/index.js
+++ b/netlify/edge-functions/index.js
@ -5,40 +5,38 @@ export default async (request, context) => {
  let metadataBots = [ "Twitterbot", "curl", "facebookexternalhit", "Slackbot-LinkExpanding", "Discordbot"]
  let isMetadataBot = metadataBots.some(bot => useragent.indexOf(bot) != -1);
  if (isMetadataBot) {
-    let components = path.split("/");
-    components.shift();
-    let title = decodeURIComponent(components.shift()).replace(/_/g, " ");
-    let desc = decodeURIComponent(components.shift()).replace(/_/g, " ");
-    let image = decodeURIComponent(components.join("/"));
-    let content = "";
-    if (title) {
-      content += `<title>${title}</title><meta property="og:title" content="${title}"/>`;
-      // content += `<meta property="og:site_name" content=""/>`
-    }
-    if (desc && desc.length > 1) {
-      content += `<meta name="description" content="${desc}"/><meta property="og:description" content="${desc}"/>`;
-    }
-    if (image) {
-      if (image.startsWith("http")) {
-        content += `<meta property="og:image" content="${image.replace(":/", "://")}"/>`;
+    let components = path.substring(1).split("/");
+    // components.shift();
+    let info = {}
+    info.t = decodeURIComponent(components.shift()).replace(/_/g, " ");
+
+    components.forEach(component => {
+      let field = component.split(":");
+      console.log("field", field)
+      let key = field.shift();
+      let value = decodeURIComponent(field.join(":"));
+      if (key.length && value.length) info[key] = value;
+    })
+    info.d = info.d?.replace(/_/g, " ");
+
+    let content = [];
+    if (info.t) { content.push(`<title>${info.t}</title>`,`<meta property="og:title" content="${info.t}"/>`); }
+    if (info.s) { content.push(`<meta property="og:site_name" content="${info.s}"/>`); }
+    if (info.d) { content.push(`<meta property="og:description" content="${info.d}"/>`,`<meta name="description" content="${info.d}"/>`); }
+    if (info.i) { content.push(`<meta property="og:image" content="${info.i}"/>`); } 
+    if (info.f) {
+      if (info.f.length > 9){
+        content.push(`<link rel="icon" type="image/png" href="${info.f}">`);
      } else {
-        image = decodeURIComponent(image)
-        let codepoints = [];
-        for (const char of image) {
-          codepoints.push(char.codePointAt(0).toString(16));
-        }
-        content += `<link rel="icon" type="image/png" href="https://fonts.gstatic.com/s/e/notoemoji/14.0/${codepoints.join("_")}/128.png">`
+        let codepoints = Array.from(info.f).map(c => c.codePointAt(0).toString(16));
+        content.push(`<link rel="icon" type="image/png" href="https://fonts.gstatic.com/s/e/notoemoji/14.0/${codepoints.join("_")}/128.png">`);
      }
    }
    
-    context.log(title, "|", desc || "-", "|", image || "-");
+    context.log(info, content);

-    return new Response(content, {
+    return new Response(content.join("\n"), {
      headers: { "content-type": "text/html" },
    });
  }
-  // else {
-  //   console.log("Forward: " + "/?" + path)
-  //   return (context.rewrite("/?" + path))
-  // } 
 }
				`@ -1 +0,0 @@`
				`javascript:((itty_bitty_recipes) => {let ldjson = document.querySelector('script[type=%22application/ld+json%22]').innerText.trim();var blob = new Blob([ldjson],{type : 'application/ld+json;charset=utf-8'}); var a = new FileReader();a.onload = function(e) { open(itty_bitty_recipes + '/#/'%20+%20e.target.result);};a.readAsDataURL(blob);})('https://gitty.bitty.site')`