small fixes

docs/Beta.md

···
+# Todo for beta
+
+- opengraph stuff
+
+  - title, description
+  - fix opengraph image stuff
+
+- site.standard
+
+  - move subpages to own lexicon
+  - move description to markdownDescription and set description as text only
+  - implement verification
+
+- fix recent blentos only showing the last ~5
+
+- card with big call to action button
+
+- link card: save favicon and og image as blobs
+
+- video card
+
+-

src/lib/cards/ImageCard/CreateImageCardModal.svelte

···
 <script lang="ts">
 	import { Button, Input, Label, Modal, Subheading } from '@foxui/core';
 	import type { CreationModalComponentProps } from '../types';
+	import { compressImage } from '$lib/helper';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
 
···
 
 		item.cardData.blob = compressedFile;
 		item.cardData.objectUrl = URL.createObjectURL(compressedFile);
-	}
-
-	export function compressImage(file: File, maxSize: number = 600 * 1024): Promise<Blob> {
-		return new Promise((resolve, reject) => {
-			const img = new Image();
-			const reader = new FileReader();
-
-			reader.onload = (e) => {
-				if (!e.target?.result) {
-					return reject(new Error('Failed to read file.'));
-				}
-				img.src = e.target.result as string;
-			};
-
-			reader.onerror = (err) => reject(err);
-			reader.readAsDataURL(file);
-
-			img.onload = () => {
-				let width = img.width;
-				let height = img.height;
-				const maxDimension = 2048;
-
-				if (width > maxDimension || height > maxDimension) {
-					if (width > height) {
-						height = Math.round((maxDimension / width) * height);
-						width = maxDimension;
-					} else {
-						width = Math.round((maxDimension / height) * width);
-						height = maxDimension;
-					}
-				}
-
-				// Create a canvas to draw the image
-				const canvas = document.createElement('canvas');
-				canvas.width = width;
-				canvas.height = height;
-				const ctx = canvas.getContext('2d');
-				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;
-				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',
-						quality
-					);
-				}
-
-				attemptCompression();
-			};
-
-			img.onerror = (err) => reject(err);
-		});
 	}
 
 	let inputRef = $state<HTMLInputElement | null>(null);

src/lib/components/ImageDropper.svelte

···
 <script lang="ts">
 	import { Portal } from 'bits-ui';
 
-	let isDragOver = $state(false);
-
 	let {
-		processImageFile
+		processImageFile,
+		isDragOver = $bindable()
 	}: {
 		processImageFile: (file: File) => Promise<void>;
+		isDragOver: boolean;
 	} = $props();
 
 	function handleDragOver(event: DragEvent) {

src/lib/helper.ts

···
 	return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
 };
 
-export function fixCollisions(items: Item[], movedItem: Item, mobile: boolean = false, skipCompact: boolean = false) {
+export function fixCollisions(
+	items: Item[],
+	movedItem: Item,
+	mobile: boolean = false,
+	skipCompact: boolean = false
+) {
 	const clampX = (item: Item) => {
 		if (mobile) item.mobileX = clamp(item.mobileX, 0, COLUMNS - item.mobileW);
 		else item.x = clamp(item.x, 0, COLUMNS - item.w);
···
 		}
 	}
 }
+
+export function compressImage(file: File, maxSize: number = 900 * 1024): Promise<Blob> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			if (!e.target?.result) {
+				return reject(new Error('Failed to read file.'));
+			}
+			img.src = e.target.result as string;
+		};
+
+		reader.onerror = (err) => reject(err);
+		reader.readAsDataURL(file);
+
+		img.onload = () => {
+			let width = img.width;
+			let height = img.height;
+			const maxDimension = 2048;
+
+			if (width > maxDimension || height > maxDimension) {
+				if (width > height) {
+					height = Math.round((maxDimension / width) * height);
+					width = maxDimension;
+				} else {
+					width = Math.round((maxDimension / height) * width);
+					height = maxDimension;
+				}
+			}
+
+			// Create a canvas to draw the image
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext('2d');
+			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;
+			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',
+					quality
+				);
+			}
+
+			attemptCompression();
+		};
+
+		img.onerror = (err) => reject(err);
+	});
+}

src/lib/website/EditableWebsite.svelte

···
 		Sidebar,
 		Popover,
 		Input,
-		Label
 	} from '@foxui/core';
 	import { BlueskyLogin } from '@foxui/social';