/** @jsxImportSource npm:hono/jsx */ import { camelCase } from "https://deno.land/x/case@2.2.0/mod.ts"; import { slug } from "https://deno.land/x/slug@v1.1.0/mod.ts"; import { BaseUnit, Fmt } from "https://esm.town/v/tmcw/BaseUnit"; import { getCookie } from "https://esm.town/v/tmcw/getCookie"; import { getMaterialIds } from "https://esm.town/v/tmcw/getMaterialIds"; import { getMaterials } from "https://esm.town/v/tmcw/getMaterials"; import { glasses } from "https://esm.town/v/tmcw/glasses"; import { materials } from "https://esm.town/v/tmcw/materials"; import { materialType } from "https://esm.town/v/tmcw/materialType"; import { Recipe } from "https://esm.town/v/tmcw/Recipe"; import { recipes } from "https://esm.town/v/tmcw/recipes"; import { setCookie } from "https://esm.town/v/tmcw/setCookie"; import { sort } from "https://esm.town/v/tmcw/sort"; import { styleSystem } from "https://esm.town/v/tmcw/styleSystem"; import { Context, Hono } from "npm:hono@3.8.1"; import { createContext, Fragment, useContext } from "npm:hono@3.8.1/jsx"; import { Ingredient } from "https://esm.town/v/tmcw/Ingredient"; // TODO: Deno doesn't have a pattern for this? const app = new Hono(); const { styleRoute, StyleTag } = styleSystem(); function MaterialsList() { const c = useContext(RequestContext); const mats = getMaterialIds(c); return (

Materials

Select{" "} {" "}

{Object.values(materialType).map((group) => { return ( {group.name} {group.links.map( (mat) => { // Possibly wait until loaded to toggle fully? return ( ); }, )} ); })}

); } function RecipesList() { const c = useContext(RequestContext); const s = c?.req.param("slug"); const mats = getMaterials(c); const names = new Set(mats.map((m) => m.name)); return (

Recipes

{sort(recipes, mats).map((recipe) => { const thisSlug = slug(recipe.name); // Possibly wait until loaded to toggle fully? return (

{recipe.name} {recipe.ingredients.map((ing, i, list) => { return ( {ing.material.name} {i === list.length - 1 ? "" : ", "} ); })} ); })}

); } app.get("/style", styleRoute); const units = { "Ml": null, "CL": null, "Oz": null, } as const; function Units() { const requestContext = useContext(RequestContext); let unit = getCookie(requestContext!, "units") || ""; if (!(unit in units)) unit = "Ml"; return ( ); } app.post("/units", async (c) => { const body = await c.req.parseBody(); setCookie(c, "units", String(body.unit)); c.header("HX-Push-URL", "false"); c.header("HX-Trigger", "refresh-recipe"); return c.html( , , ); }); function getTitle(recipe: Recipe | undefined): string { if (!recipe) { return "Old Fashioned"; } return `${recipe.name} | Recipe on Old Fashioned`; } function parseUnit(unit: string | undefined): Fmt { if (unit === "CL" || unit === "Ml" || unit === "Oz") { return unit; } return "Ml"; } function WelcomeMessage() { return ( Hi.

This is a website that I made about cocktails. I'm not a huge cocktail nerd (drinking is bad, probably), but think that they're cool. And the world's pretty bad right now and making this has been calming.

It gave me a chance to both tinker with technology I usually don't use (Elm), and explore some of the cool properties of cocktails: notably that they're pretty similar and have standardized ingredients, so they can be described in relationship to each other.

So some of it might seem funky. By default, the list is sorted by 'feasibility': as you add ingredients that you have, it'll put recipes that you can make (or barely make) closer to the top. Also, click on 'Grid' for a wacky adjacency grid of cocktails and their ingredients.

Also, for vim fans, there’s j & k support.

); } function RecipeDetail() { const c = useContext(RequestContext); const s = c?.req.param("slug") || ""; const recipe = recipes.get(s); const unit = parseUnit(getCookie(c!, "units")); if (!recipe) { if (s) { return ( That recipe couldn’t be found. ); } return ; } // https://schema.org/Recipe return ( {getTitle(recipe)}

{recipe.name}

Served in a {recipe.glass.name}

{recipe.description}

); } function IngredientDisplay({ ingredient, unit }: { ingredient: Ingredient; unit: keyof typeof units; }) { const c = useContext(RequestContext); const mats = getMaterials(c); const mat = ingredient.material; const name = mat.name; const has = mats.includes(mat); return ( {ingredient.unit.format(unit)} {name} {has ? null : ( )} ); } function Index() { const requestContext = useContext(RequestContext); const s = requestContext?.req.param("slug") || ""; const recipe = recipes.get(s); return ( {getTitle(recipe)} ); } const RequestContext = createContext(null); let reloaded = false; app.get("/", (c) => { reloaded = true; return c.html( , ); }); app.get("/recipe/:slug", (c) => { if (c.req.header("HX-Request")) { c.header("HX-Reswap", "none"); return c.html( , ); } reloaded = true; return c.html( , ); }); /** * "LiveReload" lol! */ app.get("/reload", (c) => { if (!reloaded) { reloaded = true; c.header("HX-Refresh", "true"); } c.status(204); return c.body(null); }); app.get("/icon/:slug", (c) => { const p = c.req.param("slug").replace(".svg", ""); const icon = glasses[p]; if (icon) { c.header("Content-Type", "image/svg+xml"); return c.body( , ); } c.status(404); return c.text("Not found"); }); app.get("/script.js", (c) => { const script = Deno.readTextFileSync("./script.js"); c.header("Content-Type", "application/javascript; charset=UTF-8"); return c.text(script); }); app.post("/material", async (c) => { if (c.req.header("HX-Request")) { const body = await c.req.parseBody(); if (body.all === "true") { setCookie(c, "mat", Object.values(materials).map((m) => m.id).join("_")); } else if (body.all === "false") { setCookie(c, "mat", ""); } else { const mats = getMaterialIds(c); if (body.included) { mats.add(body.name); } else { mats.delete(body.name); } setCookie(c, "mat", [...mats].filter((s) => s).join("_")); } c.header("HX-Push-URL", "false"); c.header("HX-Trigger", "refresh-recipe"); return c.html( , , ); } else { return c.redirect("/"); } }); export const oldfashioned = app.fetch;