Readme
This val automatically serves the codeblock it contains.
Each codeblock is augmented with a set of properties
```html { name: "index.html" }
<h1>Hello world</h1>
```
Properties follow JSON5 syntax.
Currently only a name property is supported.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="icon" href="https://fav.farm/📔" />
<script src='main.js'></script>
</head>
<body>
<h1>This whole val code is extracted from a README!</h1>
<a href="https://www.val.town/v/pomdtr/notebook">View Val</a>
</body>
</html>
body {
background-color: white;
}
h1 {
color: red;
}
console.log("Hi from the readme")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
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { readme } from "https://esm.town/v/pomdtr/readme";
import json5 from "npm:json5@2.2.3";
import mime from "npm:mime@4.0.1";
export function extractFiles(markdown: string): Record<string, string> {
const fileRegex = /^```(\w+)\s*(.*)\s*\n([\s\S]*?)```/gm;
const files: Record<string, string> = {};
let match;
while ((match = fileRegex.exec(markdown)) !== null) {
const [, language, properties, content] = match;
const { name } = json5.parse(properties);
files[name] = content.trim();
}
return files;
}
export default async function(req: Request) {
const { pathname, search } = new URL(req.url);
const params = new URLSearchParams(search);
const { author, name } = extractValInfo(import.meta.url);
const markdown = await readme(author, name);
if (params.get("markdown")) {
return new Response(markdown, {
headers: {
"content-type": "text/markdown",
},
});
}
const files = extractFiles(markdown);
if (params.get("json")) {
return Response.json(files);
}
const filename = pathname == "/" ? "index.html" : pathname.slice(1);
const content = files[filename];
if (!content) {
return new Response("Not Found", { status: 404 });
}
return new Response(content, {
headers: {
"Content-Type": mime.getType(filename),
"Cache-Control": "no-cache, no-store, must-revalidate",
"Expires": "0",
},
});
}
👆 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.