QR Encoder for fun

package.json

@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@lucide/svelte": "^0.561.0",
 		"@sanity/client": "^7.13.2",
+		"qr-code-styling": "^1.9.2",
 		"vercel": "^50.0.1"
 	}
 }

src/app.css

@@ -25,6 +25,7 @@
 	--color-ecsess-950: #031c15;
 
 	/* Black variants for UI elements */
+	--color-ecsess-white: #ffffff;
 	--color-ecsess-black: #1f1f1f;
 	--color-ecsess-black-hover: #161917;
 }

src/components/QRCode.svelte

@@ -0,0 +1,182 @@
+<script>
+	import QRCodeStyling from 'qr-code-styling';
+	import ECSESSLogo from '../assets/ECSESS.png';
+
+	let { data = '', downloadSize = 1000, size = 300 } = $props();
+	let qrCodeContainer = $state(/** @type {HTMLDivElement | null} */ (null));
+	let qrCodeInstance = $state(/** @type {QRCodeStyling | null} */ (null));
+	let debounceTimer = $state(/** @type {any} */ (null));
+	let lastData = $state('');
+
+	function updateQRCode() {
+		if (!qrCodeContainer) return;
+
+		const trimmedData = data.trim();
+
+		// Skip if data hasn't actually changed
+		if (trimmedData === lastData) return;
+
+		lastData = trimmedData;
+
+		// Clean up previous instance
+		if (qrCodeInstance) {
+			qrCodeContainer.innerHTML = '';
+			qrCodeInstance = null;
+		}
+
+		// Only create QR code if data is provided
+		if (trimmedData) {
+			// Create new QR code instance
+			const instance = new QRCodeStyling({
+				width: size,
+				height: size,
+				type: 'svg',
+				data: trimmedData,
+				margin: 0,
+				qrOptions: {
+					typeNumber: 0,
+					mode: 'Byte',
+					errorCorrectionLevel: 'M'
+				},
+				imageOptions: {
+					hideBackgroundDots: true,
+					imageSize: 0.4,
+					margin: 8,
+					crossOrigin: 'anonymous'
+				},
+				dotsOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'rounded',
+					gradient: {
+						type: 'radial',
+						colorStops: [
+							{
+								offset: 0,
+								color: '#8fb98a' // ecsess-300
+							},
+							{
+								offset: 1,
+								color: '#2d5a2d' // ecsess-700
+							}
+						]
+					}
+				},
+				backgroundOptions: {
+					color: '#ffffff' // ecsess-white
+				},
+				cornersSquareOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'extra-rounded'
+				},
+				cornersDotOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'dot'
+				},
+				image: ECSESSLogo
+			});
+
+			qrCodeInstance = instance;
+			instance.append(qrCodeContainer);
+		}
+	}
+
+	$effect(() => {
+		// Clear any pending debounce
+		if (debounceTimer !== null) {
+			clearTimeout(debounceTimer);
+		}
+
+		// Only update if container is available
+		if (qrCodeContainer) {
+			// Debounce updates for smooth typing experience
+			debounceTimer = setTimeout(() => {
+				updateQRCode();
+				debounceTimer = null;
+			}, 300);
+		}
+
+		// Cleanup function
+		return () => {
+			if (debounceTimer !== null) {
+				clearTimeout(debounceTimer);
+			}
+		};
+	});
+
+	export function download(format = 'png') {
+		if (!lastData || !lastData.trim() || !qrCodeInstance) return;
+
+		// Create a high-resolution version with extra margin for download
+		const marginSize = Math.floor(downloadSize * 0.04); // 4% margin
+
+		const downloadInstance = new QRCodeStyling({
+			width: downloadSize,
+			height: downloadSize,
+			type: 'svg',
+			data: lastData,
+			margin: marginSize, // Add extra padding/margin
+			qrOptions: {
+				typeNumber: 0,
+				mode: 'Byte',
+				errorCorrectionLevel: 'M'
+			},
+			imageOptions: {
+				hideBackgroundDots: true,
+				imageSize: 0.4,
+				margin: 8,
+				crossOrigin: 'anonymous'
+			},
+			dotsOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'rounded',
+				gradient: {
+					type: 'radial',
+					colorStops: [
+						{
+							offset: 0,
+							color: '#8fb98a' // ecsess-300
+						},
+						{
+							offset: 1,
+							color: '#2d5a2d' // ecsess-700
+						}
+					]
+				}
+			},
+			backgroundOptions: {
+				color: '#ffffff' // ecsess-white
+			},
+			cornersSquareOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'extra-rounded'
+			},
+			cornersDotOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'dot'
+			},
+			image: ECSESSLogo
+		});
+
+		// Create a temporary container for the high-res QR code
+		const tempContainer = document.createElement('div');
+		tempContainer.style.width = `${downloadSize + marginSize}px`;
+		tempContainer.style.height = `${downloadSize + marginSize}px`;
+		tempContainer.style.position = 'absolute';
+		tempContainer.style.left = '-9999px';
+		document.body.appendChild(tempContainer);
+
+		downloadInstance.append(tempContainer);
+
+		// Wait for the QR code to render, then download
+		setTimeout(() => {
+			downloadInstance.download({
+				name: 'qrcode',
+				extension: /** @type {'png' | 'svg' | 'jpeg' | 'webp'} */ (format)
+			});
+			// Clean up temporary container
+			document.body.removeChild(tempContainer);
+		}, 100);
+	}
+</script>
+
+<div bind:this={qrCodeContainer} class="max-h-sm flex max-w-sm items-center justify-center"></div>

src/routes/council/+page.server.ts

@@ -19,7 +19,11 @@ const councilQuery = `{
 }`;
 
 export const load = async ({ url }) => {
-	const { members, councilGoofyPic }: { members: CouncilMember[], councilGoofyPic: { url: string } } = await getFromCMS(councilQuery);
+	const {
+		members,
+		councilGoofyPic
+	}: { members: CouncilMember[]; councilGoofyPic: { url: string } } =
+		await getFromCMS(councilQuery);
 
 	return {
 		members: members,

src/routes/internal/qrcode/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+	import QRCode from 'components/QRCode.svelte';
+	import Button from 'components/Button.svelte';
+	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
+	import Section from 'components/layout/Section.svelte';
+
+	let inputText = $state('');
+	let qrCodeRef = $state(/** @type {any} */ (null));
+
+	function handleExport() {
+		if (qrCodeRef) {
+			qrCodeRef.download('png');
+		}
+	}
+</script>
+
+<SeoMetaTags title="QR Code Generator - ECSESS" />
+
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
+	<p class="page-title">ECSESS QR Code Generator</p>
+
+	<div class="mx-auto flex w-full max-w-4xl flex-col gap-6">
+		<!-- Input Section -->
+		<div class="flex flex-col gap-4">
+			<label for="qr-input" class="text-ecsess-100 text-lg font-semibold">
+				Enter text or URL:
+			</label>
+			<input
+				id="qr-input"
+				type="text"
+				bind:value={inputText}
+				placeholder="Enter text or URL to encode..."
+				class="border-ecsess-400 text-ecsess-900 placeholder:text-ecsess-400 focus:border-ecsess-500 focus:ring-ecsess-500/20 w-full rounded-md border-2 bg-white px-4 py-3 focus:ring-2 focus:outline-none"
+			/>
+		</div>
+
+		<!-- Preview Section -->
+		{#if inputText}
+			<div class="flex flex-col items-center gap-4">
+				<h2 class="text-ecsess-100 text-xl font-bold">Preview</h2>
+				<div class="flex justify-center rounded-lg bg-white p-2 shadow-lg md:p-4">
+					<div class="mx-auto max-h-75 w-full max-w-75">
+						<QRCode bind:this={qrCodeRef} data={inputText} size={300} downloadSize={1000} />
+					</div>
+				</div>
+				<Button onclick={handleExport}>
+					<span>Download QR Code as PNG</span>
+				</Button>
+				<span>1000x1000px</span>
+			</div>
+		{:else}
+			<div class="flex items-center justify-center">
+				<p class="text-ecsess-200 text-center">Enter text or URL above to generate a QR code</p>
+			</div>
+		{/if}
+	</div>
+</Section>