This readme is rendered using markdoc.
{% val author="pomdtr" name="markdocReactExample" %}
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
/** @jsxImportSource npm:react */
import { api } from "https://esm.town/v/pomdtr/api";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
import Markdoc from "npm:@markdoc/markdoc";
import React from "npm:react";
import { renderToString } from "npm:react-dom/server";
const tags = {
val: {
render: "Val",
attributes: {
name: {
type: String,
},
author: {
type: String,
},
},
},
};
function Val({ author, name }) {
return <iframe width="600" height="300" frameBorder="0" src={`https://www.val.town/embed/${author}/${name}`} />;
}
export async function markdocReactExample(req: Request) {
// extract the current val readme
const { author, name } = extractValInfo(import.meta.url);
const { readme } = await api(`/v1/alias/${author}/${name}`);
// render it using markdoc
const ast = Markdoc.parse(readme);
const content = Markdoc.transform(ast, { tags }); // register the val tag
const rendered = Markdoc.renderers.react(content, React, {
components: {
Val,
},
});
return new Response(renderToString(rendered), {
headers: {
"Content-Type": "text/html",
},
});
}
👆 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.