Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
TypeScript
at update-docs
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733import type { Item, WebsiteData } from './types';import { COLUMNS, margin, mobileMargin } from '$lib';import { CardDefinitionsByType } from './cards';import { deleteRecord, getCDNImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';import * as TID from '@atcute/tid';
export function clamp(value: number, min: number, max: number): number { return Math.min(Math.max(value, min), max);}
export const colors = [ 'bg-red-500', 'bg-orange-500', 'bg-amber-500', 'bg-yellow-500', 'bg-lime-500', 'bg-green-500', 'bg-emerald-500', 'bg-teal-500', 'bg-cyan-500', 'bg-sky-500', 'bg-blue-500', 'bg-indigo-500', 'bg-violet-500', 'bg-purple-500', 'bg-fuchsia-500', 'bg-pink-500', 'bg-rose-500'];
export const overlaps = (a: Item, b: Item, mobile: boolean = false) => { if (a === b) return false; if (mobile) { return ( a.mobileX < b.mobileX + b.mobileW && a.mobileX + a.mobileW > b.mobileX && a.mobileY < b.mobileY + b.mobileH && a.mobileY + a.mobileH > b.mobileY ); } 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) { 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); };
// Push `target` down until it no longer overlaps with any item (including movedItem), // while keeping target.x fixed. Any item we collide with gets pushed down first (cascade). const pushDownCascade = (target: Item, blocker: Item) => { // Keep x fixed always when pushing down const fixedX = mobile ? target.mobileX : target.x; const prevY = mobile ? target.mobileY : target.y;
// We need target to move just below `blocker` const desiredY = mobile ? blocker.mobileY + blocker.mobileH : blocker.y + blocker.h; if (!mobile && target.y < desiredY) target.y = desiredY; if (mobile && target.mobileY < desiredY) target.mobileY = desiredY;
const newY = mobile ? target.mobileY : target.y; const targetH = mobile ? target.mobileH : target.h;
// fall trough fix if (newY > prevY) { const prevBottom = prevY + targetH; const newBottom = newY + targetH; for (const it of items) { if (it === target || it === movedItem || it === blocker) continue; const itY = mobile ? it.mobileY : it.y; const itH = mobile ? it.mobileH : it.h; const itBottom = itY + itH; if (itBottom <= prevBottom || itY >= newBottom) continue; // horizontal overlap check const hOverlap = mobile ? target.mobileX < it.mobileX + it.mobileW && target.mobileX + target.mobileW > it.mobileX : target.x < it.x + it.w && target.x + target.w > it.x; if (hOverlap) { pushDownCascade(it, target); } } }
// Now resolve any collisions that creates by pushing those items down first // Repeat until target is clean. while (true) { const hit = items.find((it) => it !== target && overlaps(target, it, mobile)); if (!hit) break;
// push the hit item down first (cascade), keeping its x fixed pushDownCascade(hit, target);
// after moving the hit item, target.x must remain fixed if (mobile) target.mobileX = fixedX; else target.x = fixedX; } };
// Ensure moved item is in bounds clampX(movedItem);
// Find all items colliding with movedItem, and push them down in a stable order: // top-to-bottom so you get the nice chain reaction (0,0 -> 0,1 -> 0,2). const colliders = items .filter((it) => it !== movedItem && overlaps(movedItem, it, mobile)) .toSorted((a, b) => mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x );
for (const it of colliders) { // keep x clamped, but do NOT change x during push (we rely on fixed x) clampX(it);
// push it down just below movedItem; cascade handles the rest pushDownCascade(it, movedItem);
// enforce "x stays the same" during pushing (clamp already applied) if (mobile) it.mobileX = clamp(it.mobileX, 0, COLUMNS - it.mobileW); else it.x = clamp(it.x, 0, COLUMNS - it.w); }
if (!skipCompact) { compactItems(items, mobile); }}
// Fix all collisions between items (not just one moved item)// Items higher on the page have priority and stay in placeexport function fixAllCollisions(items: Item[], mobile: boolean = false) { // Sort by Y position (top-to-bottom, then left-to-right) // Items at the top have priority and won't be moved const sortedItems = items.toSorted((a, b) => mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x );
// Process each item and push it down if it overlaps with any item above it for (let i = 0; i < sortedItems.length; i++) { const item = sortedItems[i];
// Clamp X to valid range if (mobile) { item.mobileX = clamp(item.mobileX, 0, COLUMNS - item.mobileW); } else { item.x = clamp(item.x, 0, COLUMNS - item.w); }
// Check for collisions with all items that come before (higher priority) let hasCollision = true; while (hasCollision) { hasCollision = false; for (let j = 0; j < i; j++) { const other = sortedItems[j]; if (overlaps(item, other, mobile)) { // Push item down below the colliding item if (mobile) { item.mobileY = other.mobileY + other.mobileH; } else { item.y = other.y + other.h; } hasCollision = true; break; // Restart collision check from the beginning } } } }
compactItems(items, mobile);}
// Move all items up as far as possible without collisionsexport function compactItems(items: Item[], mobile: boolean = false) { // Sort by Y position (top-to-bottom) so upper items settle first. const sortedItems = items.toSorted((a, b) => mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x );
for (const item of sortedItems) { // Try moving item up row by row until we hit y=0 or a collision while (true) { const currentY = mobile ? item.mobileY : item.y; if (currentY <= 0) break;
// Temporarily move up by 1 if (mobile) item.mobileY -= 1; else item.y -= 1;
// Check for collision with any other item const hasCollision = items.some((other) => other !== item && overlaps(item, other, mobile));
if (hasCollision) { // Revert the move if (mobile) item.mobileY += 1; else item.y += 1; break; } // No collision, keep the new position and try moving up again } }}
// Simulate where an item would end up after fixCollisions + compactionexport function simulateFinalPosition( items: Item[], movedItem: Item, newX: number, newY: number, mobile: boolean = false): { x: number; y: number } { // Deep clone positions for simulation const clonedItems: Item[] = items.map((item) => ({ ...item, x: item.x, y: item.y, mobileX: item.mobileX, mobileY: item.mobileY }));
const clonedMovedItem = clonedItems.find((item) => item.id === movedItem.id); if (!clonedMovedItem) return { x: newX, y: newY };
// Set the new position if (mobile) { clonedMovedItem.mobileX = newX; clonedMovedItem.mobileY = newY; } else { clonedMovedItem.x = newX; clonedMovedItem.y = newY; }
// Run fixCollisions on the cloned data fixCollisions(clonedItems, clonedMovedItem, mobile);
// Return the final position of the moved item return mobile ? { x: clonedMovedItem.mobileX, y: clonedMovedItem.mobileY } : { x: clonedMovedItem.x, y: clonedMovedItem.y };}
export function sortItems(a: Item, b: Item) { return a.y * COLUMNS + a.x - b.y * COLUMNS - b.x;}
export function cardsEqual(a: Item, b: Item) { return ( a.id === b.id && a.cardType === b.cardType && JSON.stringify(a.cardData) === JSON.stringify(b.cardData) && a.w === b.w && a.h === b.h && a.mobileW === b.mobileW && a.mobileH === b.mobileH && a.x === b.x && a.y === b.y && a.mobileX === b.mobileX && a.mobileY === b.mobileY && a.color === b.color && a.page === b.page );}
export function setPositionOfNewItem( newItem: Item, items: Item[], viewportCenter?: { gridY: number; isMobile: boolean }) { if (viewportCenter) { const { gridY, isMobile } = viewportCenter;
if (isMobile) { // Place at viewport center Y newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2)); newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2;
// Try to find a free X at this Y let found = false; for ( newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 2 ) { if (!items.some((item) => overlaps(newItem, item, true))) { found = true; break; } } if (!found) { newItem.mobileX = 0; }
// Desktop: derive from mobile newItem.y = Math.max(0, Math.round(newItem.mobileY / 2)); found = false; for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { if (!items.some((item) => overlaps(newItem, item, false))) { found = true; break; } } if (!found) { newItem.x = 0; } } else { // Place at viewport center Y newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2));
// Try to find a free X at this Y let found = false; for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { if (!items.some((item) => overlaps(newItem, item, false))) { found = true; break; } } if (!found) { newItem.x = 0; }
// Mobile: derive from desktop newItem.mobileY = Math.max(0, Math.round(newItem.y * 2)); found = false; for ( newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 2 ) { if (!items.some((item) => overlaps(newItem, item, true))) { found = true; break; } } if (!found) { newItem.mobileX = 0; } } return; }
let foundPosition = false; while (!foundPosition) { for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { const collision = items.find((item) => overlaps(newItem, item)); if (!collision) { foundPosition = true; break; } } if (!foundPosition) newItem.y += 1; }
let foundMobilePosition = false; while (!foundMobilePosition) { for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 1) { const collision = items.find((item) => overlaps(newItem, item, true));
if (!collision) { foundMobilePosition = true; break; } } if (!foundMobilePosition) newItem.mobileY! += 1; }}
/** * Find a valid position for a new item in a single mode (desktop or mobile). * This modifies the item's position properties in-place. */export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) { if (mobile) { let foundPosition = false; newItem.mobileY = 0; while (!foundPosition) { for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) { const collision = items.find((item) => overlaps(newItem, item, true)); if (!collision) { foundPosition = true; break; } } if (!foundPosition) newItem.mobileY! += 1; } } else { let foundPosition = false; newItem.y = 0; while (!foundPosition) { for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { const collision = items.find((item) => overlaps(newItem, item, false)); if (!collision) { foundPosition = true; break; } } if (!foundPosition) newItem.y += 1; } }}
export async function refreshData(data: { updatedAt?: number; handle: string }) { const TEN_MINUTES = 10 * 60 * 1000; const now = Date.now();
if (now - (data.updatedAt || 0) > TEN_MINUTES) { try { await fetch('/' + data.handle + '/api/refresh'); console.log('successfully refreshed data', data.handle); } catch (error) { console.error('error refreshing data', error); } } else { console.log('data still fresh, skipping refreshing', data.handle); }}
export function getName(data: WebsiteData): string { return data.publication?.name || data.profile.displayName || data.handle;}
export function getDescription(data: WebsiteData): string { return data.publication?.description ?? data.profile.description ?? '';}
export function getHideProfileSection(data: WebsiteData): boolean { if (data?.publication?.preferences?.hideProfileSection !== undefined) return data?.publication?.preferences?.hideProfileSection;
if (data?.publication?.preferences?.hideProfile !== undefined) return data?.publication?.preferences?.hideProfile;
return data.page !== 'blento.self';}
export function getProfilePosition(data: WebsiteData): 'side' | 'top' { return data?.publication?.preferences?.profilePosition ?? 'side';}
export function isTyping() { const active = document.activeElement;
const isEditable = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || // @ts-expect-error this fine active?.isContentEditable;
return isEditable;}
export function validateLink( link: string | undefined, tryAdding: boolean = true): string | undefined { if (!link) return; try { new URL(link);
return link; } catch (e) { if (!tryAdding) return;
try { link = 'https://' + link; new URL(link);
return link; } catch (e) { return; } }}
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.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 = () => { 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;
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);
// 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 (blob.size <= maxSize || quality < 0.3) { resolve(blob); } else { quality -= 0.1; attemptCompression(); } }, 'image/webp', quality ); }
attemptCompression(); };
img.onerror = (err) => reject(err); });}
export async function savePage( data: WebsiteData, currentItems: Item[], originalPublication: string) { const promises = []; // find all cards that have been updated (where items differ from originalItems) for (let item of currentItems) { const originalItem = data.cards.find((i) => cardsEqual(i, item));
if (!originalItem) { console.log('updated or new item', item); item.updatedAt = new Date().toISOString(); // run optional upload function for this card type const cardDef = CardDefinitionsByType[item.cardType];
if (cardDef?.upload) { item = await cardDef?.upload(item); }
const parsedItem = JSON.parse(JSON.stringify(item));
parsedItem.page = data.page; parsedItem.version = 2;
promises.push( putRecord({ collection: 'app.blento.card', rkey: parsedItem.id, record: parsedItem }) ); } }
// delete items that are in originalItems but not in items for (const originalItem of data.cards) { const item = currentItems.find((i) => i.id === originalItem.id); if (!item) { console.log('deleting item', originalItem); promises.push(deleteRecord({ collection: 'app.blento.card', rkey: originalItem.id })); } }
if ( data.publication?.preferences?.hideProfile !== undefined && data.publication?.preferences?.hideProfileSection === undefined ) { data.publication.preferences.hideProfileSection = data.publication?.preferences?.hideProfile; }
if (!originalPublication || originalPublication !== JSON.stringify(data.publication)) { data.publication ??= { name: getName(data), description: getDescription(data), preferences: { hideProfileSection: getHideProfileSection(data) } };
if (!data.publication.url) { data.publication.url = 'https://blento.app/' + data.handle;
if (data.page !== 'blento.self') { data.publication.url += '/' + data.page.replace('blento.', ''); } } if (data.page !== 'blento.self') { promises.push( putRecord({ collection: 'app.blento.page', rkey: data.page, record: data.publication }) ); } else { promises.push( putRecord({ collection: 'site.standard.publication', rkey: data.page, record: data.publication }) ); }
console.log('updating or adding publication', data.publication); }
await Promise.all(promises);}
export function createEmptyCard(page: string) { return { id: TID.now(), x: 0, y: 0, w: 2, h: 2, mobileH: 4, mobileW: 4, mobileX: 0, mobileY: 0, cardType: '', cardData: {}, page } as Item;}
export function scrollToItem( item: Item, isMobile: boolean, container: HTMLDivElement | undefined, force: boolean = false) { // scroll to newly created card only if not fully visible const containerRect = container?.getBoundingClientRect(); if (!containerRect) return; const currentMargin = isMobile ? mobileMargin : margin; const currentY = isMobile ? item.mobileY : item.y; const currentH = isMobile ? item.mobileH : item.h; const cellSize = (containerRect.width - currentMargin * 2) / COLUMNS;
const cardTop = containerRect.top + currentMargin + currentY * cellSize; const cardBottom = containerRect.top + currentMargin + (currentY + currentH) * cellSize;
const isFullyVisible = cardTop >= 0 && cardBottom <= window.innerHeight;
if (!isFullyVisible || force) { const bodyRect = document.body.getBoundingClientRect(); const offset = containerRect.top - bodyRect.top; 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> | undefined, 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 getCDNImageBlobUrl({ did, blob: objectWithImage[key] }); } return objectWithImage[key];}