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
import { blob } from "https://esm.town/v/std/blob?v=11";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
import QRCode from "npm:qrcode";
export const generateQrCode = async (
req: Request,
): Promise<Response> => {
// A visit from a web browser? Serve a HTML page with a form
if (req.method === "GET") {
return html(`
<!DOCTYPE html>
<html>
<head>
<title>QR code generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="flex flex-col min-h-screen">
<div class="flex-grow flex flex-col items-center justify-center gap-4 p-4">
<h1 class="text-3xl font-bold text-center">QR Code Generator</h1>
<div class="w-full max-w-md">
<form action="/" method="post" class="flex flex-col sm:flex-row items-center gap-2">
<input
class="flex-grow h-12 w-full rounded-md border border-gray-300 px-3 py-2 text-base placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
type="text"
id="source-url"
name="source-url"
placeholder="Enter URL"
required>
<input
class="w-full sm:w-auto h-12 px-4 py-2 rounded-md text-base font-medium bg-black text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
type="submit"
value="Generate">
</form>
</div>
</div>
<footer class="bg-gray-800 text-white py-4 mt-52">
<div class="text-center">
A val made during <a href="https://itp.nyu.edu/camp/2024/">ITP Camp 2024</a> by <a href="https://www.ashryan.io">ashryan.io</a>
</div>
<div class="text-center mt-2">
<a href="https://www.val.town/v/ashryanio/generateQrCode">Enjoy the source code on Val Town</a>
</div>
</footer>
</body>
</html>
`);
}
if (req.method === "POST") {
// Otherwise, someone has submitted a form so let's handle that
const formData = await req.formData();
const sourceUrl = formData.get("source-url").toString();
const qrCodeBuffer = await QRCode.toBuffer(sourceUrl);
return new Response(qrCodeBuffer);
}
// Otherwise, something has gone wrong
return new Response("Something went wrong", { status: 500 });
};