1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @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 (
<plank id="materials-list" hx-swap-oob="true">
<details open>
<summary>Materials</summary>
<div>
Select{" "}
<button hx-post="/material" hx-swap="none" name="all" value="true">
All
</button>{" "}
<button hx-post="/material" hx-swap="none" name="all" value="false">
None
</button>
</div>
{Object.values(materialType).map((group) => {
return (
<material-group>
<material-group-name>{group.name}</material-group-name>
{group.links.map(
(mat) => {
// Possibly wait until loaded to toggle fully?
return (
<form
hx-post="/material"
hx-trigger="change"
hx-swap="none"
>
<label>
<input type="hidden" name="name" value={mat.id} />
<input
type="checkbox"
checked={mats.has(mat.id)}
name="included"
/>
{mat.name}
</label>
</form>
);
},
)}
</material-group>
);
})}
</details>
</plank>
);
}
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 (
<plank id="recipes-list" hx-swap-oob="true">
<details open>
<summary>Recipes</summary>
{sort(recipes, mats).map((recipe) => {
const thisSlug = slug(recipe.name);
// Possibly wait until loaded to toggle fully?
return (
<a
class={`recipe ${s === thisSlug ? "active" : ""}`}
href={`/recipe/${thisSlug}`}
hx-boost="true"
>
<name>
<img
width="16"
height="16"
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.