v0

package.json

···
 		"mapbox-gl": "^3.18.1",
 		"marked": "^17.0.1",
 		"plyr": "^3.8.4",
+		"qr-code-styling": "^1.8.6",
 		"simple-icons": "^16.6.0",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",

pnpm-lock.yaml

···
       plyr:
         specifier: ^3.8.4
         version: 3.8.4
+      qr-code-styling:
+        specifier: ^1.8.6
+        version: 1.9.2
       simple-icons:
         specifier: ^16.6.0
         version: 16.6.0
···
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
+
+  qr-code-styling@1.9.2:
+    resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
+    engines: {node: '>=18.18.0'}
+
+  qrcode-generator@1.5.2:
+    resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
 
   quickselect@3.0.0:
     resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
···
   punycode.js@2.3.1: {}
 
   punycode@2.3.1: {}
+
+  qr-code-styling@1.9.2:
+    dependencies:
+      qrcode-generator: 1.5.2
+
+  qrcode-generator@1.5.2: {}
 
   quickselect@3.0.0: {}
 

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 
 	const cardDef = $derived(CardDefinitionsByType[item.cardType]);
 
-	const minW = $derived(cardDef.minW ?? (isMobile() ? 2 : 2));
-	const minH = $derived(cardDef.minH ?? (isMobile() ? 2 : 2));
+	const minW = $derived(cardDef?.minW ?? (isMobile() ? 2 : 2));
+	const minH = $derived(cardDef?.minH ?? (isMobile() ? 2 : 2));
 
-	const maxW = $derived(cardDef.maxW ?? COLUMNS);
-	const maxH = $derived(cardDef.maxH ?? (isMobile() ? 12 : 6));
+	const maxW = $derived(cardDef?.maxW ?? COLUMNS);
+	const maxH = $derived(cardDef?.maxH ?? (isMobile() ? 12 : 6));
 
 	// Resize handle state
 	let isResizing = $state(false);

src/lib/cards/BigSocialCard/BigSocialCard.svelte

···
 <script lang="ts">
 	import { platformsData } from '.';
 	import type { ContentComponentProps } from '../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item, isEditing }: ContentComponentProps = $props();
 
 	const platform = $derived(item.cardData.platform as string);
+	const platformData = $derived(platformsData[platform]);
 </script>
 
 <div
···
 	<div
 		class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"
 	>
-		{@html platformsData[platform].svg}
+		{@html platformData?.svg}
 	</div>
 </div>
 
 {#if !isEditing}
-	<a href={item.cardData.href} target="_blank" rel="noopener noreferrer">
+	<a
+		href={item.cardData.href}
+		target="_blank"
+		rel="noopener noreferrer"
+		use:qrOverlay={{
+			context: {
+				title: platformData?.title,
+				icon: platformData?.svg,
+				iconColor: platformData?.hex
+			}
+		}}
+	>
 		<div class="absolute inset-0 z-50"></div>
-		<span class="sr-only">open {platformsData[platform].title}</span>
+		<span class="sr-only">open {platformData?.title}</span>
 	</a>
 {/if}

src/lib/cards/BlueskyProfileCard/BlueskyProfileCard.svelte

···
 <script lang="ts">
-	import type { Item } from '$lib/types';
+	import type { ContentComponentProps } from '../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
-	let { item }: { item: Item } = $props();
+	let { item, isEditing }: ContentComponentProps = $props();
+
+	const profileUrl = $derived(`https://bsky.app/profile/${item.cardData.handle}`);
 </script>
 
 <a
 	target="_blank"
-	href="/{item.cardData.handle}"
+	href={profileUrl}
 	class="flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
+	use:qrOverlay={{
+		disabled: isEditing,
+		context: {
+			title: item.cardData.displayName || item.cardData.handle,
+			avatar: item.cardData.avatar
+		}
+	}}
 >
 	<img
 		src={item.cardData.avatar}

src/lib/cards/GitHubProfileCard/GitHubProfileCard.svelte

···
 	import GithubContributionsGraph from './GithubContributionsGraph.svelte';
 	import { Button } from '@foxui/core';
 	import { browser } from '$app/environment';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+
+	let { item, isEditing }: ContentComponentProps = $props();
 
-	let { item }: ContentComponentProps = $props();
+	const githubUrl = $derived(`https://github.com/${item.cardData.user}`);
 
 	const data = getAdditionalUserData();
 
···
 	</div>
 </div>
 
-{#if item.cardData.href}
+{#if (item.cardData.href || item.cardData.user) && !isEditing}
 	<a
-		href={item.cardData.href}
+		href={item.cardData.href || githubUrl}
 		class="absolute inset-0 h-full w-full"
 		target="_blank"
 		rel="noopener noreferrer"
+		use:qrOverlay={{
+			context: {
+				title: item.cardData.user,
+				icon: siGithub.svg,
+				iconColor: siGithub.hex
+			}
+		}}
 	>
-		<span class="sr-only"> Show on github </span>
+		<span class="sr-only">Show on github</span>
 	</a>
 {/if}

src/lib/cards/ImageCard/ImageCard.svelte

···
 	import { getDidContext } from '$lib/website/context';
 	import { getImageBlobUrl } from '$lib/atproto';
 	import type { ContentComponentProps } from '../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 
···
 		class="absolute inset-0 z-50 h-full w-full"
 		target="_blank"
 		rel="noopener noreferrer"
+		use:qrOverlay={{ context: { title: item.cardData.hrefText ?? 'Learn more' } }}
 	>
 		<span class="sr-only">
 			{item.cardData.hrefText ?? 'Learn more'}

src/lib/cards/LinkCard/LinkCard.svelte

···
 	import { browser } from '$app/environment';
 	import { getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
-	let { item }: ContentComponentProps = $props();
+	let { item, isEditing }: ContentComponentProps = $props();
 
 	let isMobile = getIsMobile();
 
···
 			alt=""
 		/>
 	{/if}
-	{#if item.cardData.href}
+	{#if item.cardData.href && !isEditing}
 		<a
 			href={item.cardData.href}
 			class="absolute inset-0 h-full w-full"
 			target="_blank"
 			rel="noopener noreferrer"
+			use:qrOverlay={{
+				context: {
+					title: item.cardData.title,
+					favicon: item.cardData.favicon
+				}
+			}}
 		>
 			<span class="sr-only">
 				{item.cardData.hrefText ?? 'Learn more'}

src/lib/cards/MapCard/MapCard.svelte

···
 <script lang="ts">
 	import type { ContentComponentProps } from '../types';
 	import Map from './Map.svelte';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
+
+	const mapsUrl = $derived(
+		'https://maps.google.com/maps?q=' +
+			encodeURIComponent(item.cardData.lat + ',' + item.cardData.lon)
+	);
 </script>
 
 <Map bind:item />
···
 	<a
 		target="_blank"
 		rel="noopener noreferrer"
-		href={'http://maps.google.com/maps?q=' +
-			encodeURIComponent(item.cardData.lat + ',' + item.cardData.lon)}
+		href={mapsUrl}
+		use:qrOverlay={{ context: { title: 'Google Maps' } }}
 	>
 		<div class="absolute inset-0 z-100"></div>
 		<span class="sr-only">open map</span>

src/lib/components/qr/QRCodeDisplay.svelte

···
+<script lang="ts">
+	import { browser } from '$app/environment';
+
+	let { url, size = 280, logo }: { url: string; size?: number; logo?: string } = $props();
+
+	let container: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!browser || !container) return;
+
+		const render = async () => {
+			const QRCodeStylingModule = await import('qr-code-styling');
+			const QRCodeStyling = QRCodeStylingModule.default;
+
+			container!.innerHTML = '';
+
+			const options: ConstructorParameters<typeof QRCodeStyling>[0] = {
+				width: size,
+				height: size,
+				data: url,
+				dotsOptions: {
+					color: '#000',
+					type: 'rounded'
+				},
+				backgroundOptions: {
+					color: '#fff'
+				},
+				cornersSquareOptions: {
+					type: 'extra-rounded'
+				},
+				cornersDotOptions: {
+					type: 'dot'
+				}
+			};
+
+			if (logo) {
+				options.image = logo;
+				options.imageOptions = {
+					crossOrigin: 'anonymous',
+					margin: 4
+				};
+			}
+
+			const qrCode = new QRCodeStyling(options);
+			qrCode.append(container!);
+		};
+
+		render();
+	});
+</script>
+
+<div bind:this={container} class="flex items-center justify-center"></div>

src/lib/components/qr/QRCodeModal.svelte

···
+<script lang="ts">
+	import { Modal, Button, toast } from '@foxui/core';
+	import QRCodeDisplay from './QRCodeDisplay.svelte';
+
+	export type QRContext = {
+		title?: string;
+		icon?: string;
+		iconColor?: string;
+		favicon?: string;
+		avatar?: string;
+	};
+
+	let {
+		open = $bindable(false),
+		href,
+		context = {}
+	}: {
+		open: boolean;
+		href: string;
+		context?: QRContext;
+	} = $props();
+
+	async function copyUrl() {
+		try {
+			await navigator.clipboard.writeText(href);
+			toast.success('URL copied!');
+		} catch {
+			toast.error('Failed to copy');
+		}
+	}
+
+	const logoUrl = $derived(context.avatar || context.favicon);
+</script>
+
+<Modal bind:open closeButton={true} class="max-w-sm">
+	<div class="flex flex-col items-center gap-4 p-2">
+		{#if context.icon}
+			<div
+				class="flex size-14 items-center justify-center rounded-2xl [&_svg]:size-8 [&_svg]:fill-white"
+				style:background-color={context.iconColor ? `#${context.iconColor}` : '#000'}
+			>
+				{@html context.icon}
+			</div>
+		{:else if context.avatar}
+			<img src={context.avatar} alt="" class="size-14 rounded-full object-cover" />
+		{:else if context.favicon}
+			<img src={context.favicon} alt="" class="size-10 rounded-lg object-cover" />
+		{/if}
+
+		{#if context.title}
+			<div class="text-base-900 dark:text-base-100 text-lg font-semibold">
+				{context.title}
+			</div>
+		{/if}
+
+		<div class="overflow-hidden rounded-2xl">
+			<QRCodeDisplay url={href} size={280} logo={logoUrl} />
+		</div>
+
+		<div class="flex w-full items-center gap-2">
+			<div
+				class="bg-base-100 dark:bg-base-800 text-base-600 dark:text-base-400 flex-1 truncate rounded-lg px-3 py-2 text-sm"
+			>
+				{href}
+			</div>
+			<Button onclick={copyUrl} variant="ghost" size="sm">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-4"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+					/>
+				</svg>
+			</Button>
+		</div>
+	</div>
+</Modal>

src/lib/components/qr/QRModalProvider.svelte

···
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import QRCodeModal, { type QRContext } from './QRCodeModal.svelte';
+	import { registerQRModal, unregisterQRModal } from './qrOverlay.svelte';
+
+	let open = $state(false);
+	let href = $state('');
+	let context = $state<QRContext>({});
+
+	function showModal(newHref: string, newContext: QRContext) {
+		href = newHref;
+		context = newContext;
+		open = true;
+	}
+
+	onMount(() => {
+		registerQRModal(showModal);
+	});
+
+	onDestroy(() => {
+		unregisterQRModal();
+	});
+</script>
+
+<QRCodeModal bind:open {href} {context} />

src/lib/components/qr/qrOverlay.svelte.ts

···
+import type { QRContext } from './QRCodeModal.svelte';
+
+// Global state for QR modal
+let openModal: ((href: string, context: QRContext) => void) | null = null;
+
+export function registerQRModal(fn: (href: string, context: QRContext) => void) {
+	openModal = fn;
+}
+
+export function unregisterQRModal() {
+	openModal = null;
+}
+
+export function qrOverlay(
+	node: HTMLAnchorElement,
+	params: { context?: QRContext; disabled?: boolean } = {}
+) {
+	const LONG_PRESS_DURATION = 500;
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let isLongPress = false;
+
+	function startLongPress() {
+		if (params.disabled) return;
+		isLongPress = false;
+		longPressTimer = setTimeout(() => {
+			isLongPress = true;
+			openModal?.(node.href, params.context ?? {});
+		}, LONG_PRESS_DURATION);
+	}
+
+	function cancelLongPress() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function handleClick(e: MouseEvent) {
+		if (isLongPress) {
+			e.preventDefault();
+			isLongPress = false;
+		}
+	}
+
+	function handleContextMenu(e: MouseEvent) {
+		if (params.disabled) return;
+		e.preventDefault();
+		openModal?.(node.href, params.context ?? {});
+	}
+
+	node.addEventListener('pointerdown', startLongPress);
+	node.addEventListener('pointerup', cancelLongPress);
+	node.addEventListener('pointercancel', cancelLongPress);
+	node.addEventListener('pointerleave', cancelLongPress);
+	node.addEventListener('click', handleClick);
+	node.addEventListener('contextmenu', handleContextMenu);
+
+	return {
+		update(newParams: { context?: QRContext; disabled?: boolean }) {
+			params = newParams;
+		},
+		destroy() {
+			node.removeEventListener('pointerdown', startLongPress);
+			node.removeEventListener('pointerup', cancelLongPress);
+			node.removeEventListener('pointercancel', cancelLongPress);
+			node.removeEventListener('pointerleave', cancelLongPress);
+			node.removeEventListener('click', handleClick);
+			node.removeEventListener('contextmenu', handleContextMenu);
+			cancelLongPress();
+		}
+	};
+}

src/lib/website/Profile.svelte

···
 	import { getDescription, getName } from '$lib/helper';
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
+	import QRCodeModal from '$lib/components/qr/QRCodeModal.svelte';
 
 	let {
 		data,
···
 	const renderer = new marked.Renderer();
 	renderer.link = ({ href, title, text }) =>
 		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+
+	let qrOpen = $state(false);
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const profileUrl = $derived(`${page.url}/${data.handle}`);
+
+	function startLongPress() {
+		longPressTimer = setTimeout(() => {
+			qrOpen = true;
+		}, 500);
+	}
+
+	function cancelLongPress() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function handleContextMenu(e: MouseEvent) {
+		e.preventDefault();
+		qrOpen = true;
+	}
 </script>
 
 <!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
···
 	class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
 >
 	<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
-		{#if data.profile.avatar}
-			<img
-				class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
-				src={data.profile.avatar}
-				alt=""
-			/>
-		{:else}
-			<div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
-		{/if}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="w-fit cursor-pointer"
+			onpointerdown={startLongPress}
+			onpointerup={cancelLongPress}
+			onpointercancel={cancelLongPress}
+			onpointerleave={cancelLongPress}
+			oncontextmenu={handleContextMenu}
+		>
+			{#if data.profile.avatar}
+				<img
+					class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
+					src={data.profile.avatar}
+					alt=""
+				/>
+			{:else}
+				<div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
+			{/if}
+		</div>
+		<QRCodeModal
+			bind:open={qrOpen}
+			href={profileUrl}
+			context={{
+				title: getName(data),
+				avatar: data.profile.avatar
+			}}
+		/>
 
 		<div class="text-4xl font-bold wrap-anywhere">
 			{getName(data)}

src/lib/website/Website.svelte

···
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
 	import type { Did, Handle } from '@atcute/lexicons';
+	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 />
 
 <Context {data}>
+	<QRModalProvider />
 	<div class="@container/wrapper relative w-full">
 		{#if !getHideProfileSection(data)}
 			<Profile {data} showEditButton={true} />