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
/** @jsxImportSource https://esm.sh/hono@3.9.2/jsx **/
import type { FC } from "https://esm.sh/hono@3.9.2/jsx";
const Layout: FC = (props) => {
return (
<html>
<head>
<title>Val Town Blob Server</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="bg-gray-50 p-8">{props.children}</body>
</html>
);
};
const Homepage: FC<{ resources: { label: string; name: string; type: string }[] }> = (
props: { resources: { label: string; name: string; type: string }[] },
) => {
return (
<Layout>
<main class="max-w-xl mx-auto">
<h1 class="text-2xl font-bold mb-6">Congrats</h1>
<div class="space-y-2">
<p>You've set up an API for your Val Town lowdb instance</p>
<p>
✧*。٩(ˊᗜˋ*)و✧*。
</p>
</div>
<div id="resources">
<div>
<h1 class="text-2xl font-bold my-6">Resources</h1>
<p>The following resources are available</p>
<ul class="pl-4 space-y-0 my-3 list-inside list-disc">
{props.resources.map((resource) => {
return (
<li>
<a
href={resource.name}
class="font-normal text-blue-600 underline dark:text-blue-500 hover:no-underline"
>
{`/${resource.name}`}
</a>
<sup class="pl-1">{resource.label}</sup>
</li>
);
})}
</ul>
</div>
</div>
</main>
</Layout>
);
};
export { Homepage };
👆 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.