Merge pull request #31 from jycouet/feat/links-qrcode

Sharing links `qrcode`

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/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
+		}
+	}}
 >
 	<img
 		src={item.cardData.avatar}

src/lib/cards/EventCard/EventCard.svelte

···
 	import type { EventData } from '.';
 	import { parseUri } from '$lib/atproto';
 	import { browser } from '$app/environment';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item }: ContentComponentProps = $props();
 
···
 			class="absolute inset-0 h-full w-full"
 			target="_blank"
 			rel="noopener noreferrer"
+			use:qrOverlay={{
+				context: {
+					title: eventData?.name ?? ''
+				}
+			}}
 		>
 			<span class="sr-only">View event on smokesignal.events</span>
 		</a>

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

···
 <script lang="ts">
 	import { getDidContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import { getImage } from '$lib/helper';
 
 	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 { getImage } from '$lib/helper';
 	import { getDidContext, 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 { onMount } from 'svelte';
+
+	let {
+		url,
+		icon,
+		iconColor,
+		class: className = ''
+	}: {
+		url: string;
+		icon?: string;
+		iconColor?: string;
+		class?: string;
+	} = $props();
+
+	let container: HTMLDivElement | undefined = $state();
+
+	// Convert SVG string to data URI for use as QR center image
+	function svgToDataUri(svg: string, color: string): string {
+		// Add fill color to SVG - insert fill attribute on the svg tag
+		let coloredSvg = svg;
+		if (!svg.includes('fill=')) {
+			// No fill attribute, add it to the svg tag
+			coloredSvg = svg.replace('<svg', `<svg fill="${color}"`);
+		} else {
+			// Replace existing fill attributes
+			coloredSvg = svg.replace(/fill="[^"]*"/g, `fill="${color}"`);
+		}
+		const encoded = encodeURIComponent(coloredSvg);
+		return `data:image/svg+xml,${encoded}`;
+	}
+
+	onMount(async () => {
+		if (!container) return;
+
+		// Use iconColor or default accent, ensure # prefix
+		const rawColor = iconColor || 'f6339a';
+		const dotColor = rawColor.startsWith('#') ? rawColor : `#${rawColor}`;
+
+		const module = await import('qr-code-styling');
+		const QRCodeStyling = module.default;
+
+		// Get container size for responsive QR
+		const rect = container.getBoundingClientRect();
+		const size = Math.min(rect.width, rect.height) || 280;
+
+		const options: ConstructorParameters<typeof QRCodeStyling>[0] = {
+			width: size,
+			height: size,
+			data: url,
+			dotsOptions: {
+				color: dotColor,
+				type: 'rounded'
+			},
+			backgroundOptions: {
+				color: '#FFF'
+			},
+			cornersSquareOptions: {
+				type: 'extra-rounded',
+				color: dotColor
+			},
+			cornersDotOptions: {
+				type: 'dot',
+				color: dotColor
+			},
+			margin: 10
+		};
+
+		// Add icon as center image if provided (as SVG string)
+		if (icon) {
+			options.image = svgToDataUri(icon, dotColor);
+			options.imageOptions = {
+				margin: 10,
+				imageSize: 0.5
+			};
+		}
+
+		const qrCode = new QRCodeStyling(options);
+		qrCode.append(container);
+	});
+</script>
+
+<div bind:this={container} class="flex items-center justify-center {className}"></div>

src/lib/components/qr/QRCodeModal.svelte

···
+<script lang="ts">
+	import { Modal } from '@foxui/core';
+	import QRCodeDisplay from './QRCodeDisplay.svelte';
+
+	export type QRContext = {
+		title?: string;
+		icon?: string;
+		iconColor?: string;
+	};
+
+	let {
+		open = $bindable(false),
+		href,
+		context = {}
+	}: {
+		open: boolean;
+		href: string;
+		context?: QRContext;
+	} = $props();
+</script>
+
+<Modal bind:open closeButton={true} class="max-w-[90vw]! sm:max-w-sm! md:max-w-md!">
+	<div class="flex flex-col items-center justify-center gap-4 p-4">
+		{#if context.title}
+			<div class="text-base-900 dark:text-base-100 text-center text-xl font-semibold">
+				{context.title}
+			</div>
+		{/if}
+
+		<div class="flex items-center justify-center overflow-hidden rounded-2xl">
+			<QRCodeDisplay
+				url={href}
+				icon={context.icon}
+				iconColor={context.iconColor}
+				class="size-[min(70vw,320px)] sm:size-72 md:size-80"
+			/>
+		</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: HTMLElement,
+	params: { href?: string; context?: QRContext; disabled?: boolean } = {}
+) {
+	const LONG_PRESS_DURATION = 500;
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let isLongPress = false;
+
+	function getHref() {
+		return params.href || (node as HTMLAnchorElement).href || '';
+	}
+
+	function startLongPress() {
+		if (params.disabled) return;
+		isLongPress = false;
+		longPressTimer = setTimeout(() => {
+			isLongPress = true;
+			openModal?.(getHref(), 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?.(getHref(), 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: { href?: string; 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 { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let {
 		data,
···
 	const renderer = new marked.Renderer();
 	renderer.link = ({ href, title, text }) =>
 		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+
+	const profileUrl = $derived(`${page.url.origin}/${data.handle}`);
 </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}
+		<a
+			href={profileUrl}
+			class="w-fit"
+			use:qrOverlay={{
+				context: {
+					title: getName(data) + "'s blento"
+				}
+			}}
+		>
+			{#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}
+		</a>
 
 		<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} />