link card

package.json

···
 		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"gsap": "^3.14.2",
+		"link-preview-js": "^4.0.0",
 		"marked": "^15.0.11",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",

pnpm-lock.yaml

···
       gsap:
         specifier: ^3.14.2
         version: 3.14.2
+      link-preview-js:
+        specifier: ^4.0.0
+        version: 4.0.0
       marked:
         specifier: ^15.0.11
         version: 15.0.11
···
     resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==, tarball: https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz}
     engines: {node: '>=18'}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==, tarball: https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==, tarball: https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz}
 
···
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==, tarball: https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz}
     engines: {node: '>=10'}
+
+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==, tarball: https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz}
+
+  cheerio@1.0.0-rc.11:
+    resolution: {integrity: sha512-bQwNaDIBKID5ts/DsdhxrjqFXYfLw4ste+wMKqWA8DyKcS4qwsPP4Bk8ZNaTJjvpiX/qW3BT4sU7d6Bh5i+dag==, tarball: https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.11.tgz}
+    engines: {node: '>= 6'}
 
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz}
···
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==, tarball: https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz}
     engines: {node: '>= 8'}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==, tarball: https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==, tarball: https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==, tarball: https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz}
 
···
 
   devalue@5.6.0:
     resolution: {integrity: sha512-BaD1s81TFFqbD6Uknni42TrolvEWA1Ih5L+OiHWmi4OYMJVwAYPGtha61I9KxTf52OvVHozHyjPu8zljqdF3uA==, tarball: https://registry.npmjs.org/devalue/-/devalue-5.6.0.tgz}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==, tarball: https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==, tarball: https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==, tarball: https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==, tarball: https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz}
 
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==, tarball: https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz}
···
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==, tarball: https://registry.npmjs.org/entities/-/entities-4.5.0.tgz}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==, tarball: https://registry.npmjs.org/entities/-/entities-6.0.1.tgz}
+    engines: {node: '>=0.12'}
+
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==, tarball: https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz}
 
···
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==, tarball: https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz}
     engines: {node: '>= 0.4'}
 
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==, tarball: https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==, tarball: https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz}
     engines: {node: '>= 0.8'}
···
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==, tarball: https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz}
     engines: {node: '>=10'}
 
+  link-preview-js@4.0.0:
+    resolution: {integrity: sha512-KYYiMVOAguIFNdoVGVjd+6cgknv5XHbr1IuRdj3T5EkN7JNaqUh4a1NSCi5FX6zyZzILI55OQA6+YxBAcPY2wA==, tarball: https://registry.npmjs.org/link-preview-js/-/link-preview-js-4.0.0.tgz}
+    engines: {node: '>=18'}
+
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==, tarball: https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz}
 
···
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==, tarball: https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz}
     engines: {node: '>= 0.6'}
 
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==, tarball: https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz}
+
   number-flow@0.5.8:
     resolution: {integrity: sha512-FPr1DumWyGi5Nucoug14bC6xEz70A1TnhgSHhKyfqjgji2SOTz+iLJxKtv37N5JyJbteGYCm6NQ9p1O4KZ7iiA==, tarball: https://registry.npmjs.org/number-flow/-/number-flow-0.5.8.tgz}
 
···
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==, tarball: https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz}
     engines: {node: '>=6'}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==, tarball: https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==, tarball: https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz}
 
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==, tarball: https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz}
···
     transitivePeerDependencies:
       - supports-color
 
+  boolbase@1.0.0: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
···
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.2.2
+      css-what: 6.2.2
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.0.0-rc.11:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      htmlparser2: 8.0.2
+      parse5: 7.3.0
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      tslib: 2.8.1
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
···
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
···
 
   devalue@5.6.0: {}
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
···
       tapable: 2.2.1
 
   entities@4.5.0: {}
+
+  entities@6.0.1: {}
 
   error-stack-parser-es@1.0.5: {}
 
···
     dependencies:
       function-bind: 1.1.2
 
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
···
 
   lilconfig@2.1.0: {}
 
+  link-preview-js@4.0.0:
+    dependencies:
+      cheerio: 1.0.0-rc.11
+
   linkify-it@5.0.0:
     dependencies:
       uc.micro: 2.1.0
···
 
   negotiator@1.0.0: {}
 
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   number-flow@0.5.8:
     dependencies:
       esm-env: 1.2.2
···
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.3.0
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
 
   parseurl@1.3.3: {}
 

src/lib/EditableWebsite.svelte

···
 	import { deleteRecord, putRecord } from './oauth/atproto';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { TID } from '@atproto/common-web';
+	import EditingCard from './cards/Card/EditingCard.svelte';
 
 	let {
 		handle,
···
 		mouseDeltaY: 0
 	});
 
-	let isMobile = $derived((innerWidth.current ?? 1000) < 768);
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
 
 	const getX = (item: Item) => (isMobile ? (item.mobileX ?? item.x) : item.x);
 	const getY = (item: Item) => (isMobile ? (item.mobileY ?? item.y) : item.y);
···
 	const getH = (item: Item) => (isMobile ? (item.mobileH ?? item.h) : item.h);
 
 	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0));
-	$inspect(maxHeight);
+
+	function newCard(type: 'text' | 'image' | 'link' = 'link') {
+		let newItem: Item = {
+			id: TID.nextStr(),
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1,
+			mobileH: 2,
+			mobileW: 2,
+			mobileX: 0,
+			mobileY: 0,
+			cardType: type,
+			cardData: {
+				href: 'https://bsky.app/profile/flo-bit.dev'
+			}
+		};
+
+		let foundPosition = false;
+		while (!foundPosition) {
+			for (newItem.x = 0; newItem.x <= 4 - newItem.w; newItem.x++) {
+				let collision = items.find((item) => overlaps(newItem, item));
+				console.log('checking position', newItem.x, newItem.y, 'collision:', collision);
+				if (!collision) {
+					foundPosition = true;
+					break;
+				}
+			}
+			if (!foundPosition) newItem.y += 1;
+		}
+
+		let foundMobilePosition = false;
+		while (!foundMobilePosition) {
+			for (newItem.mobileX = 0; newItem.mobileX <= 4 - newItem.mobileW; newItem.mobileX += 1) {
+				let collision = items.find((item) => overlaps(newItem, item, true));
+
+				if (!collision) {
+					foundMobilePosition = true;
+					break;
+				}
+			}
+			if (!foundMobilePosition) newItem.mobileY! += 2;
+		}
+
+		items = [...items, newItem];
+	}
 </script>
 
 <Profile {handle} {did} />
 
-<div class="md:grid md:grid-cols-3">
+<div class="mx-auto max-w-2xl lg:grid-cols-4 lg:grid lg:max-w-none xl:grid-cols-3">
 	<div></div>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
···
 			activeDragElement.element = null;
 			return true;
 		}}
-		class="relative col-span-2 p-8"
+		class="relative col-span-3 xl:col-span-2 py-8 px-2 lg:px-8"
 		style="container-type: inline-size;"
 	>
-		{#each items.toSorted(sortItems) as item}
-			<EditingImageCard
+		{#each items as item, i}
+			<EditingCard
 				ondragstart={(e) => {
 					const target = e.target as HTMLDivElement;
 					activeDragElement.element = target;
···
 					activeDragElement.mouseDeltaX = rect.left + margin - e.clientX;
 					activeDragElement.mouseDeltaY = rect.top - e.clientY;
 				}}
-				{item}
+				bind:item={items[i]}
 				ondelete={() => {
 					items = items.filter((it) => it !== item);
 				}}
···
 <HeadItem collection="com.example.head" />
 
 <Navbar
-	class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto"
+	class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 lg:mx-auto"
 >
 	<div class="flex items-center gap-2">
 		<Button
···
 			variant="ghost"
 			class="backdrop-blur-none"
 			onclick={() => {
-				let newItem: Item = {
-					id: TID.nextStr(),
-					x: 0,
-					y: 0,
-					w: 1,
-					h: 1,
-					mobileH: 2,
-					mobileW: 2,
-					mobileX: 0,
-					mobileY: 0,
-					cardType: 'image',
-					cardData: {
-						image: `https://picsum.photos/seed/1${crypto.randomUUID()}/800/800`,
-						href: 'https://example.com',
-						hrefText: 'Visit example page'
-					}
-				};
-
-				let foundPosition = false;
-				while (!foundPosition) {
-					for (newItem.x = 0; newItem.x <= 4 - newItem.w; newItem.x++) {
-						let collision = items.find((item) => overlaps(newItem, item));
-						console.log('checking position', newItem.x, newItem.y, 'collision:', collision);
-						if (!collision) {
-							foundPosition = true;
-							break;
-						}
-					}
-					if (!foundPosition) newItem.y += 1;
-				}
-
-				let foundMobilePosition = false;
-				while (!foundMobilePosition) {
-					for (newItem.mobileX = 0; newItem.mobileX <= 4 - newItem.mobileW; newItem.mobileX += 1) {
-						let collision = items.find((item) => overlaps(newItem, item, true));
-
-						if (!collision) {
-							foundMobilePosition = true;
-							break;
-						}
-					}
-					if (!foundMobilePosition) newItem.mobileY! += 2;
-				}
-
-				items = [...items, newItem];
+				newCard();
 			}}
 		>
 			<svg
···
 
 						if (!originalItem) {
 							console.log('updated or new item', item);
+							item.updatedAt = new Date().toISOString();
 							await putRecord({ collection: 'com.example.bento', rkey: item.id, record: item });
 						}
 					}

src/lib/Profile.svelte

···
 	let { handle, did }: { handle: string; did: string } = $props();
 </script>
 
-<div class="flex px-12 py-24 md:fixed md:h-screen md:w-1/3">
+<div class="mx-auto flex max-w-2xl px-10 lg:px-12 pt-16 lg:pt-24 pb-8 lg:fixed lg:h-screen lg:w-1/4 xl:w-1/3 lg:max-w-none">
 	<div class="flex flex-col gap-4">
 		<SingleRecord collection="app.bsky.actor.profile" rkey="self">
 			{#snippet child(data)}
···
 						data.value.avatar.ref.$link}
 				/>
 				<img
-					class="rounded-fulll size-44 rounded-full"
+					class="rounded-fulll size-32 lg:size-44 rounded-full"
 					src={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + data.value.avatar.ref.$link}
 					alt=""
 				/>

src/lib/Website.svelte

···
 <script lang="ts">
-	import ImageCard from './cards/ImageCard/ImageCard.svelte';
-	import { sortItems } from './helper';
+	import Card from './cards/Card/Card.svelte';
 	import Profile from './Profile.svelte';
+	import { sortItems } from './helper';
 	import type { Item } from './types';
+	import { innerWidth } from 'svelte/reactivity/window';
 
-	let { handle, did, items }: { handle: string; did: string, items: Item[] } = $props();
+	let { handle, did, items }: { handle: string; did: string; items: Item[] } = $props();
 
-	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, item.y + item.h), 0));
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
+
+	let maxHeight = $derived(
+		items.reduce(
+			(max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h),
+			0
+		)
+	);
 
 	let container: HTMLDivElement | undefined = $state();
 </script>
 
 <Profile {handle} {did} />
 
-<div class="md:grid md:grid-cols-3">
+<div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-4 xl:grid-cols-3">
 	<div></div>
 	<div
 		bind:this={container}
-		class="relative col-span-2 p-8"
+		class="relative col-span-3 px-2 py-8 lg:px-8 xl:col-span-2"
 		style="container-type: inline-size;"
 	>
 		{#each items.toSorted(sortItems) as item}
-			<ImageCard
-				{item}
-			/>
+			<Card {item} />
 		{/each}
-		<div style="height: {((maxHeight) / 4) * 100}cqw;"></div>
+		<div style="height: {(maxHeight / 4) * 100}cqw;"></div>
 	</div>
 </div>

src/lib/assets/favicon.svg

···
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

src/lib/cards/BaseCard/BaseCard.svelte

···
+<script lang="ts">
+	import { margin, mobileMargin } from '$lib';
+	import type { Item } from '$lib/types';
+	import type { WithElementRef } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { innerWidth } from 'svelte/reactivity/window';
+
+	export type BaseCardProps = {
+		item: Item;
+		controls?: Snippet<[]>;
+		isEditing?: boolean;
+	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		item,
+		children,
+		ref = $bindable(null),
+		isEditing = false,
+		controls,
+		...rest
+	}: BaseCardProps = $props();
+
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
+
+	const getX = () => (isMobile ? (item.mobileX ?? item.x) : item.x);
+	const getY = () => (isMobile ? (item.mobileY ?? item.y) : item.y);
+	const getW = () => (isMobile ? (item.mobileW ?? item.w) : item.w);
+	const getH = () => (isMobile ? (item.mobileH ?? item.h) : item.h);
+</script>
+
+<div
+	id={item.id}
+	data-flip-id={item.id}
+	bind:this={ref}
+	draggable={isEditing}
+	class={[
+		'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2 lg:hidden'
+	]}
+	style={`translate: calc(${(item.mobileX / 4) * 100}cqw + ${mobileMargin}px) calc(${(item.mobileY / 4) * 100}cqw + ${mobileMargin}px); 
+                width: calc(${(item.mobileW / 4) * 100}cqw - ${mobileMargin * 2}px);
+                height: calc(${(item.mobileH / 4) * 100}cqw - ${mobileMargin * 2}px);`}
+	{...rest}
+>
+	<div class="relative h-full w-full overflow-hidden rounded-[15px]">
+		{@render children?.()}
+	</div>
+	{@render controls?.()}
+</div>
+
+<div
+	id={item.id}
+	data-flip-id={item.id}
+	bind:this={ref}
+	draggable={isEditing}
+	class={[
+		'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 hidden rounded-2xl border outline-offset-2 focus-within:outline-2 lg:block'
+	]}
+	style={`translate: calc(${(item.x / 4) * 100}cqw + ${margin}px) calc(${(item.y / 4) * 100}cqw + ${margin}px); 
+                width: calc(${(item.w / 4) * 100}cqw - ${margin * 2}px);
+                height: calc(${(item.h / 4) * 100}cqw - ${margin * 2}px);`}
+	{...rest}
+>
+	<div class="relative h-full w-full overflow-hidden rounded-[15px]">
+		{@render children?.()}
+	</div>
+	{@render controls?.()}
+</div>

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Card from './BaseCard.svelte';
+	import type { Item } from '$lib/types';
+
+	export type BaseEditingCardProps = {
+		item: Item;
+		ondelete: () => void;
+		onsetsize: (newW: number, newH: number) => void;
+		onshowsettings: () => void;
+	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		item,
+		children,
+		ref = $bindable(null),
+		onsetsize,
+		onshowsettings,
+		ondelete,
+		...rest
+	}: BaseEditingCardProps = $props();
+</script>
+
+<Card {item} {...rest} isEditing={true} bind:ref>
+	{@render children?.()}
+
+	{#snippet controls()}
+		<button
+			onclick={() => {
+				ondelete();
+			}}
+			class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 absolute -top-3 -left-3 hidden cursor-pointer items-center justify-center rounded-full border p-2 shadow-lg group-focus-within:inline-flex group-hover:inline-flex"
+		>
+			<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="M6 18 18 6M6 6l12 12" />
+			</svg>
+			<span class="sr-only">Delete card</span>
+		</button>
+
+		<div
+			class="absolute -bottom-7 z-50 hidden w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex"
+		>
+			<div
+				class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
+			>
+				<button
+					onclick={() => {
+						onsetsize?.(1, 1);
+					}}
+					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+				>
+					<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
+
+					<span class="sr-only">set size to 1x1</span>
+				</button>
+
+				<button
+					onclick={() => {
+						onsetsize?.(2, 1);
+					}}
+					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+				>
+					<div class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"></div>
+					<span class="sr-only">set size to 2x1</span>
+				</button>
+				<button
+					onclick={() => {
+						onsetsize?.(1, 2);
+					}}
+					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+				>
+					<div class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"></div>
+
+					<span class="sr-only">set size to 1x2</span>
+				</button>
+				<button
+					onclick={() => {
+						onsetsize?.(2, 2);
+					}}
+					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+				>
+					<div class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"></div>
+
+					<span class="sr-only">set size to 2x2</span>
+				</button>
+
+				<button
+					onclick={() => {
+						onshowsettings();
+					}}
+					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+						/>
+					</svg>
+
+					<span class="sr-only">open card settings</span>
+				</button>
+			</div>
+		</div>
+	{/snippet}
+</Card>

src/lib/cards/Card/Card.svelte

···
 <script lang="ts">
-	import { margin } from '$lib';
-	import type { Item } from '$lib/types';
-	import type { WithElementRef } from 'bits-ui';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { innerWidth } from 'svelte/reactivity/window';
+	import { CardDefinitionsByType } from '.';
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
+	import ImageCard from '../ImageCard/ImageCard.svelte';
+	import TextCard from '../TextCard/TextCard.svelte';
 
-	export type CardProps = {
-		item: Item;
-		controls?: Snippet<[]>;
-		isEditing?: boolean;
-	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-	let {
-		item,
-		children,
-		ref = $bindable(null),
-		isEditing = false,
-		controls,
-		...rest
-	}: CardProps = $props();
-
-	let isMobile = $derived((innerWidth.current ?? 1000) < 768);
-
-	const getX = () => (isMobile ? (item.mobileX ?? item.x) : item.x);
-	const getY = () => (isMobile ? (item.mobileY ?? item.y) : item.y);
-	const getW = () => (isMobile ? (item.mobileW ?? item.w) : item.w);
-	const getH = () => (isMobile ? (item.mobileH ?? item.h) : item.h);
+	let { item, ref = $bindable(null), ...rest }: BaseCardProps = $props();
 </script>
 
-<div
-	id={item.id}
-	data-flip-id={item.id}
-	bind:this={ref}
-	draggable={isEditing}
-	class={[
-		'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2'
-	]}
-	style={`translate: calc(${(getX() / 4) * 100}cqw + ${margin}px) calc(${(getY() / 4) * 100}cqw + ${margin}px); 
-                width: calc(${(getW() / 4) * 100}cqw - ${margin * 2}px);
-                height: calc(${(getH() / 4) * 100}cqw - ${margin * 2}px);`}
-	{...rest}
->
-	<div class="relative h-full w-full overflow-hidden rounded-[15px]">
-		{@render children?.()}
-	</div>
-	{@render controls?.()}
-</div>
+{#if CardDefinitionsByType[item.cardType]}
+	{@const cardDef = CardDefinitionsByType[item.cardType]}
+	<cardDef.cardComponent {item} {ref} {...rest} />
+{:else}
+	<BaseCard {item} {...rest}>
+		<div>Unsupported card type: {item.cardType}</div>
+	</BaseCard>
+{/if}

src/lib/cards/Card/EditingCard.svelte

···
 <script lang="ts">
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import Card from './Card.svelte';
-	import type { Item } from '$lib/types';
+	import type { BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
+	import { CardDefinitionsByType } from '.';
+	import BaseCard from '../BaseCard/BaseCard.svelte';
 
-	export type EditingCardProps = {
-		item: Item;
-		ondelete: () => void;
-		onsetsize: (newW: number, newH: number) => void;
-		onshowsettings: () => void;
-	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-	let {
-		item,
-		children,
-		ref = $bindable(null),
-		onsetsize,
-		onshowsettings,
-		ondelete,
-		...rest
-	}: EditingCardProps = $props();
+	let { item = $bindable(), ref = $bindable(), ...rest }: BaseEditingCardProps = $props();
 </script>
 
-<Card {item} {...rest} isEditing={true} bind:ref>
-	{@render children?.()}
-
-	{#snippet controls()}
-		<button
-			onclick={() => {
-				ondelete();
-			}}
-			class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 absolute -top-3 -left-3 hidden cursor-pointer items-center justify-center rounded-full border p-2 shadow-lg group-focus-within:inline-flex group-hover:inline-flex"
-		>
-			<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="M6 18 18 6M6 6l12 12" />
-			</svg>
-			<span class="sr-only">Delete card</span>
-		</button>
-
-		<div
-			class=" absolute -bottom-3 z-50 hidden w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex"
-		>
-			<div
-				class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
-			>
-				<button
-					onclick={() => {
-						onsetsize?.(1, 1);
-					}}
-					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-				>
-					<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
-
-					<span class="sr-only">set size to 1x1</span>
-				</button>
-
-				<button
-					onclick={() => {
-						onsetsize?.(2, 1);
-					}}
-					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-				>
-					<div class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"></div>
-					<span class="sr-only">set size to 2x1</span>
-				</button>
-				<button
-					onclick={() => {
-						onsetsize?.(1, 2);
-					}}
-					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-				>
-					<div class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"></div>
-
-					<span class="sr-only">set size to 1x2</span>
-				</button>
-				<button
-					onclick={() => {
-						onsetsize?.(2, 2);
-					}}
-					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-				>
-					<div class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"></div>
-
-					<span class="sr-only">set size to 2x2</span>
-				</button>
-
-				<button
-					onclick={() => {
-						onshowsettings();
-					}}
-					class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-						class="size-5"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-						/>
-					</svg>
-
-					<span class="sr-only">open card settings</span>
-				</button>
-			</div>
-		</div>
-	{/snippet}
-</Card>
+{#if CardDefinitionsByType[item.cardType]}
+	{@const cardDef = CardDefinitionsByType[item.cardType]}
+	<cardDef.editingCardComponent bind:item {ref} {...rest} />
+{:else}
+	<BaseCard {item} {...rest}>
+		<div>Unsupported card type: {item.cardType}</div>
+	</BaseCard>
+{/if}

src/lib/cards/Card/index.ts

···
+import { ImageCardDefinition } from '../ImageCard';
+import { LinkCardDefinition } from '../LinkCard';
+import { TextCardDefinition } from '../TextCard';
+import type { CardDefinition } from '../types';
+
+export const AllCardDefinitions = [
+	ImageCardDefinition,
+	TextCardDefinition,
+	LinkCardDefinition
+] as const;
+
+export const CardDefinitionsByType = AllCardDefinitions.reduce(
+	(acc, item) => {
+		acc[item.type] = item;
+		return acc;
+	},
+	{} as Record<string, CardDefinition>
+);

src/lib/cards/ImageCard/EditingImageCard.svelte

···
 <script lang="ts">
-	import EditingCard, { type EditingCardProps } from '../Card/EditingCard.svelte';
+	import BaseEditingCard, { type BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
 
-	let { item, ...rest }: EditingCardProps = $props();
+	let { item = $bindable(), ...rest }: BaseEditingCardProps = $props();
 </script>
 
-<EditingCard {item} {...rest}>
+<BaseEditingCard {item} {...rest}>
 	{#key item.cardData.image}
 		<img
 			class={[
···
 			</span>
 		</a>
 	{/if}
-</EditingCard>
+</BaseEditingCard>

src/lib/cards/ImageCard/ImageCard.svelte

···
 <script lang="ts">
-	import Card, { type CardProps } from '../Card/Card.svelte';
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
 
-	let { item, ...rest }: CardProps = $props();
+	let { item, ...rest }: BaseCardProps = $props();
 </script>
 
-<Card {item} {...rest}>
+<BaseCard {item} {...rest}>
 	{#key item.cardData.image}
 		<img
 			class={[
···
 			</div>
 		</a>
 	{/if}
-</Card>
+</BaseCard>

src/lib/cards/ImageCard/index.ts

···
+import type { CardDefinition } from '../types';
+import EditingImageCard from './EditingImageCard.svelte';
+import ImageCard from './ImageCard.svelte';
+
 export const ImageCardDefinition = {
-	type: 'card.image'
-};
+	type: 'image',
+	cardComponent: ImageCard,
+	editingCardComponent: EditingImageCard,
+	createNew: (card) => {
+		card.cardType = 'image';
+		card.cardData = {
+			src: '',
+			alt: '',
+			href: ''
+		};
+	}
+} as CardDefinition & { type: 'image' };

src/lib/cards/LinkCard/EditingLinkCard.svelte

···
+<script lang="ts">
+	import BaseEditingCard, { type BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
+	import { innerWidth } from 'svelte/reactivity/window';
+
+	let { item = $bindable(), ...rest }: BaseEditingCardProps = $props();
+
+	let isFetchingMetadata = $state(false);
+
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
+
+	$effect(() => {
+		const fetchMetadata = async () => {
+			if (!item.cardData.href) return;
+			if (isFetchingMetadata) return;
+
+			isFetchingMetadata = true;
+
+			item.cardData.domain = new URL(item.cardData.href).hostname;
+
+			try {
+				const response = await fetch('/api/links?link=' + encodeURIComponent(item.cardData.href));
+				if (response.ok) {
+					const data = await response.json();
+					item.cardData.description = data.description || '';
+					item.cardData.title = data.title || '';
+					item.cardData.image = data.images?.[0] || '';
+					item.cardData.favicon = data.favicons?.[0] || '';
+				}
+			} catch (error) {
+				console.error('Error fetching metadata:', error);
+			} finally {
+				isFetchingMetadata = false;
+			}
+		};
+
+		fetchMetadata();
+	});
+</script>
+
+<BaseEditingCard {item} {...rest}>
+	<div class="flex h-full flex-col justify-between p-4">
+		<div>
+			<img class="mb-2 size-8 rounded-lg object-cover" src={item.cardData.favicon} alt="" />
+			<div class="text-base-900 dark:text-base-50 text-lg font-semibold">{item.cardData.title}</div>
+			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
+			<div class="text-accent-600 dark:text-accent-400 mt-2 text-xs font-light">
+				{item.cardData.domain}
+			</div>
+		</div>
+
+		{#if ((isMobile && item.mobileH >= 4) || (!isMobile && item.h >= 2)) && item.cardData.image}
+			<img class=" mb-2 max-h-32 w-full rounded-xl object-cover" src={item.cardData.image} alt="" />
+		{/if}
+		<!-- {#key item.cardData.image}
+		<img
+			class={[
+				'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
+				item.cardData.href ? 'group-hover:scale-105' : ''
+			]}
+			src={item.cardData.image}
+			alt=""
+		/>
+	{/key} -->
+		{#if item.cardData.href}
+			<a
+				href={item.cardData.href}
+				class="absolute inset-0 h-full w-full"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<span class="sr-only">
+					{item.cardData.hrefText ?? 'Learn more'}
+				</span>
+			</a>
+		{/if}
+	</div>
+</BaseEditingCard>

src/lib/cards/LinkCard/LinkCard.svelte

···
+<script lang="ts">
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
+	import { innerWidth } from 'svelte/reactivity/window';
+	let { item, ...rest }: BaseCardProps = $props();
+
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
+</script>
+
+<BaseCard {item} {...rest}>
+	<div class="flex h-full flex-col justify-between p-4">
+		<div>
+			<img class="mb-2 size-8 rounded-lg object-cover" src={item.cardData.favicon} alt="" />
+			<div class="text-base-900 dark:text-base-50 text-lg font-semibold">{item.cardData.title}</div>
+			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
+			<div class="text-accent-600 dark:text-accent-400 mt-2 text-xs font-light">
+				{item.cardData.domain}
+			</div>
+		</div>
+
+		{#if ((isMobile && item.mobileH >= 4) || (!isMobile && item.h >= 2)) && item.cardData.image}
+			<img class=" mb-2 max-h-32 w-full rounded-xl object-cover" src={item.cardData.image} alt="" />
+		{/if}
+		{#if item.cardData.href}
+			<a
+				href={item.cardData.href}
+				class="absolute inset-0 h-full w-full"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<span class="sr-only">
+					{item.cardData.hrefText ?? 'Learn more'}
+				</span>
+
+				<div
+					class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2.5"
+						stroke="currentColor"
+						class="size-4"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/if}
+	</div>
+</BaseCard>

src/lib/cards/LinkCard/index.ts

···
+import type { CardDefinition } from '../types';
+import EditingLinkCard from './EditingLinkCard.svelte';
+import LinkCard from './LinkCard.svelte';
+
+export const LinkCardDefinition = {
+	type: 'link',
+	cardComponent: LinkCard,
+	editingCardComponent: EditingLinkCard,
+	createNew: (card) => {
+		card.cardType = 'link';
+		card.cardData = {
+			src: '',
+			alt: '',
+			href: ''
+		};
+	}
+} as CardDefinition & { type: 'link' };

src/lib/cards/TextCard/EditingTextCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import BaseEditingCard, { type BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
+	import MarkdownTextEditor from './MarkdownTextEditor.svelte';
+
+	let { item = $bindable<Item>(), ...rest }: BaseEditingCardProps = $props();
+</script>
+
+<BaseEditingCard {item} {...rest}>
+	<div
+		class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm hover:bg-base-500/20 prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1"
+	>
+		<MarkdownTextEditor bind:item />
+	</div>
+</BaseEditingCard>

src/lib/cards/TextCard/MarkdownTextEditor.svelte

···
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { Editor, type Content, type Extensions } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Image from '@tiptap/extension-image';
+	import Placeholder from '@tiptap/extension-placeholder';
+	import Link from '@tiptap/extension-link';
+	import { marked } from 'marked';
+	import { generateJSON } from '@tiptap/core';
+	import TurndownService from 'turndown';
+	import { RichTextLink } from './extensions/RichTextLink';
+	import type { Item } from '$lib/types';
+
+	let element: HTMLElement | undefined = $state();
+	let editor: Editor | null = $state(null);
+
+	let loaded = $state(false);
+
+	let edited = $state(false);
+
+	let {
+		item = $bindable(),
+		placeholder = '',
+		defaultContent = ''
+	}: {
+		item: Item;
+		placeholder?: string;
+		defaultContent?: string;
+	} = $props();
+
+	const update = async () => {
+		if (!editor) return {};
+
+		const html = editor.getHTML();
+
+		var turndownService = new TurndownService({
+			headingStyle: 'atx',
+			bulletListMarker: '-'
+		});
+		const markdown = turndownService.turndown(html);
+
+		item.cardData.text = markdown;
+	};
+
+	onMount(async () => {
+		if (!element || editor) return;
+
+		let json: Content = '';
+
+		try {
+			let html = await marked.parse(item.cardData.text ?? (defaultContent as string));
+
+			// parse to json
+			json = generateJSON(html, [
+				StarterKit.configure(),
+				Image.configure(),
+				RichTextLink.configure({
+					openOnClick: false
+				})
+			]);
+		} catch (error) {
+			console.error(error);
+		}
+
+		let extensions: Extensions = [
+			StarterKit.configure(),
+			Image.configure(),
+			Link.configure({
+				openOnClick: false
+			})
+		];
+
+		if (placeholder) {
+			extensions.push(
+				Placeholder.configure({
+					placeholder: placeholder
+				})
+			);
+		}
+
+		editor = new Editor({
+			element: element,
+			extensions: extensions,
+			onTransaction: () => {
+				editor = editor;
+			},
+			onUpdate: () => {
+				update();
+			},
+
+			content: json,
+
+			editorProps: {
+				attributes: {
+					class: 'outline-none'
+				}
+			}
+		});
+
+		loaded = true;
+	});
+
+	onDestroy(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+</script>
+
+<div bind:this={element}></div>
+
+<style>
+	:global(.tiptap p.is-editor-empty:first-child::before) {
+		color: var(--color-base-800);
+		content: attr(data-placeholder);
+		float: left;
+		height: 0;
+		pointer-events: none;
+	}
+	:global(.dark .tiptap p.is-editor-empty:first-child::before) {
+		color: var(--color-base-200);
+	}
+</style>

src/lib/cards/TextCard/TextCard.svelte

···
+<script lang="ts">
+	import { marked } from 'marked';
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
+
+	let { item, ...rest }: BaseCardProps = $props();
+
+	const renderer = new marked.Renderer();
+	renderer.link = ({ href, title, text }) =>
+		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+</script>
+
+<BaseCard {item} {...rest}>
+	<div
+		class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1 break-words"
+	>
+		{@html marked.parse(item.cardData.text ?? '', { renderer })}
+	</div>
+</BaseCard>

src/lib/cards/TextCard/extensions/RichTextLink.ts

···
+import { InputRule, markInputRule, markPasteRule, PasteRule } from '@tiptap/core';
+import { Link } from '@tiptap/extension-link';
+
+import type { LinkOptions } from '@tiptap/extension-link';
+
+/**
+ * The input regex for Markdown links with title support, and multiple quotation marks (required
+ * in case the `Typography` extension is being included).
+ */
+const inputRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)$/i;
+
+/**
+ * The paste regex for Markdown links with title support, and multiple quotation marks (required
+ * in case the `Typography` extension is being included).
+ */
+const pasteRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)/gi;
+
+/**
+ * Input rule built specifically for the `Link` extension, which ignores the auto-linked URL in
+ * parentheses (e.g., `(https://doist.dev)`).
+ *
+ * @see https://github.com/ueberdosis/tiptap/discussions/1865
+ */
+function linkInputRule(config: Parameters<typeof markInputRule>[0]) {
+	const defaultMarkInputRule = markInputRule(config);
+
+	return new InputRule({
+		find: config.find,
+		handler(props) {
+			const { tr } = props.state;
+
+			defaultMarkInputRule.handler(props);
+			tr.setMeta('preventAutolink', true);
+		}
+	});
+}
+
+/**
+ * Paste rule built specifically for the `Link` extension, which ignores the auto-linked URL in
+ * parentheses (e.g., `(https://doist.dev)`). This extension was inspired from the multiple
+ * implementations found in a Tiptap discussion at GitHub.
+ *
+ * @see https://github.com/ueberdosis/tiptap/discussions/1865
+ */
+function linkPasteRule(config: Parameters<typeof markPasteRule>[0]) {
+	const defaultMarkPasteRule = markPasteRule(config);
+
+	return new PasteRule({
+		find: config.find,
+		handler(props) {
+			const { tr } = props.state;
+
+			defaultMarkPasteRule.handler(props);
+			tr.setMeta('preventAutolink', true);
+		}
+	});
+}
+
+/**
+ * The options available to customize the `RichTextLink` extension.
+ */
+type RichTextLinkOptions = LinkOptions;
+
+/**
+ * Custom extension that extends the built-in `Link` extension to add additional input/paste rules
+ * for converting the Markdown link syntax (i.e. `[Doist](https://doist.com)`) into links, and also
+ * adds support for the `title` attribute.
+ */
+const RichTextLink = Link.extend<RichTextLinkOptions>({
+	inclusive: false,
+	addOptions() {
+		return {
+			...this.parent?.(),
+			openOnClick: 'whenNotEditable'
+		};
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			title: {
+				default: null
+			}
+		};
+	},
+	addInputRules() {
+		return [
+			linkInputRule({
+				find: inputRegex,
+				type: this.type,
+
+				// We need to use `pop()` to remove the last capture groups from the match to
+				// satisfy Tiptap's `markPasteRule` expectation of having the content as the last
+				// capture group in the match (this makes the attribute order important)
+				getAttributes(match) {
+					return {
+						title: match.pop()?.trim(),
+						href: match.pop()?.trim()
+					};
+				}
+			})
+		];
+	},
+	addPasteRules() {
+		return [
+			linkPasteRule({
+				find: pasteRegex,
+				type: this.type,
+
+				// We need to use `pop()` to remove the last capture groups from the match to
+				// satisfy Tiptap's `markInputRule` expectation of having the content as the last
+				// capture group in the match (this makes the attribute order important)
+				getAttributes(match) {
+					return {
+						title: match.pop()?.trim(),
+						href: match.pop()?.trim()
+					};
+				}
+			})
+		];
+	}
+});
+
+export { RichTextLink };
+
+export type { RichTextLinkOptions };

src/lib/cards/TextCard/index.ts

···
+import type { CardDefinition } from '../types';
+import EditingTextCard from './EditingTextCard.svelte';
+import TextCard from './TextCard.svelte';
+
+export const TextCardDefinition = {
+	type: 'text',
+	cardComponent: TextCard,
+	editingCardComponent: EditingTextCard,
+	createNew: (card) => {
+		card.cardType = 'text';
+		card.cardData = {
+			text: ''
+		};
+	}
+} as CardDefinition & { type: 'text' };

src/lib/cards/types.ts

···
+import type { Component } from 'svelte';
+import type { BaseCardProps } from './BaseCard/BaseCard.svelte';
+import type { Item } from '$lib/types';
+import type { BaseEditingCardProps } from './BaseCard/BaseEditingCard.svelte';
+
+export type CardDefinition = {
+	cardComponent: Component<BaseCardProps>;
+	editingCardComponent: Component<BaseEditingCardProps>;
+	createNew?: (item: Item) => void;
+};

src/lib/index.ts

···
 // place files you want to import through the `$lib` alias in this folder.
-export const margin = 16;
+export const margin = 16;
+export const mobileMargin = 12;

src/lib/types.ts

···
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	cardData: any;
+
+	updatedAt?: string;
 };

src/lib/website/EditingWebsiteWrapper.svelte

···
 
 <HeadItem collection="com.example.head" />
 
-<Navbar class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto">
+<Navbar class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 lg:mx-auto">
 	<div class="flex items-center gap-2">
 		<Button size="iconLg" variant="ghost" class="backdrop-blur-none" href={base + '/'}>
 			<span class="sr-only">home</span>

src/lib/website/foxui/bluesky-login/BlueskyLoginModal.svelte

···
 			<p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
 		{/if}
 
-		<Button type="submit" class="ml-auto mt-2 w-full md:w-auto" disabled={loading}
+		<Button type="submit" class="ml-auto mt-2 w-full lg:w-auto" disabled={loading}
 			>{loading ? 'Loading...' : 'Login'}</Button
 		>
 	</form>

src/lib/website/foxui/modal/Modal.svelte

···
 			{/if}
 
 			{#if yesButton || noButton}
-				<div class="flex flex-col items-stretch justify-end gap-2 md:flex-row md:items-center">
+				<div class="flex flex-col items-stretch justify-end gap-2 lg:flex-row lg:items-center">
 					{#if yesButton}
 						<Button
 							bind:ref={yesButtonRef}

src/routes/+page.svelte

···
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	onMount(async () => {
+		const data = await fetch('/api/links?link=https://bento.me/flo-bit');
+		const json = await data.json();
+		console.log(json);
+	})
+</script>
+
 <div class="flex h-screen items-center justify-center">
 	<h1 class="text-7xl font-bold">blento</h1>
 </div>

src/routes/api/links/+server.ts

···
+import { json } from '@sveltejs/kit';
+import { getLinkPreview } from 'link-preview-js';
+
+export async function GET({ url }) {
+	const link = url.searchParams.get('link');
+	if (!link) {
+		return json({ error: 'No link provided' }, { status: 400 });
+	}
+
+	try {
+		const data = await getLinkPreview(link);
+		return json(data);
+	} catch (error) {
+		console.error('Error fetching link preview:', error);
+		return json({ error: 'Failed to fetch link preview' }, { status: 500 });
+	}
+}

wrangler.jsonc

···
  */
 {
 	"$schema": "node_modules/wrangler/config-schema.json",
-	"name": "svelte-guestbook",
+	"name": "blento",
 	"main": ".svelte-kit/cloudflare/_worker.js",
 	"compatibility_date": "2025-12-25",
-	"compatibility_flags": [
-		"nodejs_als"
-	],
+	"compatibility_flags": ["nodejs_als"],
 	"assets": {
 		"binding": "ASSETS",
 		"directory": ".svelte-kit/cloudflare"