Merge pull request #39 from flo-bit/vcard

Vcard

src/lib/cards/VCardCard/VCardCard.svelte

···
+<script lang="ts">
+	import { Modal } from '@foxui/core';
+	import QRCodeDisplay from '$lib/components/qr/QRCodeDisplay.svelte';
+	import type { ContentComponentProps } from '../types';
+	import { parseVCardName, parseVCardOrg } from '.';
+
+	let { item }: ContentComponentProps = $props();
+
+	let showQR = $state(false);
+
+	let displayName = $derived(
+		item.cardData.displayName || parseVCardName(item.cardData.vcard || '') || 'Contact'
+	);
+	let org = $derived(parseVCardOrg(item.cardData.vcard || ''));
+</script>
+
+<button
+	class="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-3"
+	onclick={() => (showQR = true)}
+	><div
+		class="text-base-500 dark:text-base-400 accent:text-base-700 text-[12px] font-medium tracking-wide uppercase"
+	>
+		vCard
+	</div>
+	<!-- Identification Card icon (Heroicons) -->
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="text-base-700 dark:text-base-300 accent:text-base-900 size-10"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
+		/>
+	</svg>
+
+	<div class="text-center">
+		<div class="text-base-900 dark:text-base-100 accent:text-base-900 text-sm font-semibold">
+			{displayName}
+		</div>
+		{#if org}
+			<div class="text-base-600 dark:text-base-400 accent:text-base-800 text-xs">
+				{org}
+			</div>
+		{/if}
+	</div>
+</button>
+
+<Modal bind:open={showQR} 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">
+		<div class="text-base-900 dark:text-base-100 text-center text-2xl font-semibold">
+			{displayName}
+		</div>
+
+		<div class="flex items-center justify-center overflow-hidden rounded-2xl">
+			<QRCodeDisplay
+				url={item.cardData.vcard || ''}
+				class="size-[min(70vw,320px)] sm:size-72 md:size-80"
+			/>
+		</div>
+
+		<p class="text-base-600 dark:text-base-400 text-center text-sm">
+			Scan to add contact to your phone
+		</p>
+	</div>
+</Modal>

src/lib/cards/VCardCard/VCardCardSettings.svelte

···
+<script lang="ts">
+	import { Alert, Button, Subheading } from '@foxui/core';
+	import type { SettingsComponentProps } from '../types';
+	import { parseVCard, generateVCard, parseVCardName, emptyVCardFields, type VCardFields } from '.';
+
+	let { item = $bindable(), onclose }: SettingsComponentProps = $props();
+
+	let mode: 'easy' | 'expert' = $state('easy');
+	let fields: VCardFields = $state(
+		parseVCard(item.cardData.vcard || '') || { ...emptyVCardFields }
+	);
+
+	function syncFromFields() {
+		item.cardData.vcard = generateVCard(fields);
+		item.cardData.displayName = parseVCardName(item.cardData.vcard);
+	}
+
+	function handleTextarea(e: Event) {
+		const text = (e.target as HTMLTextAreaElement).value;
+		item.cardData.vcard = text;
+		item.cardData.displayName = parseVCardName(text);
+		fields = parseVCard(text);
+	}
+</script>
+
+<div class="flex w-72 flex-col gap-3 p-2">
+	<Subheading>Edit vCard</Subheading>
+
+	<Alert type="info" title="Privacy">
+		<p class="text-xs">All data is public, be aware.</p>
+	</Alert>
+
+	<div class="flex items-center gap-2 text-xs">
+		<button
+			class={[
+				'rounded px-2 py-1',
+				mode === 'easy' ? 'bg-accent-500 text-white' : 'bg-base-200 dark:bg-base-700'
+			]}
+			onclick={() => (mode = 'easy')}
+		>
+			Easy
+		</button>
+		<button
+			class={[
+				'rounded px-2 py-1',
+				mode === 'expert' ? 'bg-accent-500 text-white' : 'bg-base-200 dark:bg-base-700'
+			]}
+			onclick={() => (mode = 'expert')}
+		>
+			Expert
+		</button>
+		<a
+			href="https://wikipedia.org/wiki/VCard"
+			target="_blank"
+			class="text-accent-600 dark:text-accent-400 underline">Learn about the vCard format</a
+		>
+	</div>
+
+	{#if mode === 'easy'}
+		<div class="flex flex-col gap-1 text-xs">
+			<div class="grid grid-cols-2 gap-1">
+				<input
+					bind:value={fields.firstName}
+					oninput={syncFromFields}
+					placeholder="First name"
+					class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+				/>
+				<input
+					bind:value={fields.lastName}
+					oninput={syncFromFields}
+					placeholder="Last name"
+					class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+				/>
+			</div>
+			<input
+				bind:value={fields.org}
+				oninput={syncFromFields}
+				placeholder="Organization"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.title}
+				oninput={syncFromFields}
+				placeholder="Job title"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.email}
+				oninput={syncFromFields}
+				placeholder="Email"
+				type="email"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.bday}
+				oninput={syncFromFields}
+				placeholder="Birthday"
+				type="date"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.website}
+				oninput={syncFromFields}
+				placeholder="Website"
+				type="url"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.address}
+				oninput={syncFromFields}
+				placeholder="Address"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+		</div>
+	{:else}
+		<textarea
+			class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 h-40 w-full resize-none rounded border p-2 font-mono text-xs focus:outline-none"
+			value={item.cardData.vcard || ''}
+			oninput={handleTextarea}
+			placeholder="BEGIN:VCARD
+VERSION:4.0
+FN:John Doe
+END:VCARD"
+		></textarea>
+	{/if}
+
+	<Button onclick={onclose} size="sm">Done</Button>
+</div>

src/lib/cards/VCardCard/index.ts

···
+import { user } from '$lib/atproto/auth.svelte';
+import type { CardDefinition } from '../types';
+import VCardCard from './VCardCard.svelte';
+import VCardCardSettings from './VCardCardSettings.svelte';
+
+// vCard spec: https://wikipedia.org/wiki/VCard
+
+export type VCardFields = {
+	firstName: string;
+	lastName: string;
+	org: string;
+	title: string;
+	email: string;
+	bday: string; // YYYY-MM-DD for input, stored as YYYYMMDD
+	website: string;
+	address: string;
+	note: string;
+};
+
+export const emptyVCardFields: VCardFields = {
+	firstName: '',
+	lastName: '',
+	org: '',
+	title: '',
+	email: '',
+	bday: '',
+	website: '',
+	address: '',
+	note: ''
+};
+
+// Convert YYYY-MM-DD to YYYYMMDD for vCard
+export function formatBdayToVCard(date: string): string {
+	return date.replace(/-/g, '');
+}
+
+// Convert YYYYMMDD to YYYY-MM-DD for input
+export function formatBdayFromVCard(bday: string): string {
+	if (bday.length === 8) {
+		return `${bday.slice(0, 4)}-${bday.slice(4, 6)}-${bday.slice(6, 8)}`;
+	}
+	return bday;
+}
+
+// Generate vCard v4 string from fields
+export function generateVCard(f: VCardFields): string {
+	const lines = ['BEGIN:VCARD', 'VERSION:4.0'];
+	const fn = `${f.firstName} ${f.lastName}`.trim();
+	if (fn) lines.push(`FN:${fn}`);
+	if (f.lastName || f.firstName) lines.push(`N:${f.lastName};${f.firstName};;;`);
+	if (f.org) lines.push(`ORG:${f.org}`);
+	if (f.title) lines.push(`TITLE:${f.title}`);
+	if (f.email) lines.push(`EMAIL:${f.email}`);
+	if (f.bday) lines.push(`BDAY:${formatBdayToVCard(f.bday)}`);
+	if (f.website) lines.push(`URL:${f.website}`);
+	if (f.address) lines.push(`ADR:;;${f.address};;;;`);
+	if (f.note) lines.push(`NOTE:${f.note}`);
+	lines.push('END:VCARD');
+	return lines.join('\n');
+}
+
+// Parse vCard string to fields (supports v3 & v4)
+export function parseVCard(vcard: string): VCardFields {
+	const get = (key: string) => {
+		const m = vcard.match(new RegExp(`^${key}[;:](.*)$`, 'im'));
+		return m?.[1]?.trim() || '';
+	};
+
+	const n = get('N').split(';');
+	let lastName = n[0] || '';
+	let firstName = n[1] || '';
+
+	if (!lastName && !firstName) {
+		const fn = get('FN').split(' ');
+		firstName = fn[0] || '';
+		lastName = fn.slice(1).join(' ') || '';
+	}
+
+	const adr = get('ADR').split(';');
+
+	return {
+		firstName,
+		lastName,
+		org: get('ORG').split(';')[0],
+		title: get('TITLE'),
+		email: get('EMAIL'),
+		bday: formatBdayFromVCard(get('BDAY')),
+		website: get('URL'),
+		address: adr[2] || '',
+		note: get('NOTE')
+	};
+}
+
+// Parse FN (formatted name) or N from vCard
+export function parseVCardName(vcard: string): string {
+	const f = parseVCard(vcard);
+	return `${f.firstName} ${f.lastName}`.trim();
+}
+
+// Parse ORG from vCard
+export function parseVCardOrg(vcard: string): string {
+	return parseVCard(vcard).org;
+}
+
+export const VCardCardDefinition = {
+	type: 'vcard',
+	contentComponent: VCardCard,
+	settingsComponent: VCardCardSettings,
+
+	createNew: (card) => {
+		card.w = 2;
+		card.h = 2;
+		card.mobileW = 4;
+		card.mobileH = 4;
+		const displayName = user.profile?.displayName || user.profile?.handle || '';
+		card.cardData.vcard = generateVCard({
+			...emptyVCardFields,
+			lastName: displayName
+		});
+		card.cardData.displayName = displayName;
+	},
+
+	sidebarButtonText: 'vCard',
+	allowSetColor: true,
+	name: 'vCard Card'
+} as CardDefinition & { type: 'vcard' };

src/lib/cards/index.ts

···
 import { StandardSiteDocumentListCardDefinition } from './StandardSiteDocumentListCard';
 import { StatusphereCardDefinition } from './StatusphereCard';
 import { EventCardDefinition } from './EventCard';
+import { VCardCardDefinition } from './VCardCard';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
···
 	PhotoGalleryCardDefinition,
 	StandardSiteDocumentListCardDefinition,
 	StatusphereCardDefinition,
-	EventCardDefinition
+	EventCardDefinition,
+	VCardCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(