chadtmiller.com/knotless

Switch repository

Loading…

git that lives in your Atmosphere account

knotless 0.13.0 Latest 2 packages, 1 image

Avatars drawn small load Bluesky's thumbnail, not the full picture

Merged chadtmiller.com asked to merge into main from chadtmiller.com/knotless:web/avatar-thumbnails

web/src/lib/atoms/Avatar.svelte+10−1

		@@ -1,3 +1,10 @@
		`<script module lang="ts">`
		`/** Where Bluesky's CDN serves a profile picture at full size. */`
		`const BLUESKY_AVATAR = /^https:\/\/cdn\.bsky\.app\/img\/avatar\//;`
		`/** Where it serves the same picture 128px across. */`
		`const THUMBNAIL = 'https://cdn.bsky.app/img/avatar_thumbnail/';`
		`</script>`

		`<script lang="ts">`
		`import { hue, identicon } from '#lib/format.ts';`
		`/**`
		@@ -13,9 +20,11 @@
		`}: { name: string; did?: string; size?: 'lg' \| 'xl'; src?: string \| null } = $props();`
		let cls = $derived(size ? `av ${size}` : 'av');
		`const seed = $derived(did ?? name);`
		`/** The thumbnail wherever it is drawn small: a twentieth of the bytes. */`
		`const shown = $derived(size === 'xl' ? src : src?.replace(BLUESKY_AVATAR, THUMBNAIL));`
web/src/lib/atoms/Avatar.svelteline 24 review.knotless.dev 4 days ago `lg` (88px) on a 2x screen wants ~176px, more than the 128px thumbnail gives. Consider excluding `lg` too if the settings header looks soft.
		`</script>`

		`{#if src}<img class={cls} {src} alt="" />{:else}<svg`
		`{#if shown}<img class={cls} src={shown} alt="" />{:else}<svg`
		`class="{cls} id"`
		`style="--h:{hue(seed)}"`
		`viewBox="-1 -1 7 7"`