Readme
A list of all the vals used in my hono + htmx site
~ thanks to @mxdvl for making the val to show many vals
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
import { alias } from "https://esm.town/v/neverstew/alias";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { html } from "https://esm.town/v/pomdtr/gfm";
import { readme } from "https://esm.town/v/pomdtr/readme";
const vals = await Promise.all(
[
"iamseeley/Server2",
"iamseeley/RootLayout",
"iamseeley/LandingPage",
"iamseeley/EditProfilePage",
"iamseeley/ProfilePage",
"iamseeley/SubmitSignup",
"iamseeley/SubmitLogin",
"iamseeley/SignupModal",
"iamseeley/LoginModal",
"iamseeley/AddLink",
"iamseeley/EditLinkModal",
"iamseeley/Queries",
"iamseeley/profileHandlers",
"iamseeley/linkHandlers",
"iamseeley/UserLinks",
"iamseeley/UserProfileHeader",
"iamseeley/Nav",
"iamseeley/Header"
]
.map(async id => {
const [username, valName] = id.split("/");
return alias({ username, valName });
}),
);
export default async function(req: Request) {
return new Response(
`
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HonoHTMX Val</title>
<style>${css}</style>
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- IBM Plex Sans -->
<link rel="stylesheet" href="https://static.esm.town/build/_assets/400-X2O3NP5A.css">
<link rel="stylesheet" href="https://static.esm.town/build/_assets/400-italic-MXNJ43MZ.css">
<link rel="stylesheet" href="https://static.esm.town/build/_assets/600-FEUL63OX.css">
<link rel="stylesheet" href="https://static.esm.town/build/_assets/700-5YNEZ3QH.css">
<link rel="stylesheet" href="https://static.esm.town/build/_assets/700-italic-RWWCWQ6V.css">
<link rel="stylesheet" href="https://static.esm.town/build/_assets/700-RV7MGDVG.css">
</head>
<body>
<h1>
hono 🤝 htmx 🤝 val town
</h1>
<ul>
${
vals.map((val) => {
const readmeContent = val.readme ? html(val.readme) : "";
return `<li>
${readmeContent}
<details>
<summary><span>${val.author.username}/${val.name} (v${val.version})</span><hr><span>${heart}${val.likeCount} ${ref}${val.referenceCount}</span></summary>
<iframe src="https://www.val.town/embed/${val.author.username}/${val.name}"></iframe>
</details>
</li>`;
}).join("\n")
}
</ul>
</body>
</html>`,
{
headers: {
"Content-Type": "text/html; charset=utf-8",
},
},
);
}
const heart =
`<svg viewBox="0 0 24 24"><path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322
const ref =
`<svg viewBox="0 0 24 24"><path d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" /></svg>`;
const css = `
html { padding: 0.5em; }
body { font-family: IBM Plex Sans, system-ui; max-width: 56rem; margin: 0 auto; }
h1 { padding-top: 0.5em; }
ul { list-style-type: none; padding: 0; }
li { background: rgb(249 250 251); padding: 0.5em; border-radius: 0.25em; border: 1px solid #e5e7eb; }
li + li { margin-block: 1rem; }
li blockquote { font-weight: 500; font-style: italic; border-left: 0.25rem solid rgb(229 231 235); margin-block: 1.6em; margin-inline: 0; padding-left: 1em; }
summary { cursor: pointer; display: flex; align-items: center; }
summary hr { flex-grow: 96; border: none; }
summary svg { height: 0.875em; position: relative; top: 0.125em; stroke: currentColor; stroke-width: 2; fill: none; }
iframe { border: none; min-height: 24rem; width: 100% }`;
👆 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.