Materials

\n\n

\n Select{\" \"}\n {\" \"}\n \n

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

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

Recipes

\n {sort(recipes, mats).map((recipe) => {\n const thisSlug = slug(recipe.name);\n // Possibly wait until loaded to toggle fully?\n return (\n \n \n \n {recipe.name}\n \n {recipe.ingredients.map((ing, i, list) => {\n return (\n \n \n {ing.material.name}\n \n {i === list.length - 1 ? \"\" : \", \"}\n \n );\n })}\n \n );\n })}\n

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

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

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

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

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

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

{recipe.name}

\n \n \n Served in a {recipe.glass.name}\n \n

\n \n

{recipe.description}

\n \n \n \n );\n}\n\nfunction IngredientDisplay({ ingredient, unit }: {\n ingredient: Ingredient;\n unit: keyof typeof units;\n}) {\n const c = useContext(RequestContext);\n const mats = getMaterials(c);\n const mat = ingredient.material;\n const name = mat.name;\n\n const has = mats.includes(mat);\n\n return (\n \n \n {ingredient.unit.format(unit)} {name}\n \n\n {has ? null : (\n

\n \n \n Add to cabinet\n \n \n )}\n \n );\n}\n\nfunction Index() {\n const requestContext = useContext(RequestContext);\n const s = requestContext?.req.param(\"slug\") || \"\";\n const recipe = recipes.get(s);\n return (\n \n \n {getTitle(recipe)}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nconst RequestContext = createContext(null);\n\nlet reloaded = false;\napp.get(\"/\", (c) => {\n reloaded = true;\n return c.html(\n \n \n ,\n );\n});\n\napp.get(\"/recipe/:slug\", (c) => {\n if (c.req.header(\"HX-Request\")) {\n c.header(\"HX-Reswap\", \"none\");\n return c.html(\n \n \n ,\n );\n }\n reloaded = true;\n return c.html(\n \n \n ,\n );\n});\n\n/**\n * \"LiveReload\" lol!\n */\napp.get(\"/reload\", (c) => {\n if (!reloaded) {\n reloaded = true;\n c.header(\"HX-Refresh\", \"true\");\n }\n c.status(204);\n return c.body(null);\n});\n\napp.get(\"/icon/:slug\", (c) => {\n const p = c.req.param(\"slug\").replace(\".svg\", \"\");\n const icon = glasses[p];\n\n if (icon) {\n c.header(\"Content-Type\", \"image/svg+xml\");\n return c.body(\n \n \n ,\n );\n }\n c.status(404);\n return c.text(\"Not found\");\n});\n\napp.get(\"/script.js\", (c) => {\n const script = Deno.readTextFileSync(\"./script.js\");\n c.header(\"Content-Type\", \"application/javascript; charset=UTF-8\");\n return c.text(script);\n});\n\napp.post(\"/material\", async (c) => {\n if (c.req.header(\"HX-Request\")) {\n const body = await c.req.parseBody();\n\n if (body.all === \"true\") {\n setCookie(c, \"mat\", Object.values(materials).map((m) => m.id).join(\"_\"));\n } else if (body.all === \"false\") {\n setCookie(c, \"mat\", \"\");\n } else {\n const mats = getMaterialIds(c);\n\n if (body.included) {\n mats.add(body.name);\n } else {\n mats.delete(body.name);\n }\n\n setCookie(c, \"mat\", [...mats].filter((s) => s).join(\"_\"));\n }\n\n c.header(\"HX-Push-URL\", \"false\");\n c.header(\"HX-Trigger\", \"refresh-recipe\");\n\n return c.html(\n \n \n \n \n ,\n ,\n );\n } else {\n return c.redirect(\"/\");\n }\n});\n\nexport const oldfashioned = app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/tmcw/oldfashioned/code/main.tsx","extension","actionData","errors"]