Merge pull request #25 from flo-bit/card-label

add card label, add google maps link, small fixes

docs/Selfhosting.md

···
 6. some cards need their own additional env keys, if you have these cards in your profile, create your keys and add them to your cloudflare worker
 
 - github profile: GITHUB_TOKEN
-- map: PUBLIC_MAPBOX_TOKEN
+- map: PUBLIC_MAPBOX_TOKEN

src/lib/cards/BaseCard/BaseCard.svelte

···
 		]}
 	>
 		{@render children?.()}
+
+		{#if !isEditing && item.cardData.label}
+			<div
+				class="text-base-900 dark:text-base-50 bg-base-200/50 dark:bg-base-900/50 absolute top-2 left-2 z-30 max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 text-base font-semibold backdrop-blur-md"
+			>
+				{item.cardData.label}
+			</div>
+		{/if}
 	</div>
 	{@render controls?.()}
 </div>

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	import type { HTMLAttributes } from 'svelte/elements';
 	import BaseCard from './BaseCard.svelte';
 	import type { Item } from '$lib/types';
-	import { Button, Label, Popover } from '@foxui/core';
+	import { Button, cn, Label, Popover } from '@foxui/core';
 	import { ColorSelect } from '@foxui/colors';
 	import { AllCardDefinitions, CardDefinitionsByType, getColor } from '..';
 	import { COLUMNS } from '$lib';
 	import { getCanEdit, getIsMobile } from '$lib/website/context';
+	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
 
 	let colorsChoices = [
 		{ class: 'text-base-500', label: 'base' },
···
 	let settingsPopoverOpen = $state(false);
 	let changePopoverOpen = $state(false);
 
-	const changeOptions = $derived(
-		AllCardDefinitions.filter((def) => def.canChange?.(item))
-	);
+	const changeOptions = $derived(AllCardDefinitions.filter((def) => def.canChange?.(item)));
 
 	function applyChange(def: (typeof AllCardDefinitions)[number]) {
 		const updated = def.change ? def.change(item) : item;
···
 >
 	<div class="absolute inset-0 cursor-grab"></div>
 	{@render children?.()}
+
+	{#if cardDef.canHaveLabel}
+		<div
+			class={cn(
+				'bg-base-200/30 dark:bg-base-900/30 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
+				!item.cardData.label && 'hidden group-hover/card:block'
+			)}
+		>
+			<PlainTextEditor
+				class="text-base-900 dark:text-base-50 w-fit text-base font-semibold"
+				key="label"
+				bind:item
+				placeholder="Label"
+			/>
+		</div>
+	{/if}
 
 	{#snippet controls()}
 		<!-- class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 absolute -top-3 -left-3 hidden cursor-pointer items-center justify-center rounded-full border p-2 shadow-lg group-focus-within:inline-flex group-hover/card:inline-flex" -->

src/lib/cards/BigSocialCard/BigSocialCard.svelte

···
 	import { platformsData } from '.';
 	import type { ContentComponentProps } from '../types';
 
-	let { item }: ContentComponentProps = $props();
+	let { item, isEditing }: ContentComponentProps = $props();
 
 	const platform = $derived(item.cardData.platform as string);
 </script>
 
-<a
-	href={item.cardData.href}
-	target="_blank"
-	rel="noopener noreferrer"
+<div
 	class="flex h-full w-full items-center justify-center p-10"
 	style={`background-color: #${item.cardData.color}`}
 >
···
 	>
 		{@html platformsData[platform].svg}
 	</div>
-</a>
+</div>
+
+{#if !isEditing}
+	<a href={item.cardData.href} target="_blank" rel="noopener noreferrer">
+		<div class="absolute inset-0 z-50"></div>
+		<span class="sr-only">open {platformsData[platform].title}</span>
+	</a>
+{/if}

src/lib/cards/BigSocialCard/index.ts

···
 
 		return item;
 	},
-	urlHandlerPriority: 1
+	urlHandlerPriority: 1,
+	canHaveLabel: true
 } as CardDefinition & { type: 'bigsocial' };
 
 import {

src/lib/cards/BlueskyMediaCard/index.ts

···
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
 	sidebarButtonText: 'Bluesky Media',
-	sidebarComponent: SidebarItemBlueskyMediaCard
+	sidebarComponent: SidebarItemBlueskyMediaCard,
+	canHaveLabel: true
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/Card/Card.svelte

···
 
 {#if CardDefinitionsByType[item.cardType]}
 	{@const cardDef = CardDefinitionsByType[item.cardType]}
-	<cardDef.contentComponent {item} {...rest} />
+	<cardDef.contentComponent isEditing={false} {item} {...rest} />
 {:else}
 	<div class="m-4">Unsupported card type: {item.cardType}</div>
 {/if}

src/lib/cards/Card/EditingCard.svelte

···
 {#if CardDefinitionsByType[item.cardType]}
 	{@const cardDef = CardDefinitionsByType[item.cardType]}
 	{#if cardDef.editingContentComponent}
-		<cardDef.editingContentComponent bind:item />
+		<cardDef.editingContentComponent bind:item isEditing />
 	{:else}
-		<cardDef.contentComponent bind:item />
+		<cardDef.contentComponent bind:item isEditing />
 	{/if}
 {:else}
 	<div class="m-4">Unsupported card type: {item.cardType}</div>

src/lib/cards/EmbedCard/index.ts

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

src/lib/cards/GIFCard/GifCardSettings.svelte

···
 	}
 </script>
 
-<div class="flex flex-col gap-3">
-	<div>
-		<Label class="mb-1 text-xs">Change GIF</Label>
-		<Button variant="secondary" class="w-full justify-start" onclick={() => (isSearchOpen = true)}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="mr-2 size-4"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-				/>
-			</svg>
-			Search GIPHY
-		</Button>
-	</div>
+<div class="flex flex-col gap-2">
+	<Button variant="secondary" class="w-full justify-start" onclick={() => (isSearchOpen = true)}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="mr-2 size-4"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+			/>
+		</svg>
+		Change GIF
+	</Button>
 </div>
 
 <GiphySearchModal

src/lib/cards/GIFCard/index.ts

···
 	allowSetColor: false,
 	minW: 1,
 	minH: 1,
+	canHaveLabel: true,
 	onUrlHandler: (url, item) => {
 		// Match Giphy page URLs: https://giphy.com/gifs/name-ID or https://giphy.com/gifs/ID
 		const pageMatch = url.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);

src/lib/cards/ImageCard/ImageCard.svelte

···
 	import { getImageBlobUrl } from '$lib/atproto';
 	import type { ContentComponentProps } from '../types';
 
-	let { item = $bindable() }: ContentComponentProps = $props();
+	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 
 	const did = getDidContext();
 
···
 	<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' : ''
+			item.cardData.href ? 'group-hover/card:scale-101' : ''
 		]}
 		src={getSrc()}
 		alt=""
 	/>
 {/key}
-{#if item.cardData.href}
+{#if item.cardData.href && !isEditing}
 	<a
 		href={item.cardData.href}
-		class="absolute inset-0 h-full w-full"
+		class="absolute inset-0 z-50 h-full w-full"
 		target="_blank"
 		rel="noopener noreferrer"
 	>

src/lib/cards/ImageCard/index.ts

···
 	change: (item) => {
 		return item;
 	},
-	name: 'Image Card'
+	name: 'Image Card',
+
+	canHaveLabel: true
 } as CardDefinition & { type: 'image' };

src/lib/cards/MapCard/CreateMapCardModal.svelte

···
 				item.cardData.lon = data.lon;
 				item.cardData.name = data.display_name?.split(',')[0] || search;
 				item.cardData.type = data.class || 'city';
-				item.cardData.zoom = Math.max(getZoomLevel(data.class),  getZoomLevel(data.type));
+				item.cardData.zoom = Math.max(getZoomLevel(data.class), getZoomLevel(data.type));
 			} else {
 				throw new Error('response not ok');
 			}
···
 			<Alert type="error" title="Failed to create map card"><span>{errorMessage}</span></Alert>
 		{/if}
 
-		<p class="text-xs mt-2">
+		<p class="mt-2 text-xs">
 			Geocoding by <a
 				href="https://nominatim.openstreetmap.org/"
 				class="text-accent-800 dark:text-accent-300"

src/lib/cards/MapCard/Map.svelte

···
 	let mapContainer: HTMLElement | undefined = $state();
 	let map: mapboxgl.Map | undefined = $state();
 
-	// Update light preset when changed in settings
-	$effect(() => {
-		const preset = item.cardData.lightPreset;
-		if (map && preset) {
-			map.setConfigProperty('basemap', 'lightPreset', preset);
-		}
-	});
-
 	onMount(() => {
 		if (!mapContainer || !env.PUBLIC_MAPBOX_TOKEN) {
 			console.log('no map container or no mapbox token');
+			return;
 		}
 
 		try {
···
 					map.setCenter([lon, lat]);
 				}
 			});
-			resizeObserver.observe(mapContainer);
+			if (mapContainer) resizeObserver.observe(mapContainer);
 
 			return () => {
 				resizeObserver.disconnect();
···
 	});
 </script>
 
-<div bind:this={mapContainer} class="absolute inset-0 isolate z-50 h-full w-full"></div>
+<div bind:this={mapContainer} class="absolute inset-0 isolate h-full w-full"></div>

src/lib/cards/MapCard/MapCard.svelte

···
 <script lang="ts">
-	import type { Item } from '$lib/types';
+	import type { ContentComponentProps } from '../types';
 	import Map from './Map.svelte';
 
-	let { item = $bindable() }: { item: Item } = $props();
+	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 </script>
 
 <Map bind:item />
+
+{#if item.cardData.linkToGoogleMaps && !isEditing}
+	<a
+		target="_blank"
+		rel="noopener noreferrer"
+		href={'http://maps.google.com/maps?q=' +
+			encodeURIComponent(item.cardData.lat + ',' + item.cardData.lon)}
+	>
+		<div class="absolute inset-0 z-100"></div>
+		<span class="sr-only">open map</span>
+	</a>
+{/if}

src/lib/cards/MapCard/MapCardSettings.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { Checkbox, Label } from '@foxui/core';
+
+	let { item }: { item: Item; onclose: () => void } = $props();
+</script>
+
+<div class="flex items-center space-x-2">
+	<Checkbox
+		bind:checked={
+			() => Boolean(item.cardData.linkToGoogleMaps), (val) => (item.cardData.linkToGoogleMaps = val)
+		}
+		id="show-inline"
+		aria-labelledby="show-inline-label"
+		variant="secondary"
+	/>
+	<Label
+		id="show-inline-label"
+		for="show-inline"
+		class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	>
+		Link to google maps
+	</Label>
+</div>

src/lib/cards/MapCard/index.ts

···
 import type { CardDefinition } from '../types';
 import CreateMapCardModal from './CreateMapCardModal.svelte';
 import MapCard from './MapCard.svelte';
+import MapCardSettings from './MapCardSettings.svelte';
 import SidebarItemMapCard from './SidebarItemMapCard.svelte';
 
 export const MapCardDefinition = {
···
 
 	sidebarComponent: SidebarItemMapCard,
 	creationModalComponent: CreateMapCardModal,
-	allowSetColor: false
+	allowSetColor: false,
+	canHaveLabel: true,
+	settingsComponent: MapCardSettings
 } as CardDefinition & { type: 'mapLocation' };
 
 export function getZoomLevel(type: string | undefined): number {

src/lib/cards/PopfeedReviews/index.ts

···
 		return data;
 	},
 	minH: 3,
-	sidebarButtonText: 'Popfeed Reviews'
+	sidebarButtonText: 'Popfeed Reviews',
+	canHaveLabel: true
 } as CardDefinition & { type: 'recentPopfeedReviews' };

src/lib/cards/SectionCard/EditingSectionCard.svelte

···
 </script>
 
 <div
-	class={["line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold",
+	class={[
+		'line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold',
 		textAlignClasses[item.cardData.textAlign as string],
 		verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
 		textSizeClasses[(item.cardData.textSize ?? 1) as number]

src/lib/cards/SectionCard/index.ts

···
 	settingsComponent: SectionCardSettings
 } as CardDefinition & { type: 'section' };
 
-
-
 export const textAlignClasses: Record<string, string> = {
 	left: '',
 	center: 'text-center justify-center',
···
 	bottom: 'items-end-safe'
 };
 
-export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-6xl'];
+export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-5xl'];

src/lib/cards/StatusphereCard/EditStatusphereCard.svelte

···
 	import { CardDefinitionsByType } from '..';
 	import { PopoverEmojiPicker } from '@foxui/social';
 	import { emojiToNotoAnimatedWebp } from '.';
-	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
-	import { cn } from '@foxui/core';
 
 	let { item }: { item: Item } = $props();
 
···
 			</button>
 		{/snippet}
 	</PopoverEmojiPicker>
-
-	<div
-		class={cn(
-			'bg-base-200/30 dark:bg-base-900/30 absolute top-2 right-2 left-2 z-30 rounded-lg p-1 backdrop-blur-md',
-			!item.cardData.title && 'hidden group-hover/card:block'
-		)}
-	>
-		<PlainTextEditor
-			class="text-base-900 dark:text-base-50 text-md line-clamp-1 font-bold"
-			key="title"
-			bind:item
-			placeholder="I'm feeling..."
-		/>
-	</div>
 </div>

src/lib/cards/StatusphereCard/StatusphereCard.svelte

···
 	{:else}
 		No status yet
 	{/if}
-
-	{#if item.cardData.title}
-		<div
-			class="text-base-900 dark:text-base-50 text-md bg-base-200/30 dark:bg-base-900/30 absolute top-2 right-2 left-2 z-30 line-clamp-1 rounded-lg p-1 font-bold backdrop-blur-md"
-		>
-			{item.cardData.title}
-		</div>
-	{/if}
 </div>

src/lib/cards/StatusphereCard/index.ts

···
 		}
 
 		return item;
-	}
+	},
+
+	migrate: (item) => {
+		if (item.cardData.title && !item.cardData.label) {
+			item.cardData.label = item.cardData.title;
+		}
+	},
+	canHaveLabel: true
 } as CardDefinition & { type: 'statusphere' };
 
 export function emojiToNotoAnimatedWebp(emoji: string | undefined): string | undefined {

src/lib/cards/TealFMPlaysCard/index.ts

···
 		return data;
 	},
 	minW: 4,
-	sidebarButtonText: 'teal.fm Plays'
+	sidebarButtonText: 'teal.fm Plays',
+	canHaveLabel: true
 } as CardDefinition & { type: 'recentTealFMPlays' };

src/lib/cards/helper.ts

···
 }
 
 export function getHexOfCardColor(item: Item) {
-	let color =
+	const color =
 		!item.color || item.color === 'transparent' || item.color === 'base' ? 'accent' : item.color;
 
 	return convertCSSToHex(getCSSVar(`--color-${color}-500`));

src/lib/cards/types.ts

···
 
 export type ContentComponentProps = {
 	item: Item;
+	isEditing?: boolean;
 };
 
 export type CardDefinition = {
···
 	change?: (item: Item) => Item;
 
 	name?: string;
+
+	canHaveLabel?: boolean;
+
+	migrate?: (item: Item) => void;
 };

src/lib/cards/utils/PlainTextEditor.svelte

···
 
 <style>
 	:global(.tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-800);
+		color: var(--color-base-500);
 		content: attr(data-placeholder);
-		opacity: 50%;
+		opacity: 100%;
 		float: left;
 		height: 0;
 		pointer-events: none;
-	}
-	:global(.dark .tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-200);
 	}
 </style>

src/lib/website/load.ts

···
 	return data;
 }
 
+function migrateCards(data: WebsiteData): WebsiteData {
+	for (const card of data.cards) {
+		const cardDef = CardDefinitionsByType[card.cardType];
+
+		if (!cardDef?.migrate) continue;
+
+		cardDef.migrate(card);
+	}
+	return data;
+}
+
 function checkData(data: WebsiteData): WebsiteData {
 	data = migrateData(data);
 
···
 }
 
 function migrateData(data: WebsiteData): WebsiteData {
-	return migrateFromV1ToV2(migrateFromV0ToV1(data));
+	return migrateCards(migrateFromV1ToV2(migrateFromV0ToV1(data)));
 }