Public
HTTP
pomdtr-valtownbyexample.web.val.run
v115
April 10, 2024
Readme
To add an example, just create a val. The val should start with a JSDoc style multi line comment that describes the example:
/**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
*/
// this comment will be displayed on the left
export const server = () => new Response("Hello world!")
The title is required.
Then, you can write the code. Code can be prefixed with a comment that describes the code. The comment will be rendered next to the code in the example page.
Make sure your val is public, then go to https://pomdtr-val_town_by_example.web.val.run/v/<your-username>/<your-val>
You can add another val to your example by adding an @include directive
/**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
* @include pomdtr/secondary_val
*/
You can attach an external link to your val by using the @resource directive. External resources are specified using a markdown link.
/**
* @title HTTP server: Hello World
* @description An example of a HTTP server that serves a "Hello World" message.
* @resource [Val Town Docs](https://docs.val.town)
**/
Just add your val in @pomdtr/val_town_by_example_toc
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 { api } from "https://esm.town/v/pomdtr/api";
import { honoMiddleware } from "https://esm.town/v/pomdtr/codeOnValTown";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { Example, IndexGroup, Snippet } from "https://esm.town/v/pomdtr/val_town_by_example_components";
import { CSS } from "https://esm.town/v/pomdtr/val_town_by_example_css";
import { parseExample } from "https://esm.town/v/pomdtr/val_town_by_example_parse";
import { readToc } from "https://esm.town/v/pomdtr/val_town_by_example_toc";
import { Hono } from "npm:hono";
const self = extractValInfo(import.meta.url);
const app = new Hono();
app.use(
"/",
honoMiddleware({
val: {
handle: self.author,
name: self.name,
},
}),
);
app.get("/", async (c) => {
const toc = await readToc();
return c.html(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Val Town by Example</title>
<link
rel="icon"
href="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e8532b85-8de0-40f5-47a1-d4b9580ff200/public"
/>
</head>
<body>
<div
class="min-h-screen grid grid-cols-1 mt-12"
style="grid-template-rows: auto 1fr auto;"
>
<main class="max-w-screen-lg mx-auto p-4">
<h1 class="flex items-center gap-4">
<div>
<span class="text(5xl gray-900) tracking-tight font-bold">
Val Town
</span>
<span class="text(2xl gray-700) tracking-tight italic font-medium ml-2">
by example
</span>
</div>
</h1>
<p class="mt-8 text-gray-900">
Val Town is a social website to write and deploy TypeScript.
</p>
<p class="mt-6 text-gray-900">
<i class="italic">Val Town by example</i>{" "}
is a collection of annotated examples for how to use Val Town, and the various features it provides. It
acts as a reference for how to do various things in Val Town, but can also be used as a guide to learn
about many of the features Val Town provides.
</p>
<ul class="mt-16 text-gray-900 md:flex md:flex-wrap gap-12 space-y-8 md:space-y-0">
{toc.map(
(group) => <IndexGroup group={group} />,
)}
</ul>
<p class="mt-12 text-gray-500">
<a href={self.htmlUrl} class="underline">Source</a> | Forked from{" "}
<a href="https://examples.deno.land/" class="underline">
Deno by Example
</a>
</p>
</main>
</div>
</body>
</html>,
);
});
app.get("/v/:author/:name", async (c) => {
const { author, name } = c.req.param();
const example = await parseExample(author, name);
const url = `https://esm.town/v/${author}/${name}`;
return c.html(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<title>{example.title}</title>
<style dangerouslySetInnerHTML={{ __html: CSS }} />
<link
rel="icon"
href="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e8532b85-8de0-40f5-47a1-d4b9580ff200/public"
/>
</head>
<body>
<main class="max-w-screen-lg mx-auto p-4">
<Example example={example} />
</main>
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
v115
April 10, 2024