Public
HTTP
pomdtr-markdocreactexample.web.val.run
v18
November 20, 2023
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",
},
});
}
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!
v18
November 20, 2023