Readme
A val to list other vals, very meta!
You’re likely viewing this page generated from this very val… fork your own!
Until folder sharing is supported, this may be the best way to point to specific 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
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(
[
"mxdvl/haversine_distance",
"mxdvl/cities",
"mxdvl/trips",
"mxdvl/round",
"mxdvl/vals",
]
.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>Vals of interest</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>
Vals of interest
</h1>
<p>A list of most interesting vals. Mainly related to geographic manipulations.</p>
<ul>
${
vals.map((val) => (
`<li>
${html(val.readme)}
<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; }
summary:not([open]) iframe { display: 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.