added api for shortener qr code

frontend/package.json

@@ -15,9 +15,10 @@
     "@sveltejs/adapter-node": "^2.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/qrcode": "^1.5.5",
     "autoprefixer": "^10.4.14",
     "bun-types": "^1.0.11",
-    "drizzle-kit": "^0.20.1",
+    "drizzle-kit": "latest",
     "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
     "prettier": "^3.1.0",
@@ -44,7 +45,9 @@
     "mode-watcher": "^0.1.2",
     "nanoid": "^5.0.3",
     "node-html-parser": "^6.1.12",
+    "pg": "^8.11.3",
     "postgres": "^3.4.3",
+    "qrcode": "^1.5.3",
     "qrious": "^4.0.2",
     "svelte-sonner": "^0.3.10",
     "tailwind-merge": "^2.0.0",

frontend/src/lib/components/QR.svelte

@@ -13,6 +13,7 @@
 	export let value = ''
 	export let padding = 10
 	export let className = 'qrcode'
+	export let code = ''
 
 	let image = ''
 
@@ -66,4 +67,11 @@
 </script>
 
 <img src={image} alt={value} class={className} />
-<Button on:click={copyImageToClipboard}>Copy Image</Button>
+<div class="flex w-full gap-4">
+	<Button class="w-full" on:click={copyImageToClipboard}
+		>Copy Image</Button>
+	<Button
+		class="w-full"
+		href={`/api/shortener/${code}/qr`}
+		target="_blank">QR Link</Button>
+</div>

frontend/src/routes/(app)/links/+page.svelte

@@ -281,6 +281,7 @@
 				{data.shortener_url + '/' + qrCode}
 			</Badge>
 			<Qr
+				code={qrCode}
 				value={data.shortener_url + '/' + qrCode}
 				background={data.settings?.qr_background || '#fff'}
 				color={data.settings?.qr_foreground || '#000'} />

frontend/src/routes/api/shortener/[id]/qr/+server.ts

@@ -0,0 +1,18 @@
+import type { RequestHandler } from './$types'
+import QRCode from 'qrcode'
+
+const shortenerUrl = Bun.env.PUBLIC_SHORTENER_URL ?? 'shortener.url'
+
+export const GET: RequestHandler = async (event) => {
+	const shortenerId = event.params.id
+	const image = await QRCode.toBuffer(
+		shortenerUrl + '/' + shortenerId,
+		{ type: 'png', errorCorrectionLevel: 'L', margin: 1, scale: 20 },
+	)
+
+	return new Response(image, {
+		headers: {
+			'Content-Type': 'image/png',
+		},
+	})
+}