small fixes, test youtube card

package.json

···
 		"gsap": "^3.14.2",
 		"link-preview-js": "^4.0.0",
 		"marked": "^15.0.11",
+		"plyr": "^3.8.4",
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",

pnpm-lock.yaml

···
       marked:
         specifier: ^15.0.11
         version: 15.0.11
+      plyr:
+        specifier: ^3.8.4
+        version: 3.8.4
       svelte-sonner:
         specifier: ^1.0.7
         version: 1.0.7(svelte@5.45.8)

src/lib/EditableWebsite.svelte

···
 <script lang="ts">
 	import { client, login } from '$lib/oauth/auth.svelte.js';
 
-	import { Navbar, Button, toast, Toaster, Toggle } from '@foxui/core';
+	import { Navbar, Button, toast, Toaster, Toggle, Sidebar } from '@foxui/core';
 	import { BlueskyLogin } from '@foxui/social';
 
 	import { margin, mobileMargin } from '$lib';
···
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { TID } from '@atproto/common-web';
 	import EditingCard from './cards/Card/EditingCard.svelte';
-	import { CardDefinitionsByType } from './cards';
+	import { AllCardDefinitions, CardDefinitionsByType } from './cards';
 	import { tick, type Component } from 'svelte';
 	import type { CreationModalComponentProps } from './cards/types';
 	import { dev } from '$app/environment';
···
 	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0));
 
 	function newCard(type: string = 'link') {
+		// close sidebar if open
+		const popover = document.getElementById('mobile-menu');
+		if (popover) {
+			popover.hidePopover();
+		}
+
 		let item: Item = {
 			id: TID.nextStr(),
 			x: 0,
···
 			description: 'Your website has been saved!'
 		});
 	}
+
+	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarComponent);
 </script>
 
 {#if !dev}
···
 	</div>
 </div>
 
+<Sidebar mobileOnly mobileClasses="lg:block">
+	{#each sidebarItems as cardDef}
+		<cardDef.sidebarComponent onclick={() => newCard(cardDef.type)} />
+	{/each}
+</Sidebar>
+
 {#if (!client.isLoggedIn && !client.isInitializing) || client.profile?.did === did}
 	<Navbar
 		class={[
···
 					/>
 				</svg>
 			</Button>
+
+			{#if dev}
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					popovertarget="mobile-menu"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+					</svg>
+				</Button>
+			{/if}
 
 			<!-- for special stuff -->
 			{#if handle === 'blento.app'}

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

···
 			class=" hover:bg-base-200 dark:hover:bg-base-800 mb-4 flex h-fit min-w-24 flex-col items-center justify-center gap-2 rounded-xl p-2"
 			target="_blank"
 		>
-			<div class="font-semibold">{profile.displayName || profile.handle}</div>
+			<div class="font-semibold line-clamp-2">{profile.displayName || profile.handle}</div>
 			<img src={profile.avatar} class="aspect-square size-20 rounded-full" alt="" />
 		</a>
 	{/each}

src/lib/cards/YoutubeVideo/CreateYoutubeCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { matcher } from '.';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isFetchingMetadata = $state(false);
+
+	let errorMessage = $state('');
+
+	const idRegExp = /^[A-Za-z0-9-_]+$/;
+
+	function extractID(idOrUrl: string) {
+		if (idRegExp.test(idOrUrl)) return idOrUrl;
+		return matcher(idOrUrl);
+	}
+
+	async function fetchMetadata() {
+		errorMessage = '';
+
+		const videoid = extractID(item.cardData.href);
+		if (!videoid) {
+			errorMessage = 'Not a valid youtube URL!';
+			return false;
+		}
+		const posterFile = 'hqdefault';
+		const posterURL = `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`;
+
+		item.cardData.poster = posterURL;
+		item.cardData.youtubeId = videoid;
+
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Enter a link to a youtube video</Subheading>
+	<Input bind:value={item.cardData.href} />
+
+	{#if errorMessage}
+		<Alert type="error" title="Failed to create youtube card"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			disabled={isFetchingMetadata}
+			onclick={async () => {
+				if (await fetchMetadata()) oncreate();
+			}}>{isFetchingMetadata ? 'Creating...' : 'Create'}</Button
+		>
+	</div>
+</Modal>

src/lib/cards/YoutubeVideo/EditingYoutubeCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import BaseEditingCard, { type BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
+	import { videoPlayer } from '../utils/YoutubeVideoPlayer.svelte';
+
+	let { item = $bindable<Item>(), ...rest }: BaseEditingCardProps = $props();
+</script>
+
+<BaseEditingCard {item} {...rest}>
+	<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.poster}
+		alt=""
+	/>
+	<button
+		onclick={() => {
+			videoPlayer.show(item.cardData.youtubeId);
+		}}
+		class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center"
+	>
+		<span class="sr-only">
+			{item.cardData.hrefText ?? 'Learn more'}
+		</span>
+
+		<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 w-14" viewBox="0 0 256 180"
+			><path
+				fill="currentColor"
+				d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+			/><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
+		>
+	</button>
+</BaseEditingCard>

src/lib/cards/YoutubeVideo/SidebarItemYoutubeCard.svelte

···
+<script lang="ts">
+	let { onclick }: { onclick: () => void } = $props();
+</script>
+
+<button {onclick}> Youtube Video </button>

src/lib/cards/YoutubeVideo/YoutubeCard.svelte

···
+<script lang="ts">
+	import { marked } from 'marked';
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
+	import { videoPlayer } from '../utils/YoutubeVideoPlayer.svelte';
+
+	let { item, ...rest }: BaseCardProps = $props();
+
+	const renderer = new marked.Renderer();
+	renderer.link = ({ href, title, text }) =>
+		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+</script>
+
+<BaseCard {item} {...rest}>
+	<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.poster}
+		alt=""
+	/>
+	<button
+		onclick={() => {
+			videoPlayer.show(item.cardData.youtubeId);
+		}}
+		class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center"
+	>
+		<span class="sr-only">
+			{item.cardData.hrefText ?? 'Learn more'}
+		</span>
+
+		<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 w-14" viewBox="0 0 256 180"
+			><path
+				fill="currentColor"
+				d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+			/><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
+		>
+	</button></BaseCard
+>

src/lib/cards/YoutubeVideo/index.ts

···
+import type { CardDefinition } from '../types';
+import CreateYoutubeCardModal from './CreateYoutubeCardModal.svelte';
+import EditingYoutubeCard from './EditingYoutubeCard.svelte';
+import SidebarItemYoutubeCard from './SidebarItemYoutubeCard.svelte';
+import YoutubeCard from './YoutubeCard.svelte';
+
+export const YoutubeCardDefinition = {
+	type: 'youtubeVideo',
+	cardComponent: YoutubeCard,
+	editingCardComponent: EditingYoutubeCard,
+	creationModalComponent: CreateYoutubeCardModal,
+	createNew: (card) => {
+		card.cardType = 'youtubeVideo';
+		card.cardData = {};
+		card.w = 2;
+		card.mobileW = 4;
+	},
+	sidebarComponent: SidebarItemYoutubeCard
+} as CardDefinition & { type: 'youtubeVideo' };
+
+// Thanks to eleventy-plugin-youtube-embed
+// https://github.com/gfscott/eleventy-plugin-youtube-embed/blob/main/lib/extractMatches.js
+const urlPattern =
+	/(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+
+/**
+ * Extract a YouTube ID from a URL if it matches the pattern.
+ * @param url URL to test
+ * @returns A YouTube video ID or undefined if none matched
+ */
+export function matcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match?.[3];
+}

src/lib/cards/index.ts

···
 import { UpdatedBlentosCardDefitition } from './SpecialCards/UpdatedBlentos';
 import { TextCardDefinition } from './TextCard';
 import type { CardDefinition } from './types';
+import { YoutubeCardDefinition } from './YoutubeVideo';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
 	TextCardDefinition,
 	LinkCardDefinition,
-	UpdatedBlentosCardDefitition
+	UpdatedBlentosCardDefitition,
+	YoutubeCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/types.ts

···
 	onCancel: () => void;
 };
 
+export type SidebarComponentProps = {
+	onclick: () => void;
+};
+
 export type CardDefinition = {
 	cardComponent: Component<BaseCardProps>;
 	editingCardComponent: Component<BaseEditingCardProps>;
···
 	}>;
 
 	upload?: (item: Item) => Promise<Item>;
+
+	sidebarComponent?: Component<SidebarComponentProps>;
 };

src/lib/cards/utils/YoutubeVideoPlayer.svelte

···
+<script lang="ts" module>
+	export const videoPlayer: {
+		id: string | undefined;
+
+		show: (id: string) => void;
+		hide: () => void;
+	} = $state({
+		id: undefined,
+
+		show: (id: string) => {
+			videoPlayer.id = id;
+		},
+
+		hide: () => {
+			videoPlayer.id = undefined;
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import { onMount } from 'svelte';
+
+	const { class: className }: { class?: string } = $props();
+
+	let Plyr = $state();
+
+	onMount(async () => {
+		if (!Plyr) Plyr = (await import('plyr')).default;
+
+		const player = new Plyr('.js-player', {
+			settings: ['captions', 'quality', 'loop', 'speed'],
+			controls: [
+				'play-large',
+				'play',
+				'progress',
+				'current-time',
+				'volume',
+				'settings',
+				'download',
+				'fullscreen'
+			]
+		});
+
+		// set the video player to the id
+		if (videoPlayer.id) {
+			player.source = {
+				type: 'video',
+				sources: [
+					{
+						src: videoPlayer.id,
+						type: 'video/youtube'
+					}
+				]
+			};
+		}
+
+		// when loaded play the video and go fullscreen
+		player.on('ready', () => {
+			player.play();
+			//player.fullscreen.enter();
+		});
+
+		return () => {
+			player.destroy();
+		};
+	});
+
+	let glow = 50;
+</script>
+
+<svelte:head>
+	{#if videoPlayer.id}
+		<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+	{/if}
+</svelte:head>
+
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			videoPlayer.hide();
+		}
+	}}
+/>
+
+{#key videoPlayer.id}
+	{#if videoPlayer.id}
+		<div class="fixed inset-0 z-[100] flex h-screen w-screen items-center justify-center">
+			<button
+				onclick={() => videoPlayer.hide()}
+				class="absolute inset-0 bg-black/70 backdrop-blur-sm"
+			>
+				<span class="sr-only">Close</span>
+			</button>
+
+			<div
+				class={cn(
+					'relative mx-4 aspect-video max-h-screen w-full overflow-hidden rounded-xl border border-black bg-white object-cover sm:mx-20 dark:border-white/10 dark:bg-white/5',
+					className
+				)}
+				style="filter: url(#blur); width: 100%;"
+			>
+				<div class="">
+					<div
+						id="player"
+						class="h-full w-full overflow-hidden rounded-xl object-cover font-semibold text-black dark:text-white"
+					>
+						<div
+							class="js-player plyr__video-embed"
+							id="player"
+							data-plyr-provider="youtube"
+							data-plyr-embed-id={videoPlayer.id}
+						></div>
+					</div>
+				</div>
+			</div>
+
+			<button
+				onclick={() => {
+					videoPlayer.hide();
+				}}
+				class="absolute top-2 right-2 z-20 rounded-full border border-white/10 bg-white/5 p-2 backdrop-blur-sm"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					class="size-6"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+
+				<span class="sr-only">Close</span>
+			</button>
+		</div>
+	{/if}
+{/key}
+
+<svg width="0" height="0">
+	<filter id="blur" y="-50%" x="-50%" width="300%" height="300%">
+		<feGaussianBlur in="SourceGraphic" stdDeviation={50} result="blurred" />
+		<feColorMatrix type="saturate" in="blurred" values="3" />
+		<feComposite in="SourceGraphic" operator="over" />
+	</filter>
+</svg>
+
+<style>
+	* {
+		--plyr-color-main: var(--color-accent-500);
+	}
+</style>

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
-	
+
 	import { ThemeToggle } from '@foxui/core';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/oauth';
+	import YoutubeVideoPlayer, { videoPlayer } from '$lib/cards/utils/YoutubeVideoPlayer.svelte';
 
 	let { children } = $props();
 
···
 		initClient();
 	});
 </script>
-
 
 {@render children()}
 
 <ThemeToggle class="fixed top-2 left-2 z-10" />
+
+{#if videoPlayer.id}
+	<YoutubeVideoPlayer />
+{/if}

todo.md

···
 - video card
 - edit already created cards (e.g. change link)
 - link card: save favicon and og image to pds
+- more cards list
+- paste handler for card creation
+- text cards: align text top middle bottom and left center right
 - more cards:
     - instagram
     - github
···
     - bluesky post (fixed or latest)
     - social accounts card (multiple)
     - cartoons: aka https://www.opendoodles.com/
+    - excalidraw
     - map
     - youtube video
     - youtube channel
     - guestbook
+
 - other atproto apps
     - leaflet
     - skywatched
+    - teal.fm
+    - tangled.sh
+    - popfeed.social
+    - smoke signal
+    - statusphere.xyz
+- add some caching to user data
 
 - image cards: different images for dark and light mode
-
 
 - allow setting custom base and accent color
-- allow changing avatar and description to be different than bluesky
+- allow changing avatar and description to be different than bluesky
+- allow adding background image
+- borderless cards