jxnblk-valtownbadgesvg.web.val.run
Readme

SVG Val Town badge image service

Fork it on ValTown

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
/** @jsxImportSource npm:react */
import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";
import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";
import { renderToStaticMarkup } from "npm:react-dom/server";
const width = 160;
const height = 48;
const rounded = 8;
const padLeft = 48;
export function Badge({
scale = 1,
label = "View source on",
}: {
label?: string;
scale?: number;
}) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width * scale}
height={height * scale}
viewBox={`0 0 ${width} ${height}`}
>
<rect
width={width}
height={height}
fill="#111"
rx={rounded}
ry={rounded}
/>
<circle
fill="#fff"
r={16}
cx={24}
cy={24}
/>
<CodeIcon
width={20}
height={20}
x={14}
y={14}
stroke="#000"
/>
<text
x={padLeft}
y="16"
textAnchor="start"
fill="#fff"
style={{
fontFamily: "system-ui, sans-serif",
fontWeight: "bold",
fontSize: "10px",
}}
>
{label}
</text>
<Logo
x={padLeft}
y="6"
width="96"
fill="#fff"
/>
</svg>
);
}
export default async function(req: Request): Promise<Response> {
const svg = renderToStaticMarkup(
<Badge scale={1} />,
);
return new Response(svg, {
headers: {
"content-type": "image/svg+xml",
},
});
}
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!
v57
May 22, 2024