Merge pull request #30 from flo-bit/image-fixes

make image handling better

src/lib/atproto/methods.ts

···
 	};
 }) {
 	if (!did || !blob?.ref?.$link) return '';
-	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@jpeg`;
+	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@webp`;
 }
 
 export async function searchActorsTypeahead(

src/lib/cards/ImageCard/ImageCard.svelte

···
 <script lang="ts">
 	import { getDidContext } from '$lib/website/context';
-	import { getImageBlobUrl } from '$lib/atproto';
 	import type { ContentComponentProps } from '../types';
+	import { getImage } from '$lib/helper';
 
 	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 
 	const did = getDidContext();
-
-	function getSrc() {
-		if (item.cardData.objectUrl) return item.cardData.objectUrl;
-
-		if (item.cardData.image && typeof item.cardData.image === 'object') {
-			return getImageBlobUrl({ did, blob: item.cardData.image });
-		}
-		return item.cardData.image;
-	}
 </script>
 
-{#key item.cardData.image || item.cardData.objectUrl}
+{#key getImage(item.cardData, did, '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/card:scale-101' : ''
 		]}
-		src={getSrc()}
+		src={getImage(item.cardData, did, 'image')}
 		alt=""
 	/>
 {/key}

src/lib/cards/ImageCard/index.ts

···
-import { uploadBlob } from '$lib/atproto';
+import { checkAndUploadImage } from '$lib/helper';
 import type { CardDefinition } from '../types';
 import ImageCard from './ImageCard.svelte';
 import ImageCardSettings from './ImageCardSettings.svelte';
+
+// Common image extensions
+const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp|svg|bmp|ico|avif|tiff?)(\?.*)?$/i;
 
 export const ImageCardDefinition = {
 	type: 'image',
···
 		};
 	},
 	upload: async (item) => {
-		if (item.cardData.blob) {
-			item.cardData.image = await uploadBlob({ blob: item.cardData.blob });
-
-			delete item.cardData.blob;
-		}
-
-		if (item.cardData.objectUrl) {
-			URL.revokeObjectURL(item.cardData.objectUrl);
-
-			delete item.cardData.objectUrl;
-		}
-
+		await checkAndUploadImage(item.cardData, 'image');
 		return item;
 	},
 	settingsComponent: ImageCardSettings,
···
 	change: (item) => {
 		return item;
 	},
+
+	onUrlHandler: (url, item) => {
+		// Check if URL points to an image
+		if (IMAGE_EXTENSIONS.test(url)) {
+			item.cardType = 'image';
+			item.cardData.image = url;
+			item.cardData.alt = '';
+			item.cardData.href = '';
+			return item;
+		}
+		return null;
+	},
+	urlHandlerPriority: 3,
+
 	name: 'Image Card',
 
 	canHaveLabel: true

src/lib/cards/LinkCard/EditingLinkCard.svelte

···
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { getIsMobile } from '$lib/website/context';
+	import { getImage } from '$lib/helper';
+	import { getDidContext, getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
 	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
 
···
 			isFetchingMetadata = false;
 		});
 	});
+
+	let did = getDidContext();
 </script>
 
 <div class="relative flex h-full flex-col justify-between p-4">
···
 				<img
 					class="size-6 rounded-lg object-cover"
 					onerror={() => (faviconHasError = true)}
-					src={item.cardData.favicon}
+					src={getImage(item.cardData, did, 'favicon')}
 					alt=""
 				/>
 			{:else}
···
 	</div>
 
 	{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
-		<img class=" mb-2 max-h-32 w-full rounded-xl object-cover" src={item.cardData.image} alt="" />
+		<img
+			class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+			src={getImage(item.cardData, did)}
+			alt=""
+		/>
 	{/if}
 </div>

src/lib/cards/LinkCard/LinkCard.svelte

···
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { getIsMobile } from '$lib/website/context';
+	import { getImage } from '$lib/helper';
+	import { getDidContext, getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();
···
 	let isMobile = getIsMobile();
 
 	let faviconHasError = $state(false);
+
+	let did = getDidContext();
 </script>
 
 <div class="flex h-full flex-col justify-between p-4">
···
 
 	{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
 		<img
-			class="mb-2 max-h-32 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
-			src={item.cardData.image}
+			class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+			src={getImage(item.cardData, did)}
 			alt=""
 		/>
 	{/if}

src/lib/cards/LinkCard/index.ts

···
-import { validateLink } from '$lib/helper';
+import { checkAndUploadImage, validateLink } from '$lib/helper';
 import type { CardDefinition } from '../types';
 import EditingLinkCard from './EditingLinkCard.svelte';
 import LinkCard from './LinkCard.svelte';
···
 		item.cardData.href = url;
 		item.cardData.domain = new URL(url).hostname;
 		item.cardData.hasFetched = false;
+		return item;
+	},
+	upload: async (item) => {
+		await checkAndUploadImage(item.cardData, 'image');
+		await checkAndUploadImage(item.cardData, 'favicon');
 		return item;
 	},
 	urlHandlerPriority: 0

src/lib/helper.ts

···
 import type { Item, WebsiteData } from './types';
 import { COLUMNS, margin, mobileMargin } from '$lib';
 import { CardDefinitionsByType } from './cards';
-import { deleteRecord, putRecord } from '$lib/atproto';
+import { deleteRecord, getImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
 import { toast } from '@foxui/core';
 import * as TID from '@atcute/tid';
 
···
 	}
 }
 
-export function compressImage(file: File, maxSize: number = 900 * 1024): Promise<Blob> {
+export function compressImage(file: File | Blob, maxSize: number = 900 * 1024): Promise<Blob> {
 	return new Promise((resolve, reject) => {
 		const img = new Image();
 		const reader = new FileReader();
···
 		reader.readAsDataURL(file);
 
 		img.onload = () => {
+			const maxDimension = 2048;
+
+			// If image is already small enough, return original
+			if (file.size <= maxSize) {
+				console.log('skipping compression+resizing, already small enough');
+				return resolve(file);
+			}
+
 			let width = img.width;
 			let height = img.height;
-			const maxDimension = 2048;
 
 			if (width > maxDimension || height > maxDimension) {
 				if (width > height) {
···
 			if (!ctx) return reject(new Error('Failed to get canvas context.'));
 			ctx.drawImage(img, 0, 0, width, height);
 
-			// Function to try compressing at a given quality
-			let quality = 0.8;
+			// Use WebP for both compression and transparency support
+			let quality = 0.9;
+
 			function attemptCompression() {
 				canvas.toBlob(
 					(blob) => {
 						if (!blob) {
 							return reject(new Error('Compression failed.'));
 						}
-						// If the blob is under our size limit, or quality is too low, resolve it
 						if (blob.size <= maxSize || quality < 0.3) {
-							console.log('Compression successful. Blob size:', blob.size);
-							console.log('Quality:', quality);
 							resolve(blob);
 						} else {
-							// Otherwise, reduce the quality and try again
 							quality -= 0.1;
 							attemptCompression();
 						}
 					},
-					'image/jpeg',
+					'image/webp',
 					quality
 				);
 			}
···
 		window.scrollTo({ top: offset + cellSize * (currentY - 1), behavior: 'smooth' });
 	}
 }
+
+export async function checkAndUploadImage(
+	objectWithImage: Record<string, any>,
+	key: string = 'image'
+) {
+	if (!objectWithImage[key]) return;
+
+	// Already uploaded as blob
+	if (typeof objectWithImage[key] === 'object' && objectWithImage[key].$type === 'blob') {
+		return;
+	}
+
+	if (typeof objectWithImage[key] === 'string') {
+		// Download image from URL via proxy (to avoid CORS) and upload as blob
+		try {
+			const proxyUrl = `/api/image-proxy?url=${encodeURIComponent(objectWithImage[key])}`;
+			const response = await fetch(proxyUrl);
+			if (!response.ok) {
+				console.error('Failed to fetch image:', objectWithImage[key]);
+				return;
+			}
+			const blob = await response.blob();
+			const compressedBlob = await compressImage(blob);
+			objectWithImage[key] = await uploadBlob({ blob: compressedBlob });
+		} catch (error) {
+			console.error('Failed to download and upload image:', error);
+		}
+		return;
+	}
+
+	if (objectWithImage[key]?.blob) {
+		const compressedBlob = await compressImage(objectWithImage[key].blob);
+		objectWithImage[key] = await uploadBlob({ blob: compressedBlob });
+	}
+}
+
+export function getImage(objectWithImage: Record<string, any>, did: string, key: string = 'image') {
+	if (!objectWithImage[key]) return;
+
+	if (objectWithImage[key].objectUrl) return objectWithImage[key].objectUrl;
+
+	if (typeof objectWithImage[key] === 'object' && objectWithImage[key].$type === 'blob') {
+		return getImageBlobUrl({ did, blob: objectWithImage[key] });
+	}
+	return objectWithImage[key];
+}

src/lib/website/EditableWebsite.svelte

···
 
 		item.cardType = isGif ? 'gif' : 'image';
 		item.cardData = {
-			blob: processedFile,
-			objectUrl
+			image: { blob: processedFile, objectUrl }
 		};
 
 		// If grid position is provided
···
 		// Reset the input so the same file can be selected again
 		target.value = '';
 	}
+
+	$inspect(items);
 </script>
 
 <svelte:body

src/routes/api/image-proxy/+server.ts

···
+import { error } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+	const imageUrl = url.searchParams.get('url');
+	if (!imageUrl) {
+		throw error(400, 'No URL provided');
+	}
+
+	try {
+		new URL(imageUrl);
+	} catch {
+		throw error(400, 'Invalid URL');
+	}
+
+	try {
+		const response = await fetch(imageUrl);
+
+		if (!response.ok) {
+			throw error(response.status, 'Failed to fetch image');
+		}
+
+		const contentType = response.headers.get('content-type');
+
+		// Only allow image content types
+		if (!contentType?.startsWith('image/')) {
+			throw error(400, 'URL does not point to an image');
+		}
+
+		const blob = await response.blob();
+
+		return new Response(blob, {
+			headers: {
+				'Content-Type': contentType,
+				'Cache-Control': 'public, max-age=86400'
+			}
+		});
+	} catch (err) {
+		if (err && typeof err === 'object' && 'status' in err) {
+			throw err;
+		}
+		console.error('Error proxying image:', err);
+		throw error(500, 'Failed to proxy image');
+	}
+}