Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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 https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
import { Hono } from "npm:hono";
import satori from "npm:satori";
const app = new Hono();
const colors = {
textColor: "#222222",
surface: "#c0c0c0",
dialogBlue: "#000080",
dialogBlueLight: "#1084d0",
windowFrame: "#0a0a0a",
buttonFace: "#dfdfdf",
buttonShadow: "#808080",
buttonHighlight: "#ffffff",
};
const tokens = {
borderWindowInner: `inset -2px -2px ${colors.buttonShadow}, inset 2px 2px ${colors.buttonHighlight}`,
borderWindowOuter: `inset -1px -1px ${colors.windowFrame}, inset 1px 1px ${colors.buttonFace}`,
minimizeIcon:
"data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E",
maximizeIcon:
"data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E
closeIcon:
"data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H
elementSpacing: 8,
};
function TitleBar(props) {
return (
<div
style={{
display: "flex",
background: `linear-gradient(90deg, ${colors.dialogBlue}, ${colors.dialogBlueLight})`,
padding: "3px 2px 3px 3px",
justifyContent: "space-between",
alignItems: "center",
}}
>
{props.children}
</div>
);
}
function TitleBarText(props) {
return (
<div
style={{
display: "flex",
fontWeight: "bold",
color: "white",
letterSpacing: 0,
marginRight: 24,
}}
>
{props.children}
</div>
);
}
function TitleBarControls(props) {
return <div style={{ display: "flex" }}>{props.children}</div>;
}
function Button(props) {
return (
<div
style={{
boxSizing: "border-box",
border: "none",
// color: "transparent",
justifyContent: "center",
alignItems: "center",
// textShadow: "0 0 " + colors.textColor,
background: colors.surface,
boxShadow: `${tokens.borderWindowOuter}, ${tokens.borderWindowInner}`,
borderRadius: 0,
minWidth: 75,
minHeight: 23,
padding: "0 12px",
...props.style,
}}
>
{props.children}
</div>
);
}
function TitleBarControl(props) {
return (
<Button
style={{
marginLeft: props.marginLeft ?? 0,
display: "flex",
padding: 0,
maxWidth: 16,
maxHeight: 14,