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
import { socialImageUsageCSS } from "https://esm.town/v/tylergaw/socialImageUsageCSS";
export const socialImageUsage = () => {
const img =
"https://tylergaw-socialimage.web.val.run/?bg=%23a2fa00&text=Building%20an%20Image%20Generator%20with%20Val%20Town";
const html = `
<html>
<meta property="og:image" content="${img}">
<meta name="twitter:image" content="${img}">
<meta name="twitter:card" content="summary_large_image">
<title>Val Town: Image generator example usage</title>
<style>${socialImageUsageCSS}</style>
<body>
<h1>Image generator Example</h1>
<p>See <a href="https://www.val.town/v/tylergaw.socialImage">https://www.val.town/v/tylergaw.socialImage</a></p>
<ul>
<li><img src="https://tylergaw-socialimage.web.val.run/?bg=%23fa2500&text=Smol&color=white&w=500&h=300"></li>
<li><img src="https://tylergaw-socialimage.web.val.run/?bg=%23f6fa00&text=square&w=600&h=600"></li>
</ul>
</body>
</html>
`;
return new Response(html, {
headers: {
"Content-Type": "text/html",
},
});
};