johnandersen777.bsky.social/knotless

Switch repository

Loading…

<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';
	import Icon from '#lib/atoms/Icon.svelte';
	/**
	 * A round mark: the picture at `src`, or else a pattern in a color that
	 * `did` picks, the account's own wherever it shows, or `name` for one
	 * with no account. An account that says it is a bot (`bot`) wears a
	 * robot on its corner, the one `.av` holding the picture and the robot.
	 */
	let {
		name,
		did,
		size,
		src,
		bot
	}: {
		name: string;
		did?: string;
		size?: 'lg' | 'xl';
		src?: string | null;
		bot?: boolean;
	} = $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));
</script>

{#snippet pattern()}{#each identicon(seed) as [x, y] (`${x},${y}`)}<rect
			{x}
			{y}
			width="1"
			height="1"
		/>{/each}{/snippet}

{#if bot}<span
		class="{cls} bot{shown ? '' : ' id'}"
		style={shown ? undefined : `--h:${hue(seed)}`}
		title="Bot"
		>{#if shown}<img src={shown} alt="" />{:else}<svg
				viewBox="-1 -1 7 7"
				shape-rendering="crispEdges"
				aria-hidden="true">{@render pattern()}</svg
			>{/if}<span class="av-badge"><Icon name="bot" /></span></span
	>{:else if shown}<img class={cls} src={shown} alt="" />{:else}<svg
		class="{cls} id"
		style="--h:{hue(seed)}"
		viewBox="-1 -1 7 7"
		shape-rendering="crispEdges"
		aria-hidden="true">{@render pattern()}</svg
	>{/if}