itty-bitty/docs/render/recipe.min.html

<style>*{font-family:-apple-system,BlinkMacSystemFont,sans-serif}body{margin:0 8vw;background-color:var(--background-color);color:var(--text-color);--text-color:rgba(0,0,0,0.87);--strong-text-color:black;--disabled-text-color:rgba(16,12,12,0.54);--hover-background-color:rgba(16,12,12,0.07);--image-placeholder-color:var(--hover-background-color);--background-color:white;--accent-color:#d42a20}.thumbnail{width:100%;padding-top:61.8%;max-height:1vh;background-size:cover;background-position:center;margin-bottom:1.3em;box-sizing:border-box}.description{white-space:pre-wrap}@media screen{.timer{white-space:nowrap;border-radius:2px;padding:0 .1em;margin:0 -0.1em;text-decoration-style:dotted;box-sizing:border-box;border-bottom-color:currentColor;font-weight:bold}.timer:hover,.timer.active{color:white;background-color:#0e638e;z-index:100;position:relative;border-bottom-color:transparent}.timer.active .label{opacity:.0}.timer .countdown{position:absolute;display:none;width:100%;text-align:center;left:0}.timer.active .countdown{display:inline-block}.timer svg{width:1em;vertical-align:sub;margin-bottom:1px}}@media print{.timer{font-weight:800}.timer svg{display:none}}img.publisher{max-width:8em;max-height:3em;transform:scale(0.7);transform-origin:left}.recipe{max-width:50em;margin:auto;line-height:125%}.columns{display:flex;gap:3em;margin-bottom:4em;align-content:center;justify-content:center}.headercolumns{display:flex;flex-direction:row-reverse}h1{margin-top:0;margin-bottom:0;line-height:125%;font-weight:500;font-size:2em}.noun.hovered{background-color:#fac22b;padding:0 2px 2px 2px;margin:-0 -2px -2px -2px;border-radius:2px}.step.hovered,.substep.hovered ~ *,.ingredient.hovered{background-color:#f1f1f1}.ingredient.hovered{background-color:#fac22b}.metadata{display:flex;flex-wrap:wrap;gap:.5em 1em;text-transform:uppercase;font-size:.88rem;font-weight:500;line-height:.8em;margin-top:.7em}ul.step{padding-inline-start:0;list-style-type:none;padding:0;margin:0}ul.step:after{content:"";display:none;width:5em;height:.5px;background-color:currentColor;opacity:1;border:0;margin:1em 0 .2em 0;print-color-adjust:exact;-webkit-print-color-adjust:exact}ul.step.header:after,ul.step:last-child:after{display:none}.instructions:not(.numbered) .number{display:none}.instructions.numbered .step{margin-bottom:1em}span.bullet{margin-left:-1.5rem;float:left;font-weight:600;border-radius:10em;width:16px;height:16px;text-align:center;opacity:1;user-select:none;color:var(--accent-color)}.instructions .step:not(:hover) span.bullet.substep{opacity:.3;color:var(--text-color)}@media screen{.complete span.bullet,li:hover span.bullet{color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M18.9 36.9 6.5 24.5 9.9 21.1 18.9 30.1 38.05 10.95 41.45 14.35Z'/%3E%3C/svg%3E");background-size:cover}.complete span.number{border-color:transparent}.complete .noun{color:var(--disabled-text-color)}.ingredient.complete,li.complete{text-decoration:line-through;color:var(--disabled-text-color);text-decoration:line-through;text-decoration:rgba(0,0,0,0.75) solid .5px line-through}}li{padding:.33em .5em;margin-left:-0.5em}.ingredient,li{border-radius:2px}.ingredient:hover,li:hover{background-color:rgba(0,0,0,0.1)}.spacer{flex-grow:1000}.metadata img{width:16px;vertical-align:middle;margin-top:-4px;margin-right:4px;opacity:.6}.time:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' fill='none' viewBox='0 0 18 22'%3E%3Cpath fill='%23000' d='M4.031 17.953C5.406 19.328 7.063 20.016 9 20.016c1.938 0 3.578-.688 4.922-2.063 1.375-1.375 2.062-3.031 2.062-4.969 0-1.937-.687-3.578-2.062-4.921C12.578 6.687 10.937 6 9 6c-1.938 0-3.594.688-4.969 2.063-1.343 1.343-2.015 2.984-2.015 4.921 0 1.938.671 3.594 2.015 4.97zm12-10.547c.532.688.985 1.578 1.36 2.672.406 1.063.609 2.031.609 2.906 0 2.47-.875 4.594-2.625 6.375-1.75 1.75-3.875 2.625-6.375 2.625s-4.625-.875-6.375-2.625C.875 17.58 0 15.453 0 12.984c0-2.468.875-4.578 2.625-6.328C4.375 4.875 6.5 3.984 9 3.984c.844 0 1.813.204 2.906.61C13.031 5 13.937 5.469 14.625 6l1.406-1.453c.5.406.969.875 1.407 1.406L16.03 7.406zm-8.015 6.61v-6h1.968v6H8.016zM12 .984V3H6V.984h6z'/%3E%3C/svg%3E%0A")}.time{background-size:18px;background-repeat:no-repeat}.ingredients{font-size:100%;position:sticky;flex:0 1 35%;max-width:16em}.noun{font-weight:700;color:var(--strong-text-color)}li:hover .noun{text-decoration:1px dotted underline}.instructions{white-space:pre-wrap;flex:1 1 65%}.instructions h3{font-weight:500;margin-top:1em;margin-bottom:.5em}.instructions.numbered li{padding-left:2rem;margin-left:-0.5rem}.substep{margin-bottom:1em}.ingredient{line-height:120%;cursor:pointer;margin-bottom:.2em}.hanging .ingredient{display:table-row}.ingredients .yield{margin-bottom:1.5em;font-weight:bold;text-transform:uppercase;margin-left:2em}.ingredients.hanging .quantity{text-align:right;color:var(--accent-color);white-space:nowrap;width:1em}.ingredient:hover{opacity:1;background-color:rgba(128,128,128,0.1)}.step{max-width:80em;cursor:default;margin-bottom:1em}.instructions hr{width:5em;height:.5px;background-color:currentColor;opacity:1;border:0;margin:1em 0 .2em 0}.actions{display:flex;gap:.5em 1em;line-height:24px;order:-1;justify-content:flex-end;margin-left:auto}.action{justify-content:center;border-radius:50%;cursor:pointer;width:44px;height:44px;color:var(--accent-color);display:flex;align-items:center}.action:hover{background-color:var(--hover-background-color);color:var(--strong-text-color)}.action:hover:not(:active) .icon{opacity:1.0}.action .icon{margin-right:0;width:24px;height:24px}.instructions hr:nth-child(2){display:none}@media screen and (max-width:520px){#thumbnail-container{margin:0 -8vw;background-color:var(--image-placeholder-color)}#thumbnail{padding-top:56.25%}.columns{flex-direction:column;gap:0}.ingredient,.instructions,header{padding-top:.5em}caption{padding-bottom:.5em;border-bottom:1px solid currentColor}.ingredients{padding-bottom:1em;margin-bottom:1em;max-width:unset}.instructions hr:first-child{display:none}.hanging .ingredient{margin:0}.ingredients .yield{margin-left:3em}.instructions hr:first-child{display:none}.headerflex{flex-direction:column}}.metadata .icon{vertical-align:middle;margin-top:-3px;margin-right:4px;opacity:.6;user-select:none;display:inline-block}img.qr{width:5cm;height:5cm;margin-left:1em;page-break-before:always}@media screen and (max-width:1199px){#thumbnail{filter:none !important;transform:none !important}}.recipe-content{max-width:50em;padding:1em 0}@media screen and (min-width:1200px){body{width:auto;margin:0}.recipe{flex-direction:row;display:flex;max-width:unset;justify-content:center}#thumbnail-container{width:100%;height:100vh;position:fixed;top:0;overflow:hidden;z-index:-1}.thumbnail{max-height:100vh;height:100vh}.recipe-content{max-width:50em;padding:2em 4em;background-color:var(--background-color);margin-top:35vh;margin-bottom:35vh}}.icon.print{background-position:0 0;width:24px;height:24px}.icon.share{width:24px;height:24px}.icon.iosshare{background-position:-24px 0;width:24px;height:24px}.icon.checklist{background-position:-24px -24px;width:24px;height:24px}.icon.more{background-position:-48px 0;width:24px;height:24px}.icon.servings{background-position:-72px 0;width:16px;height:16px}.icon.time{background-position:-72px -16px;width:16px;height:16px}.icon.info{background-position:-72px -32px;width:16px;height:16px}.icon.rating{background-position:-88px 0;width:16px;height:16px}@media(prefers-color-scheme:dark){body{--text-color:white;--strong-text-color:white;--hover-background-color:rgba(255,255,255,0.14);--background-color:#222;--disabled-text-color:rgba(255,255,255,0.54);--accent-color:rgba(255,255,255,0.7)}}.headerflex{display:flex;clear:both;flex-wrap:wrap;flex-direction:row-reverse;justify-content:space-between;margin-bottom:1em}.ingredient .noun{font-weight:800}.headerleft{margin-right:auto}section.ingredients caption{content:"Ingredients";margin-bottom:calc(1.3rem - 1em)}section.ingredients.hanging caption{display:table-caption}.hanging .ingredient .quantity:after{content:"\00a0\00a0"}.instructions caption{content:"Steps";margin-bottom:1.3rem}a.publisherlink,.ingredients caption,.instructions caption{font-weight:600;font-size:.88rem;text-transform:uppercase;user-select:none;color:var(--accent-color)}.ingredients caption,.instructions caption{text-align:left;display:block;margin-bottom:1em}.listtoggle{display:inline-block;height:16px;vertical-align:middle;margin-left:.5rem}path{fill:currentColor}a.publisherlink{float:left;text-decoration:none;color:var(--disabled-text-color)}.headerleft h1{max-width:16em}span.timer.active.expired{background-color:#dd2800}@media screen and (max-width:220px){.watch-hide{display:none !important}body{margin:0 0 0 6vw}html{font-size:18px}}html.watch .watch-hide{display:none !important}@media print{body{font-size:14px;min-height:100vh;margin:0;padding:0;height:100%}.print-hide{display:none !important}.recipe{margin:0;max-width:unset;min-height:100vh}.recipe-content{max-width:unset;height:100%}@page{size:auto}a[href]:after{content:none !important}img[src]:after{content:none !important}}@media not print{body{color:var(--text-color)}.print-show{display:none}}.ingredients{width:auto;border-spacing:5px;border-spacing:0 1em;height:auto;margin-bottom:auto}.ingredients.hanging{display:table}.ingredient{width:auto;clear:both}.hanging .ingredient>*{display:table-cell;width:99%}a.publisherlink:hover{color:var(--accent-color)}
</style>
<script >let reformat=true;let FRACTION_MAP={"1/4":"¼","1/2":"½","3/4":"¾","1/3":"⅓","2/3":"⅔","1/5":"⅕","2/5":"⅖","3/5":"⅗","4/5":"⅘","1/6":"⅙","5/6":"⅚","1/8":"⅛","3/8":"⅜","5/8":"⅝","7/8":"⅞",replace:function(string){return string.replace(/\d\/\d/g,(function(a,b,c){return FRACTION_MAP[a]}))}};var isWatch=window.outerWidth<220;if(isWatch)document.documentElement.classList.add("watch");let ignoredTerms=["but","broken","pieces","tbsp","tsp","peeled","then","can","oz","fresh","out","not","sprig","sprigs","room","temperature","still","see","notes","with","beat","together","crust","very","cold","hot","top","warm","one","note","teaspoon","teaspoons","tablespoon","tablespoons","cup","cups","taste","more","melted","into","wide","pound","pounds","gram","grams","you","ounce","ounces","thinly","sliced","pan","cube","cubes","finely","ground","garnish","about","cut","and","smashed","each","the","medium","large","small","for","chopped","minced","grated","box","softened","directed","shredded","cooked","from","frozen","thawed"];let emojiMap={grape:"🍇",watermelon:"🍉",melon:"🍈",orange:"🍊",lemon:"🍋",banana:"🍌",pineapple:"🍍",mango:"🥭",apple:"🍎",apple:"🍏",pear:"🍐",peach:"🍑",cherry:"🍒",strawberry:"🍓",blueberry:"🫐",kiwi:"🥝",garlic:"🧄",tomato:"🍅",olive:"🫒",coconut:"🥥",avocado:"🥑",eggplant:"🍆",potato:"🥔",carrot:"🥕",corn:"🌽",spicy:"🌶️","bell pepper":"🫑",cucumber:"🥒","leafy green":"🥬",broccoli:"🥦",onion:"🧅",mushroom:"🍄",peanut:"🥜",bean:"🫘",chestnut:"🌰",bread:"🍞",croissant:"🥐",baguette:"🥖",flatbread:"🫓",pretzel:"🥨",bagel:"🥯",pancake:"🥞",waffle:"🧇",cheese:"🧀",meat:"🍖",beef:"🥩",turkey:"🍗",chicken:"🍗",steak:"🥩",bacon:"🥓",hamburger:"🍔","french fries":"🍟",pizza:"🍕","hot dog":"🌭",sandwich:"🥪",taco:"🌮",burrito:"🌯",tamale:"🫔","stuffed flatbread":"🥙",falafel:"🧆",egg:"🥚",cooking:"🍳",pan:"🥘",pot:"🍲",soup:"🍲",fondue:"🫕",dip:"🫕",bowl:"🥣",salad:"🥗",popcorn:"🍿",butter:"🧈",salt:"🧂",can:"🥫","bento box":"🍱","rice cracker":"🍘","rice ball":"🍙",rice:"🍚",curry:"🍛","steaming bowl":"🍜",spaghetti:"🍝","roasted sweet potato":"🍠",oden:"🍢",sushi:"🍣","fried shrimp":"🍤","fish cake with swirl":"🍥","moon cake":"🥮",fruit:"🍓",dango:"🍡",dumpling:"🥟",oyster:"🦪",octopus:"🐙",fish:"🐟",salmon:"🐟",tuna:"🐟","soft ice cream":"🍦","shaved ice":"🍧","ice cream":"🍨",doughnut:"🍩",cookie:"🍪",birthday:"🎂",cake:"🍰",cupcake:"🧁",pie:"🥧",chocolate:"🍫",candy:"🍬",custard:"🍮",honey:"🍯",milk:"🥛",cream:"🥛",coffee:"☕",tea:"🫖",tea:"🍵",sake:"🍶",champagne:"🍾","wine glass":"🍷",cocktail:"🍸","tropical drink":"🍹",beer:"🍺","tumbler glass":"🥃","cup with straw":"🥤","bubble tea":"🧋","beverage box":"🧃",mate:"🧉",frozen:"🧊",chopsticks:"🥢","fork and knife":"🍴",spoon:"🥄"};let icons={public:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="public"><mask id="mask0_802_619" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_802_619)"><path id="public_2" d="M12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Zm-1-2.05V18c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 9 16v-1l-4.8-4.8c-.05.3-.096.6-.138.9-.041.3-.062.6-.062.9 0 2.017.663 3.783 1.988 5.3S8.983 19.7 11 19.95Zm6.9-2.55c.333-.367.633-.763.9-1.188.267-.425.488-.866.663-1.325a8.32 8.32 0 0 0 .4-1.412C19.954 12.992 20 12.5 20 12a7.847 7.847 0 0 0-1.362-4.475A7.704 7.704 0 0 0 15 4.6V5c0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 13 7h-2v2a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 10H8v2h6a.97.97 0 0 1 .713.287A.97.97 0 0 1 15 13v3h1c.433 0 .825.129 1.175.387.35.259.592.596.725 1.013Z"/></g></g></svg>',share_android:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M18 22a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 15 19c0-.117.008-.238.025-.363s.042-.237.075-.337l-7.05-4.1c-.283.25-.6.446-.95.587A2.9 2.9 0 0 1 6 15a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 3 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 6 9c.383 0 .75.07 1.1.212.35.142.667.338.95.588l7.05-4.1a1.843 1.843 0 0 1-.075-.337A2.749 2.749 0 0 1 15 5c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 18 2c.833 0 1.542.292 2.125.875S21 4.167 21 5s-.292 1.542-.875 2.125A2.893 2.893 0 0 1 18 8a2.9 2.9 0 0 1-1.1-.213 3.284 3.284 0 0 1-.95-.587L8.9 11.3c.033.1.058.212.075.337a2.753 2.753 0 0 1 0 .725 1.838 1.838 0 0 1-.075.338l7.05 4.1c.283-.25.6-.446.95-.588.35-.141.717-.212 1.1-.212.833 0 1.542.292 2.125.875S21 18.167 21 19s-.292 1.542-.875 2.125A2.893 2.893 0 0 1 18 22Zm0-16a.97.97 0 0 0 .712-.287A.968.968 0 0 0 19 5a.968.968 0 0 0-.288-.713A.967.967 0 0 0 18 4a.967.967 0 0 0-.712.287A.968.968 0 0 0 17 5c0 .283.096.521.288.713A.967.967 0 0 0 18 6ZM6 13a.968.968 0 0 0 .713-.288A.967.967 0 0 0 7 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 6 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 5 12c0 .283.096.52.287.712.192.192.43.288.713.288Zm12 7c.283 0 .52-.096.712-.288A.965.965 0 0 0 19 19a.965.965 0 0 0-.288-.712A.965.965 0 0 0 18 18a.965.965 0 0 0-.712.288A.965.965 0 0 0 17 19c0 .283.096.52.288.712A.965.965 0 0 0 18 20Z"/></g></svg>',share:`\n  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><g id="ios_share"><mask id="mask0_802_595" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><rect id="Bounding box" width="24" height="24"/></mask><g mask="url(#mask0_802_595)"><path id="ios_share_2" d="M6 23c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 4 21V10c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 8h3v2H6v11h12V10h-3V8h3c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v11a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 18 23H6Zm5-7V4.825l-1.6 1.6L8 5l4-4 4 4-1.4 1.425-1.6-1.6V16h-2Z"/></g></g></svg>\n  `,print:`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="print"><mask id="mask0_802_592" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_802_592)"><path id="print_2" d="M16 8V5H8v3H6V3h12v5h-2Zm2 4.5c.283 0 .52-.096.712-.288A.965.965 0 0 0 19 11.5a.968.968 0 0 0-.288-.713A.967.967 0 0 0 18 10.5a.967.967 0 0 0-.712.287.968.968 0 0 0-.288.713c0 .283.096.52.288.712A.965.965 0 0 0 18 12.5ZM16 19v-4H8v4h8Zm2 2H6v-4H2v-6c0-.85.292-1.562.875-2.137S4.167 8 5 8h14c.85 0 1.563.288 2.138.863S22 10.15 22 11v6h-4v4Zm2-6v-4a.968.968 0 0 0-.288-.713A.967.967 0 0 0 19 10H5a.97.97 0 0 0-.713.287A.97.97 0 0 0 4 11v4h2v-2h12v2h2Z"/></g></g></svg>`,checklist:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M5.55 19 2 15.45l1.4-1.4 2.125 2.125 4.25-4.25 1.4 1.425L5.55 19Zm0-8L2 7.45l1.4-1.4 2.125 2.125 4.25-4.25 1.4 1.425L5.55 11ZM13 17v-2h9v2h-9Zm0-8V7h9v2h-9Z"/></g></svg>',servings:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><mask id="a" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M0 0h16v16H0z"/></mask><g mask="url(#a)"><path d="M11.333 14.667V9.334h-2V4.667c0-.922.325-1.708.976-2.358a3.211 3.211 0 0 1 2.357-.976v13.334h-1.333Zm-6.667 0v-6.1a2.747 2.747 0 0 1-1.424-.934A2.495 2.495 0 0 1 2.667 6V1.333H4V6h.667V1.333H6V6h.667V1.333H8V6c0 .622-.192 1.167-.575 1.633A2.747 2.747 0 0 1 6 8.567v6.1H4.667Z"/></g></svg>',timer:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><mask id="a" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M0 0h16v16H0z"/></mask><g mask="url(#a)"><path d="M6 2V.667h4V2H6Zm1.333 7.333h1.334v-4H7.333v4ZM8 14.666a5.769 5.769 0 0 1-2.325-.474A6.134 6.134 0 0 1 3.767 12.9a6.133 6.133 0 0 1-1.292-1.908A5.77 5.77 0 0 1 2 8.666c0-.822.158-1.597.475-2.325a6.135 6.135 0 0 1 1.292-1.908 6.125 6.125 0 0 1 1.908-1.291A5.763 5.763 0 0 1 8 2.667c.689 0 1.35.11 1.983.333a6.482 6.482 0 0 1 1.784.966l.933-.933.933.933-.933.934c.422.555.744 1.15.967 1.783.222.633.333 1.295.333 1.983 0 .823-.158 1.598-.475 2.326a6.133 6.133 0 0 1-1.292 1.908 6.133 6.133 0 0 1-1.908 1.292A5.769 5.769 0 0 1 8 14.666Zm0-1.333c1.289 0 2.389-.455 3.3-1.367.911-.91 1.367-2.01 1.367-3.3 0-1.288-.456-2.388-1.367-3.3C10.389 4.457 9.289 4 8 4c-1.289 0-2.389.455-3.3 1.367-.911.91-1.367 2.01-1.367 3.3 0 1.288.456 2.388 1.367 3.3.911.91 2.011 1.366 3.3 1.366Z"/></g></svg>',rating:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><mask id="a" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M0 0h16v16H0z"/></mask><g mask="url(#a)"><path d="M4.7 14.033c-.122.1-.253.106-.391.017-.14-.09-.181-.211-.126-.367L5.433 9.6l-3.25-2.333c-.133-.09-.175-.212-.124-.367.05-.156.152-.234.308-.234H6.4L7.683 2.4c.023-.089.064-.15.126-.183a.393.393 0 0 1 .383 0c.06.033.102.094.125.183L9.6 6.667h4.033c.156 0 .259.077.309.233.05.155.008.278-.125.366L10.567 9.6l1.25 4.083c.055.156.014.278-.125.367-.14.089-.27.083-.392-.017l-3.3-2.5-3.3 2.5ZM6.4 11.1 8 9.867 9.6 11.1 9 9.066 10.5 8H8.633L8 5.933 7.367 8H5.5L7 9.066 6.4 11.1Z"/></g></svg>'};const replacements={teaspoon:"tsp.",tablespoon:"Tbsp."};let lastNoun=undefined;window.addEventListener("click",(e=>{let target=e.target;if(target.classList.contains("noun")){let els=document.querySelectorAll("#"+e.target.id);let isIngredient=target.closest(".ingredients");for(const noun of els){noun.classList.add("hovered");if(noun.closest(".ingredients")!=isIngredient){noun.scrollIntoView({behavior:"smooth",block:"center"});console.log("focusing",noun);if(noun==lastNoun)break}}lastNoun=target}}));window.addEventListener("mouseover",(e=>{let target=e.target;if(target.classList.contains("noun")){let els=document.querySelectorAll("#"+e.target.id);let isIngredient=target.closest(".ingredients");for(const noun of els){noun.classList.add("hovered");noun.closest(".substep")?.classList.add("hovered");noun.closest(".ingredient")?.classList.add("hovered")}lastNoun=target}}));window.addEventListener("mouseout",(e=>{let target=e.target;if(target.classList.contains("noun")){let els=document.querySelectorAll("#"+e.target.id);for(const noun of els){noun.classList.remove("hovered");noun.closest(".substep")?.classList.remove("hovered");noun.closest(".ingredient")?.classList.remove("hovered")}}}));function getStringProperty(stringOrArray,prop){if(Array.isArray(stringOrArray)){stringOrArray=stringOrArray.pop()}if(prop){stringOrArray=stringOrArray[prop]}return stringOrArray?.toString()}const m=(selector,...args)=>{var attrs=args[0]&&typeof args[0]==="object"&&!Array.isArray(args[0])&&!(args[0]instanceof HTMLElement)?args.shift():{};let classes=selector.split(".");if(classes.length>0)selector=classes.shift();if(classes.length)attrs.className=classes.join(" ");let id=selector.split("#");if(id.length>0)selector=id.shift();if(id.length)attrs.id=id[0];var node=document.createElement(selector.length>0?selector:"div");for(let prop in attrs){if(attrs.hasOwnProperty(prop)&&attrs[prop]!=undefined){if(prop.indexOf("data-")==0){let dataProp=prop.substring(5).replace(/-([a-z])/g,(function(g){return g[1].toUpperCase()}));node.dataset[dataProp]=attrs[prop]}else{node[prop]=attrs[prop]}}}const append=child=>{if(Array.isArray(child))return child.forEach(append);if(typeof child=="string")child=document.createTextNode(child);if(child)node.appendChild(child)};args.forEach(append);return node};function clean(html){if(!html)return;let doc=(new DOMParser).parseFromString(html,"text/html");return doc.body.textContent||""}function formatTime(time){const timeRE=/(?<sign>-)?P(?:(?<years>[.,\d]+)Y)?(?:(?<months>[.,\d]+)M)?(?:(?<weeks>[.,\d]+)W)?(?:(?<days>[.,\d]+)D)?T(?:(?<hours>[.,\d]+)H)?(?:(?<minutes>[.,\d]+)M)?(?:(?<seconds>[.,\d]+)S)?/;let duration=time.match(timeRE).groups;if(duration){time=[];if(duration.minutes>60){duration.hours=Math.floor(duration.minutes/60);duration.minutes=duration.minutes%60}if(duration.hours>0)time.push(duration.hours+"h");if(duration.minutes>0)time.push(duration.minutes+"m");time=time.join(" ")}return time}function markIngredient(e){if(e.target.classList.contains("noun"))return;e.target.closest(".ingredient").classList.toggle("complete")}function highlightStep(e){if(e.target.classList.contains("noun"))return;if(e.target.closest(".timer"))return;if(e.target.tagName=="A")return;e.target.closest("li").classList.toggle("complete")}const ingredientMatch=/^(?:A )?([\-\/0-9 \u00BC-\u00BE\u2153-\u215E\u2009]*)\s(.*)/;function ingredientEl(string,terms){if(string=="-")return m("hr");let match=FRACTION_MAP.replace(clean(string)).match(ingredientMatch);if(match){return[m("span.quantity",match[1].replace(" "," "))," ",m("span",{innerHTML:highlightTerms(match[2],terms)})]}return[m("span.quantity",""),m("span",{innerHTML:highlightTerms(string,terms)})]}function highlightTerms(string,terms){const pattern=new RegExp(`\\b((${Array.from(terms).join("|").replace("-","\\-")}))\\b`,"gi");return string.replace(pattern,(match=>{let emoji=undefined;return`<span class="noun" id="term-${match.trim().replace(" ","-")}">${emoji?emoji+"&nbsp;":""}${match}</span>`}))}function highlightTimes(string){const pattern=/([0-9]+)\s*(?:to|-|–)?\s*([0-9]+)?\s?(minutes?|hours?)/g;return string.replace(pattern,((match,t1,t2,tt,offset,groups)=>`<span class="timer" onclick="startTimer(this, ${t1}, ${t2})">${icons.timer}<span class="countdown"></span><span class="label">${match}</span></span>`))}function dismissTimer(e){console.log(e.target)}function playSound(loc){var audio=new Audio(loc)}function startTimer(e,t1,t2){if(!e.startTime){e.startTime=new Date;let duration=t1*60;e.endTime=new Date(e.startTime.getTime()+duration*1e3);console.log("end",e.endTime);let countdownEl=e.querySelector(".countdown");console.log(e,t1,t2);e.classList.add("active");let update=()=>{let now=new Date;let percent=(now-e.startTime)/1e3/duration*100;e.style.backgroundImage=`linear-gradient(to right, transparent ${percent}%, rgba(255,255,255,0.4) ${percent}%)`;let remaining=Math.round((e.endTime-now)/1e3);let expired=percent>100;if(expired){playSound("recipe/beep.mp4");delete e.style.backgroundImage;remaining=-remaining;e.classList.add("expired")}let countdownString=`${expired?"-":""}${Math.floor(remaining/60)}m ${remaining%60}s`;countdownEl.innerText=countdownString};e.interval=setInterval(update,1e3);update()}else{e.interval=clearInterval(e.interval);e.classList.remove("active");e.classList.remove("expired");e.style.backgroundImage="";delete e.startTime}}window.startTimer=startTimer;function share(){parent.postMessage({share:{}},"*")}function faviconForTitle(title){title=title.toLowerCase();for(let f in emojiMap){if(title.indexOf(f)!=-1){return emojiMap[f]}}return undefined}function render(){try{let data=JSON.parse(window.params.body);var json=data;if(json["@type"]!="Recipe"){json=(json["@graph"]??json).find((item=>item["@type"]=="Recipe"))}console.log("Recipe",json)}catch(e){document.body.appendChild(m("div","Error parsing recipe",m("p",e.message),m("p",e.stack),m("pre",window.params.body)));console.error("Data",e,{e:e,body:window.params.body});return}document.head.appendChild(m("base",{target:"_blank"}));delete document.documentElement.style.display;document.body.childNodes.forEach((c=>document.body.removeChild(c)));if(!json)return;let image=json.image;if(Array.isArray(image))image=image.shift();image=image?.url||image;let instructions=json.recipeInstructions;let title=clean(json.name);let description=json.description||json.articleBody;description=clean(description?.replace(/\\n/g,"<br>"));let favicon=faviconForTitle(title)||"🍴";parent.postMessage({title:title,favicon:favicon,image:image,description:description,wakeLock:true,updateURL:true},"*");description=description?.split("\n").join("<p>");let ingredients=json.recipeIngredient;var ingredientTerms=new Set(Array.from(ingredients.join("\n").matchAll(/(\p{L}\p{M}?)+/gu)).map((m=>m[0].length>2?m[0].toLowerCase():"")));if(typeof instructions==="string")instructions=[instructions];instructions=flattenInstructions(instructions);console.log("instructions",instructions);let intructionTerms=new Set(Array.from(instructions.flat().join("\n").matchAll(/[A-Za-z\-]+/g)).map((m=>m[0].length>2?m[0].toLowerCase():"")));ignoredTerms.forEach((t=>{ingredientTerms.delete(t)}));ingredientTerms.forEach((t=>{if(!intructionTerms.has(t)){ingredientTerms.delete(t)}}));ingredientTerms.delete("");ingredients=ingredients.map((i=>m("div.ingredient",{onclick:markIngredient},ingredientEl(clean(i),ingredientTerms))));let step=1;function renderInstructions(instruction,terms,i){if(Array.isArray(instruction)){let instructions=instruction.map(((inst,i)=>renderInstructions(inst,terms,i)));let className="step";if(instructions[0].tagName=="H3")className="step header";let number=undefined;return m("ul",{className:className},number,instructions)}let text=instruction?.text||instruction;if(!text)return;if(text?.startsWith("= "))return m("h3",text.substring(2));if(text?.endsWith(":"))return m("h3",text);return m("li",{onclick:highlightStep},i==0?m("span.bullet.number"+(step>9?".big":""),(step++).toString()):m("span.bullet.substep","·"),m("span.substep",{innerHTML:highlightTimes(highlightTerms(FRACTION_MAP.replace(text.trim()),terms))}))}function stepsFromText(text){let abbreviations=["tsp","tbsp","oz","lb","lbs"];let steps=[];let i=0;let start=0;let depth=0;let lastSpace=0;for(let i=0;i<text.length;i++){switch(text[i]){case"(":depth++;break;case")":depth--;break;case" ":lastSpace=i;break;case".":case"!":case"?":let lastWord=text.substring(lastSpace,i).trim();lastWord=lastWord.match(/\w+$/)?.pop().toLowerCase();if(abbreviations.includes(lastWord)){continue}let end;if(text[i+1]==")"&&text[i+2]==" "){end=i+2}else if(text[i+1]==" "&&text[i+2]!="("&&depth==0){end=i+1}if(end){let string=text.substring(start,end);steps.push(string.trim());start=end}break;case"\n":steps.push(text.substring(start,i).trim());start=i;default:}}steps.push(text.substring(start));return steps}function flattenInstructions(instruction){if(instruction.itemListElement){return["= "+instruction.name].concat(flattenInstructions(instruction.itemListElement))}if(Array.isArray(instruction)){if(Array.isArray(instruction[0]))instruction=instruction.flat();return instruction.map((i=>flattenInstructions(i)))}let text=instruction.text||instruction.name||instruction;if(reformat){text=stepsFromText(text)}else{text=text.match(/[^\n]+/g)}return text}if(instructions.length==1)console.log("One instruction");instructions=instructions.map((inst=>renderInstructions(inst,ingredientTerms)));let rating=json.aggregateRating;let ratingCount=rating?.ratingCount;if(ratingCount&&ratingCount<10)rating=undefined;let recipeYield=getStringProperty(json.recipeYield);if(!isNaN(parseInt(recipeYield?.charAt(recipeYield?.length-1))))recipeYield+=" servings";function imgload(e){console.log(e,"img");var image=document.querySelector("img");var isLoaded=image.complete&&image.naturalHeight!==0;alert(isLoaded)}var bgImg=new Image;bgImg.onload=function(){let thumbnail=document.querySelector("#thumbnail");if(!thumbnail)return;let thumbnailContainer=document.querySelector("#thumbnail-container");thumbnail.style.backgroundImage='url("'+bgImg.src+'")';let blur=1;blur=Math.max(blur,Math.max(thumbnailContainer.offsetHeight*window.devicePixelRatio/bgImg.naturalHeight,thumbnailContainer.offsetWidth*window.devicePixelRatio/bgImg.naturalWidth));if(blur>1)thumbnail.style.filter=`blur(${blur/2}px)`;setTimeout((()=>thumbnail.style.opacity=1),0)};bgImg.src=image;console.log("image",bgImg.src);let originalURL=json.mainEntityOfPage?.["@id"]??(json.mainEntityOfPage==true?false:json.mainEntityOfPage)??json.url;let hostname=originalURL?new URL(originalURL).hostname.replace("www.",""):"";let qrImage=undefined;let publisherImage=json.publisher?.image?.[0]?.url??json.publisher?.logo?.url;document.body.appendChild(m(".recipe",{},image?m("#thumbnail-container",m("#thumbnail.thumbnail.print-hide",{style:"background-image:url("+image+");"})):null,m(".recipe-content",m("div.headercolumns",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):null,rating?m("div.rating",m(".icon.rating",{innerHTML:icons.rating}),parseFloat(rating.ratingValue).toFixed(1)," "):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(".actions.print-hide.watch-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:"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(isWatch?"section.ingredients":"section.ingredients.hanging",m("caption.ingredients-title",{onclick:e=>{e.target.closest("section").classList.toggle("hanging")}},"Ingredients"),ingredients),m(reformat?"section.instructions.numbered":"section.instructions.numbered",m("caption.ingredients-title",{onclick:()=>{reformat=!reformat;render();return false}},reformat?"Steps":"Instructions",m("div.listtoggle.print-hide",{innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><mask id="a" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M0 0h16v16H0z"/></mask><g mask="url(#a)"><path fill="#000" d="M3.7 12.667 1.333 10.3l.934-.933 1.416 1.416L6.517 7.95l.933.95-3.75 3.767Zm0-5.334L1.333 4.967l.934-.934L3.683 5.45l2.834-2.833.933.95L3.7 7.333Zm4.967 4V10h6v1.333h-6Zm0-5.333V4.667h6V6h-6Z"/></g></svg>'})),instructions))),qrImage?m("img#qr.qr.print-show",{src:qrImage,onclick:()=>window.print()}):null))}function keepAwake(){let ctx=new AudioContext;let bufferSize=2*ctx.sampleRate,emptyBuffer=ctx.createBuffer(1,bufferSize,ctx.sampleRate),output=emptyBuffer.getChannelData(0);for(let i=0;i<bufferSize;i++)output[i]=0;let source=ctx.createBufferSource();source.buffer=emptyBuffer;source.loop=true;let node=ctx.createMediaStreamDestination();source.connect(node);let audio=document.createElement("audio");audio.style.display="none";document.body.appendChild(audio);audio.srcObject=node.stream;audio.play();console.log("playing",audio)}
</script>
<script>
  function loadScript(src, callback, type = "module") {
    let promise =  new Promise((resolve, reject) => {
      let script = document.createElement("script")
      script.type = type;
      script.onload = resolve;
      script.src = src
      document.head.appendChild(script);
      console.log("script", script)
    })
    return callback ? promise.then(callback) : promise;
  }

  window.addEventListener("message", function(e) {
    let data = e.data;
    // var base = el('base', {href: data.script});
    // console.log("MESSAGE", data, base, data.script);
    // document.head.appendChild(base);
    window.script = data.script
    console.log("data.script", data)
    window.params = data;
    window.params.origin = e.origin;
    console.log("🖊 Rendering with", {script:data.script, params:data})

    render()

    loadScript("../js/qrious.min.js", null, "").then(() => {
      console.log("qrious loaded", window.params, window.params.originalURL);
var qr = new QRious({
        element: document.getElementById("qr"),
        background: 'transparent',
        foreground: 'currentColor',
        size: 512,
        value: params.originalURL.substring(0),
      });
      
    })
  }, false);
</script>