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 npm:react */
import { render } from "https://esm.town/v/jxnblk/reactSVG2PNG";
import wrap from "npm:word-wrap";
const MARGIN = 64;
const FONT_SIZE = 32;
const LINE_HEIGHT = 64;
const TOP = 224;
const COLOR = "#230462";
const BACKGROUND = "#eef5e1";
function Component({ request, url }) {
const text = url.searchParams.get("text");
const fontSize = url.searchParams.get("fontSize") || FONT_SIZE;
const fontWeight = url.searchParams.get("fontWeight") || "bold";
const wrapped = wrap(text, { trim: true, indent: "" }) || "Indirection";
const lines = wrapped.split(/\n/g);
console.log(lines);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1200"
height="640"
viewBox="0 0 1200 640"
fill={COLOR}
style={{
fontFamily: "monospace", // "system-ui, sans-serif",
fontSize,
fontWeight,
}}
>
<rect
width={1200}
height={640}
fill={BACKGROUND}
/>
<g>
{lines.map((line,i) => (
<text
key={i}
x={MARGIN}
y={TOP + LINE_HEIGHT * i}
fontSize={fontSize}
fontWeight={fontWeight}
>
{line}
</text>
))}
</g>
</svg>
);
}
export default render(Component, {
"Cache-Control": "max-age=3600", // 1 hour
});