more cleanup etc

docs/Beta.md

···
 - allow setting base and accent color
 
 - edit link of image card
+
+- go straight to edit mode (and redirect to edit mode on succesfull login)
+
+- ask to fill with some default cards on page creation
+
+- share button (copy share link to blento, maybe post to bluesky?)
+
+- add icons to "change card to..." popover

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	class="scale-100 opacity-100 starting:scale-0 starting:opacity-0"
 	{...rest}
 >
+	<div class="absolute inset-0 cursor-grab"></div>
 	{@render children?.()}
 
 	{#snippet controls()}

src/lib/cards/BigSocialCard/SidebarItemBigSocialCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="currentColor"
-		class="text-accent-600 dark:text-accent-400"
-	>
-		<path
-			fill-rule="evenodd"
-			d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97ZM6.75 8.25a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H7.5Z"
-			clip-rule="evenodd"
-		/>
-	</svg>
-	Big Social Icon</Button
->

src/lib/cards/BigSocialCard/index.ts

···
 import type { CardDefinition } from '../types';
 import BigSocialCard from './BigSocialCard.svelte';
 import CreateBigSocialCardModal from './CreateBigSocialCardModal.svelte';
-import SidebarItemBigSocialCard from './SidebarItemBigSocialCard.svelte';
 
 export const BigSocialCardDefinition = {
 	type: 'bigsocial',
 	contentComponent: BigSocialCard,
 	creationModalComponent: CreateBigSocialCardModal,
-	sidebarComponent: SidebarItemBigSocialCard,
+
 	createNew: (card) => {
 		card.cardType = 'bigsocial';
 		card.cardData = {
···
 		card.mobileW = 4;
 		card.mobileH = 4;
 	},
+
 	canChange: (item) => {
 		const href = item.cardData?.href;
 		if (!href) return false;

src/lib/cards/EmbedCard/EmbedCard.svelte

···
 <script lang="ts">
+	import { getCanEdit } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();
+
+	let isEditing = getCanEdit()
 </script>
 
 <iframe
 	src={item.cardData.href}
 	sandbox="allow-scripts"
 	referrerpolicy="no-referrer"
-	class="absolute inset-0 h-full w-full"
+	class={["absolute inset-0 h-full w-full", isEditing() && "pointer-events-none"]}
 	title=""
 ></iframe>

src/lib/cards/EmbedCard/index.ts

···
 		card.h = 4;
 		card.mobileH = 8;
 		card.mobileW = 8;
-	}
+	},
+
+	canChange: (item) => Boolean(item.cardData.href),
+
+	change: (item) => {
+		return item;
+	},
+	name: 'Embed Card'
 } as CardDefinition & { type: 'embed' };

src/lib/cards/LivestreamCard/index.ts

···
 import { client } from '$lib/oauth';
 import { listRecords } from '$lib/oauth/atproto';
 import { getImageBlobUrl } from '$lib/oauth/utils';
-import EmbedCard from '../EmbedCard/EmbedCard.svelte';
 import type { CardDefinition } from '../types';
 import LivestreamCard from './LivestreamCard.svelte';
 import LivestreamEmbedCard from './LivestreamEmbedCard.svelte';

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/SidebarItemYoutubeCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-600 dark:text-accent-400 h-4" 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
-	>
-	Youtube Video Card
-</Button>

src/lib/cards/YoutubeVideo/index.ts

···
 import type { CardDefinition } from '../types';
-import CreateYoutubeCardModal from './CreateYoutubeCardModal.svelte';
-import SidebarItemYoutubeCard from './SidebarItemYoutubeCard.svelte';
 import YoutubeCard from './YoutubeCard.svelte';
 
 export const YoutubeCardDefinition = {
 	type: 'youtubeVideo',
 	contentComponent: YoutubeCard,
-	creationModalComponent: CreateYoutubeCardModal,
 	createNew: (card) => {
 		card.cardType = 'youtubeVideo';
 		card.cardData = {};
 		card.w = 4;
 		card.mobileW = 8;
 	},
-	sidebarComponent: SidebarItemYoutubeCard
+
+	onUrlHandler: (url, item) => {
+		const id = matcher(url);
+		if (!id) return;
+
+		const posterFile = 'hqdefault';
+		const posterURL = `https://i.ytimg.com/vi/${id}/${posterFile}.jpg`;
+
+		item.cardData.poster = posterURL;
+		item.cardData.youtubeId = id;
+		item.cardData.href = url;
+
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 3;
+		item.mobileH = 5;
+
+		return item;
+	},
+	urlHandlerPriority: 2,
+
+	canChange: (item) => Boolean(matcher(item.cardData.href)),
+
+	change: (item) => {
+		const href = item.cardData?.href;
+
+		const id = matcher(href);
+		if (!id) return;
+
+		const posterFile = 'hqdefault';
+		const posterURL = `https://i.ytimg.com/vi/${id}/${posterFile}.jpg`;
+
+		item.cardData.poster = posterURL;
+		item.cardData.youtubeId = id;
+
+		return item;
+	},
+	name: 'Youtube Video'
 } as CardDefinition & { type: 'youtubeVideo' };
 
 // Thanks to eleventy-plugin-youtube-embed
···
  * @param url URL to test
  * @returns A YouTube video ID or undefined if none matched
  */
-export function matcher(url: string): string | undefined {
+export function matcher(url: string | undefined): string | undefined {
+	if (!url) return;
+
 	const match = url.match(urlPattern);
 	return match?.[3];
 }

src/lib/cards/utils/MarkdownTextEditor.svelte

···
 	});
 </script>
 
-<div class="w-full" bind:this={element}></div>
+<div class="w-full cursor-text" bind:this={element}></div>
 
 <style>
 	:global(.tiptap p.is-editor-empty:first-child::before) {

todo.md

···
 # todo
 
 - general video card
-- link card: save favicon and og image to pds
-
 - option to hide cards on mobile
 - separate og image for main page
 - image cards: different images for dark and light mode
 - allow adding background image
-
-
 
 - analytics (get page views)
 - custom subdomain