add first version of bluesky media card

src/lib/EditableWebsite.svelte

···
 				></div>
 			{/if}
 
-			{#if dev}
-				<div
-					class="absolute size-4 rounded-full bg-red-500"
-					style={`translate: ${debugPoint.x}px ${debugPoint.y}px;`}
-				></div>
-			{/if}
 			<div style="height: {((maxHeight + 2) / 8) * 100}cqw;"></div>
 		</div>
 	</div>

src/lib/cards/BaseCard/BaseCard.svelte

···
 	--columns: ${COLUMNS}`}
 	{...rest}
 >
-	<div class="relative h-full w-full overflow-hidden rounded-[15px]">
+	<div class="relative h-full w-full overflow-hidden rounded-[15px] isolate">
 		{@render children?.()}
 	</div>
 	{@render controls?.()}

src/lib/cards/BlueskyMediaCard/BlueskyMediaCard.svelte

···
+<script lang="ts">
+	import { getDidContext } from '$lib/website/context';
+	import { getImageBlobUrl } from '$lib/website/utils';
+	import type { ContentComponentProps } from '../types';
+	import Video from './Video.svelte';
+
+	let { item = $bindable(), ...rest }: 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, link: item.cardData.image?.ref?.$link });
+		}
+		return item.cardData.image;
+	}
+
+	$inspect(item.cardData);
+</script>
+
+{#if item.cardData.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:scale-102' : ''
+		]}
+		src={item.cardData.image.fullsize}
+		alt=""
+	/>
+{:else if item.cardData.video}
+	<Video video={item.cardData.video} />
+{/if}
+{#if item.cardData.href}
+	<a
+		href={item.cardData.href}
+		class="absolute inset-0 z-10 h-full w-full"
+		target="_blank"
+		rel="noopener noreferrer"
+	>
+		<span class="sr-only">
+			{item.cardData.hrefText ?? 'Learn more'}
+		</span>
+
+		<div
+			class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="2.5"
+				stroke="currentColor"
+				class="size-4"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+				/>
+			</svg>
+		</div>
+	</a>
+{/if}

src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Label, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { onMount } from 'svelte';
+	import { AtpBaseClient } from '@atproto/api';
+	import { getDidContext } from '$lib/website/context';
+	import { getImageBlobUrl } from '$lib/website/utils';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let did = getDidContext();
+
+	let mediaList: { fullsize: string; isVideo?: boolean; playlist?: string }[] = $state([]);
+
+	onMount(async () => {
+		const agent = new AtpBaseClient({ service: 'https://api.bsky.app' });
+		const authorFeed = await agent.app.bsky.feed.getAuthorFeed({
+			actor: did,
+			filter: 'posts_with_media',
+			limit: 100
+		});
+
+		console.log(authorFeed);
+
+		for (let post of authorFeed.data.feed) {
+			for (let image of post.post.embed?.images ?? []) {
+				mediaList.push(image);
+			}
+
+			if (post.post.embed.thumbnail && post.post.embed.playlist) {
+				mediaList.push({
+					...post.post.embed,
+					isVideo: true
+				});
+			}
+		}
+	});
+
+	let selected = $state();
+</script>
+
+<Modal
+	bind:open={
+		() => true,
+		(change) => {
+			if (!change) oncancel();
+		}
+	}
+	closeButton={false}
+	class="flex max-h-screen flex-col"
+>
+	<Subheading>Select an image or video</Subheading>
+
+	<div
+		class="bg-base-100 dark:bg-base-950 grid h-[50dvh] grow grid-cols-3 gap-4 overflow-y-scroll rounded-2xl p-4"
+	>
+		{#each mediaList as media}
+			<button
+				onclick={() => {
+					console.log(media);
+					selected = media;
+					if (media.isVideo) {
+						item.cardData = {
+							video: media
+						};
+					} else item.cardData.image = media;
+				}}
+				class="relative cursor-pointer"
+			>
+				<img
+					src={media.fullsize ?? media.thumbnail}
+					alt=""
+					class={[
+						'h-24 w-full rounded-xl object-cover',
+						selected === media
+							? 'outline-accent-500 opacity-100 outline-2 -outline-offset-2'
+							: 'opacity-80'
+					]}
+				/>
+				{#if media.isVideo}
+					<div class="absolute inset-0 inline-flex items-center justify-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							class="text-accent-500 size-6"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+				{/if}
+			</button>
+		{/each}
+		{#if mediaList.length === 0}
+			<span class="col-span-3 p-4 text-lg italic">Loading your media...</span>{/if}
+	</div>
+
+	<Label class="mt-4">Link (optional):</Label>
+	<Input bind:value={item.cardData.href} />
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button
+			onclick={() => {
+				oncancel();
+			}}
+			variant="ghost">Cancel</Button
+		>
+		<Button
+			disabled={!selected}
+			onclick={async () => {
+				oncreate();
+			}}>Create</Button
+		>
+	</div>
+</Modal>

src/lib/cards/BlueskyMediaCard/Video.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Hls from 'hls.js';
+
+	const {
+		video
+	}: {
+		video: {
+			playlist: string;
+			thumbnail: string;
+			alt: string;
+		};
+	} = $props();
+
+	onMount(async () => {
+		if (Hls.isSupported()) {
+			var hls = new Hls();
+			hls.loadSource(video.playlist);
+			hls.attachMedia(element);
+		}
+
+		element.play();
+	});
+
+	let element: HTMLMediaElement;
+</script>
+
+<img src={video.thumbnail} class="absolute inset-0 -z-10 h-full w-full object-cover" alt="" />
+<!-- svelte-ignore a11y_media_has_caption -->
+<video
+	bind:this={element}
+	muted
+	loop
+	autoplay
+	class="absolute inset-0 h-full w-full object-cover"
+	aria-label={video.alt}
+></video>

src/lib/cards/BlueskyMediaCard/index.ts

···
+import type { CardDefinition } from '../types';
+import BlueskyMediaCard from './BlueskyMediaCard.svelte';
+import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
+
+export const BlueskyMediaCardDefinition = {
+	type: 'blueskyMedia',
+	contentComponent: BlueskyMediaCard,
+	createNew: (card) => {},
+	creationModalComponent: CreateBlueskyMediaCardModal,
+	sidebarButtonText: 'Bluesky Media'
+} as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/MapCard/Map.svelte

···
 
 	onMount(async () => {
 		try {
-			console.log(`Loading map...`);
-
 			// @ts-ignore
 			leaflet = await import('leaflet');
 
···
 				!item.color || item.color === 'transparent' || item.color === 'base'
 					? 'accent'
 					: item.color;
-
-			console.log(color);
 
 			const computedColor = getCSSVar(`--color-${color}-500`);
 

src/lib/cards/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte

···
 
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
-	const profiles = (data[item.cardType] as ProfileViewDetailed[]);
+	const profiles = (data[item.cardType] as ProfileViewDetailed[]).splice(20);
 </script>
 
 <div class="pointer-events-none">

src/lib/cards/SpecialCards/UpdatedBlentos/index.ts

···
 			}
 
 			const result = [...(await Promise.all(profiles)), ...existingUsersArray];
-			result.splice(20);
 
 			if (platform?.env?.USER_DATA_CACHE) {
 				await platform?.env?.USER_DATA_CACHE.put('updatedBlentos', JSON.stringify(result));

src/lib/cards/index.ts

···
 import type { Item } from '$lib/types';
 import { ATProtoCollectionsCardDefinition } from './ATProtoCollectionsCard';
+import { BlueskyMediaCardDefinition } from './BlueskyMediaCard';
 import { BlueskyPostCardDefinition } from './BlueskyPostCard';
 import { EmbedCardDefinition } from './EmbedCard';
 import { ImageCardDefinition } from './ImageCard';
···
 	EmbedCardDefinition,
 	MapCardDefinition,
 	ATProtoCollectionsCardDefinition,
-	SectionCardDefinition
+	SectionCardDefinition,
+	BlueskyMediaCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

todo.md

···
 # todo
 
-- video card
+- video card or image from bluesky
+- general video card
 - edit already created cards (e.g. change link)
 - link card: save favicon and og image to pds
 - [x] more cards list