QR Code Generator

Generate simple QR codes with title and subtitle.

\n \n

\n \n \n

\n $\"Generated$ \n \n

\n \n \n

\n Built and maintained by Jan jzheng@groq.com. Source Code\n

\n \n \n \n

\n \n\n\n `;\n\n return c.html(html);\n});\n\napp.post(\"/qr\", async (c) => {\n try {\n const body = await c.req.parseBody();\n const title = Array.isArray(body.title) ? body.title[0] : body.title || '';\n const subtitle = Array.isArray(body.subtitle) ? body.subtitle[0] : body.subtitle || '';\n const qrText = Array.isArray(body.qrText) ? body.qrText[0] : body.qrText || '';\n const bgColor = Array.isArray(body.bgColor) ? body.bgColor[0] : body.bgColor || '#F3F3EE';\n const titleColor = Array.isArray(body.titleColor) ? body.titleColor[0] : body.titleColor || '#2D2F33';\n const subtitleColor = Array.isArray(body.subtitleColor) ? body.subtitleColor[0] : body.subtitleColor || '#666666';\n const qrColor = Array.isArray(body.qrColor) ? body.qrColor[0] : body.qrColor || '#000000';\n const qrBgColor = Array.isArray(body.qrBgColor) ? body.qrBgColor[0] : body.qrBgColor || '#FFFFFF';\n const logoFile = body.logo ? (Array.isArray(body.logo) ? body.logo[0] : body.logo) : null;\n\n if (!qrText) {\n return c.json({ error: \"QR code text is required\" }, 400);\n }\n\n // Convert logo file to base64 if present\n let logoData: string | null = null;\n if (logoFile && logoFile instanceof File) {\n const arrayBuffer = await logoFile.arrayBuffer();\n const buffer = new Uint8Array(arrayBuffer);\n const binaryString = Array.from(buffer).map((byte: number) => String.fromCharCode(byte)).join('');\n logoData = 'data:' + logoFile.type + ';base64,' + btoa(binaryString);\n console.log('Logo received as File');\n } else if (logoFile && typeof logoFile === 'string') {\n // Either a data URL or regular URL\n logoData = logoFile;\n console.log('Logo received as string:', logoFile.startsWith('http') ? 'URL' : 'data URL');\n } else {\n console.log('No logo received');\n }\n\n // Create a cache key based on the input parameters\n const cacheKey = `qr:${title}:${subtitle}:${qrText}:${bgColor}:${titleColor}:${subtitleColor}:${qrColor}:${qrBgColor}:${logoData ? 'logo' : 'nologo'}`;\n\n if (!body.nocache) {\n // Try to get the cached QR code from Val Town blob\n try {\n const cachedQR = await blob.get(cacheKey);\n if (cachedQR) {\n if (cachedQR instanceof Response && cachedQR.ok) {\n const imageBuffer = await cachedQR.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n return c.body(imageBuffer as any);\n } else if (cachedQR instanceof Uint8Array) {\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n return c.body(cachedQR.buffer as any);\n }\n }\n } catch (error) {\n console.error(\"Error fetching QR code from Val Town blob:\", error);\n }\n }\n\n // Generate QR code\n const qrCodeDataURL = await QRCode.toDataURL(qrText, {\n errorCorrectionLevel: 'H',\n margin: 1,\n width: 600,\n color: {\n dark: qrColor,\n light: qrBgColor,\n },\n });\n\n // Build children array - title, subtitle, QR code, and optionally logo\n const children: any[] = [];\n \n if (title) {\n children.push({\n type: 'div',\n props: {\n style: {\n fontSize: '48px',\n fontWeight: 400,\n lineHeight: '56px',\n color: titleColor,\n textAlign: 'center',\n fontFamily: 'Space Grotesk',\n marginBottom: '4px',\n },\n children: title,\n },\n });\n }\n\n if (subtitle) {\n children.push({\n type: 'div',\n props: {\n style: {\n fontSize: '24px',\n fontWeight: 400,\n lineHeight: '32px',\n color: subtitleColor,\n textAlign: 'center',\n fontFamily: 'Space Grotesk',\n marginBottom: '24px',\n },\n children: subtitle,\n },\n });\n }\n\n // QR code container with optional logo overlay\n children.push({\n type: 'div',\n props: {\n style: {\n position: 'relative',\n width: '600px',\n height: '600px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n children: [\n {\n type: 'img',\n props: {\n src: qrCodeDataURL,\n style: {\n width: '600px',\n height: '600px',\n objectFit: 'contain',\n borderRadius: '16px',\n },\n },\n },\n ...(logoData ? [{\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n width: '140px',\n height: '140px',\n borderRadius: '20px',\n backgroundColor: '#FFFFFF',\n padding: '16px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: '0 0 0 8px #FFFFFF',\n },\n children: [{\n type: 'img',\n props: {\n src: logoData,\n style: {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n },\n }],\n },\n }] : []),\n ],\n },\n });\n\n // Create simple vertical card with title, subtitle, QR code, and optional logo\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'flex-start',\n backgroundColor: bgColor,\n padding: '0',\n gap: '0',\n },\n children: children,\n },\n }, {\n width: 600,\n height: title || subtitle ? 750 : 600, // Taller when there's text\n fonts: [\n {\n name: \"Space Grotesk\",\n data: spaceGrotesk,\n weight: 400,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated QR code in Val Town blob\n try {\n if (pngBuffer.byteLength <= 10 * 128 * 1024) {\n await blob.set(cacheKey, pngBuffer as any);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(\"QR code too large to cache in Val Town blob\");\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching QR code in Val Town blob:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer as any);\n } catch (error) {\n console.error(\"Error generating QR code:\", error);\n return c.json({ error: \"Failed to generate QR code\" }, 500);\n }\n});\n\napp.get(\"/qr\", async (c) => {\n try {\n const { title, subtitle, qrText, bgColor, titleColor, subtitleColor, qrColor, qrBgColor, logo, nocache } = c.req.query();\n const bg = bgColor || '#F3F3EE';\n const titleCol = titleColor || '#2D2F33';\n const subtitleCol = subtitleColor || '#666666';\n const qrCol = qrColor || '#000000';\n const qrBgCol = qrBgColor || '#FFFFFF';\n const logoUrl = logo || null;\n\n if (!qrText) {\n return c.json({ error: \"QR code text is required\" }, 400);\n }\n\n // Create a cache key based on the input parameters\n const cacheKey = `qr:${title}:${subtitle}:${qrText}:${bg}:${titleCol}:${subtitleCol}:${qrCol}:${qrBgCol}:${logoUrl || 'nologo'}`;\n\n if (!nocache) {\n // Try to get the cached QR code from Val Town blob\n try {\n const cachedQR = await blob.get(cacheKey);\n if (cachedQR) {\n if (cachedQR instanceof Response && cachedQR.ok) {\n const imageBuffer = await cachedQR.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n return c.body(imageBuffer as any);\n } else if (cachedQR instanceof Uint8Array) {\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n return c.body(cachedQR.buffer as any);\n }\n }\n } catch (error) {\n console.error(\"Error fetching QR code from Val Town blob:\", error);\n }\n }\n\n // Generate QR code\n const qrCodeDataURL = await QRCode.toDataURL(qrText, {\n errorCorrectionLevel: 'H',\n margin: 1,\n width: 600,\n color: {\n dark: qrCol,\n light: qrBgCol,\n },\n });\n\n // Create simple vertical card with title, subtitle, and QR code (GET endpoint)\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'flex-start',\n backgroundColor: bg,\n padding: '0',\n gap: '0',\n },\n children: [\n ...(title ? [{\n type: 'div',\n props: {\n style: {\n fontSize: '48px',\n fontWeight: 400,\n lineHeight: '56px',\n color: titleCol,\n textAlign: 'center',\n fontFamily: 'Space Grotesk',\n marginBottom: '4px',\n },\n children: title,\n },\n }] : []),\n ...(subtitle ? [{\n type: 'div',\n props: {\n style: {\n fontSize: '24px',\n fontWeight: 400,\n lineHeight: '32px',\n color: subtitleCol,\n textAlign: 'center',\n fontFamily: 'Space Grotesk',\n marginBottom: '24px',\n },\n children: subtitle,\n },\n }] : []),\n {\n type: 'div',\n props: {\n style: {\n position: 'relative',\n width: '600px',\n height: '600px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n children: [\n {\n type: 'img',\n props: {\n src: qrCodeDataURL,\n style: {\n width: '600px',\n height: '600px',\n objectFit: 'contain',\n borderRadius: '16px',\n },\n },\n },\n ...(logoUrl ? [{\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n width: '140px',\n height: '140px',\n borderRadius: '20px',\n backgroundColor: '#FFFFFF',\n padding: '16px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxShadow: '0 0 0 8px #FFFFFF',\n },\n children: [{\n type: 'img',\n props: {\n src: logoUrl,\n style: {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n },\n }],\n },\n }] : []),\n ],\n },\n },\n ],\n },\n }, {\n width: 600,\n height: title || subtitle ? 750 : 600, // Taller when there's text\n fonts: [\n {\n name: \"Space Grotesk\",\n data: spaceGrotesk,\n weight: 400,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated QR code in Val Town blob\n try {\n if (pngBuffer.byteLength <= 10 * 128 * 1024) {\n await blob.set(cacheKey, pngBuffer as any);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(\"QR code too large to cache in Val Town blob\");\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching QR code in Val Town blob:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer as any);\n } catch (error) {\n console.error(\"Error generating QR code:\", error);\n return c.json({ error: \"Failed to generate QR code\" }, 500);\n }\n});\n\n// Export app.fetch for Val Town, otherwise export app — this is only for hono apps\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\") && Deno.env.get(\"mode\") !== \"local\")\n ? app.fetch\n : app;\n","deleted","label",[99],"permalink","https://www.val.town/x/yawnxyz/qr-groq/code/main.tsx","extension","actionData","errors"]