From 0c4fcf756082b8aa4135d4e2b4d86442b9b54461 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Fri, 9 Jan 2026 01:12:43 +0100
Subject: [PATCH] add map location card

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 ++
 src/lib/EditableWebsite.svelte                | 16 +++-
 .../SidebarItemBlueskyPostCard.svelte         |  2 +-
 .../EmbedCard/SidebarItemEmbedCard.svelte     | 12 ++-
 .../SidebarItemEmbedLivestreamCard.svelte     |  2 +-
 .../SidebarItemLivestreamCard.svelte          |  2 +-
 .../cards/MapCard/CreateMapCardModal.svelte   | 56 +++++++++++++
 src/lib/cards/MapCard/Map.svelte              | 80 +++++++++++++++++++
 src/lib/cards/MapCard/MapCard.svelte          | 10 +++
 .../cards/MapCard/SidebarItemMapCard.svelte   | 22 +++++
 src/lib/cards/MapCard/index.ts                | 19 +++++
 .../SidebarItemYoutubeCard.svelte             |  4 +-
 src/lib/cards/index.ts                        |  4 +-
 src/lib/cards/types.ts                        |  1 +
 src/routes/api/geocoding/+server.ts           | 20 +++++
 16 files changed, 242 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/cards/MapCard/CreateMapCardModal.svelte
 create mode 100644 src/lib/cards/MapCard/Map.svelte
 create mode 100644 src/lib/cards/MapCard/MapCard.svelte
 create mode 100644 src/lib/cards/MapCard/SidebarItemMapCard.svelte
 create mode 100644 src/lib/cards/MapCard/index.ts
 create mode 100644 src/routes/api/geocoding/+server.ts

diff --git a/package.json b/package.json
index 5e0eab0..513880b 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
 		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"gsap": "^3.14.2",
+		"leaflet": "^1.9.4",
 		"link-preview-js": "^4.0.0",
 		"marked": "^15.0.11",
 		"plyr": "^3.8.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94bc7c3..1543706 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       gsap:
         specifier: ^3.14.2
         version: 3.14.2
+      leaflet:
+        specifier: ^1.9.4
+        version: 1.9.4
       link-preview-js:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1888,6 +1891,9 @@ packages:
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==, tarball: https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz}
 
+  leaflet@1.9.4:
+    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==, tarball: https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==, tarball: https://registry.npmjs.org/levn/-/levn-0.4.1.tgz}
     engines: {node: '>= 0.8.0'}
@@ -4437,6 +4443,8 @@ snapshots:
 
   known-css-properties@0.35.0: {}
 
+  leaflet@1.9.4: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
diff --git a/src/lib/EditableWebsite.svelte b/src/lib/EditableWebsite.svelte
index a8fdade..166f3ea 100644
--- a/src/lib/EditableWebsite.svelte
+++ b/src/lib/EditableWebsite.svelte
@@ -175,7 +175,9 @@
 		});
 	}
 
-	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarComponent);
+	const sidebarItems = AllCardDefinitions.filter(
+		(cardDef) => cardDef.sidebarComponent || cardDef.sidebarButtonText
+	);
 </script>
 
 {#if !dev}
@@ -328,10 +330,16 @@
 	</div>
 </div>
 
-<Sidebar mobileOnly mobileClasses="lg:block p-4">
-	<div>
+<Sidebar mobileOnly mobileClasses="lg:block p-4 gap-4">
+	<div class="flex flex-col gap-2">
 		{#each sidebarItems as cardDef}
-			<cardDef.sidebarComponent onclick={() => newCard(cardDef.type)} />
+			{#if cardDef.sidebarComponent}
+				<cardDef.sidebarComponent onclick={() => newCard(cardDef.type)} />
+			{:else if cardDef.sidebarButtonText}
+				<Button onclick={() => newCard(cardDef.type)} variant="ghost" class="w-full justify-start"
+					>{cardDef.sidebarButtonText}</Button
+				>
+			{/if}
 		{/each}
 	</div>
 </Sidebar>
diff --git a/src/lib/cards/BlueskyPostCard/SidebarItemBlueskyPostCard.svelte b/src/lib/cards/BlueskyPostCard/SidebarItemBlueskyPostCard.svelte
index a68e449..cbd61cc 100644
--- a/src/lib/cards/BlueskyPostCard/SidebarItemBlueskyPostCard.svelte
+++ b/src/lib/cards/BlueskyPostCard/SidebarItemBlueskyPostCard.svelte
@@ -4,7 +4,7 @@
 	let { onclick }: { onclick: () => void } = $props();
 </script>
 
-<Button {onclick} variant="ghost" class="w-full" size="lg">
+<Button {onclick} variant="ghost" class="w-full justify-start">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		version="1.1"
diff --git a/src/lib/cards/EmbedCard/SidebarItemEmbedCard.svelte b/src/lib/cards/EmbedCard/SidebarItemEmbedCard.svelte
index 600617c..b2b46dc 100644
--- a/src/lib/cards/EmbedCard/SidebarItemEmbedCard.svelte
+++ b/src/lib/cards/EmbedCard/SidebarItemEmbedCard.svelte
@@ -4,19 +4,17 @@
 	let { onclick }: { onclick: () => void } = $props();
 </script>
 
-<Button {onclick} variant="ghost" class="w-full" size="lg">
+<Button {onclick} variant="ghost" class="w-full justify-start">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
 		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
+		fill="currentColor"
 		class="text-accent-600 dark:text-accent-400"
 	>
 		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+			fill-rule="evenodd"
+			d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z"
+			clip-rule="evenodd"
 		/>
 	</svg>
 
diff --git a/src/lib/cards/LivestreamCard/SidebarItemEmbedLivestreamCard.svelte b/src/lib/cards/LivestreamCard/SidebarItemEmbedLivestreamCard.svelte
index f8a64de..e359428 100644
--- a/src/lib/cards/LivestreamCard/SidebarItemEmbedLivestreamCard.svelte
+++ b/src/lib/cards/LivestreamCard/SidebarItemEmbedLivestreamCard.svelte
@@ -5,7 +5,7 @@
 	let { onclick }: { onclick: () => void } = $props();
 </script>
 
-<Button {onclick} variant="ghost" class="w-full" size="lg">
+<Button {onclick} variant="ghost" class="w-full justify-start">
 	<Icon class="size-4" />
 
 	Embed stream.place
diff --git a/src/lib/cards/LivestreamCard/SidebarItemLivestreamCard.svelte b/src/lib/cards/LivestreamCard/SidebarItemLivestreamCard.svelte
index b8f0e71..e0cc42f 100644
--- a/src/lib/cards/LivestreamCard/SidebarItemLivestreamCard.svelte
+++ b/src/lib/cards/LivestreamCard/SidebarItemLivestreamCard.svelte
@@ -5,7 +5,7 @@
 	let { onclick }: { onclick: () => void } = $props();
 </script>
 
-<Button {onclick} variant="ghost" class="w-full" size="lg">
+<Button {onclick} variant="ghost" class="w-full justify-start">
 	<Icon class="size-4" />
 
 	Latest stream.place
diff --git a/src/lib/cards/MapCard/CreateMapCardModal.svelte b/src/lib/cards/MapCard/CreateMapCardModal.svelte
new file mode 100644
index 0000000..e5353ad
--- /dev/null
+++ b/src/lib/cards/MapCard/CreateMapCardModal.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isFetchingLocation = $state(false);
+
+	let errorMessage = $state('');
+
+	let search = $state('');
+
+	async function fetchLocation() {
+		errorMessage = '';
+		isFetchingLocation = true;
+
+		try {
+			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(search));
+			if (response.ok) {
+				const data = await response.json();
+
+				if (!data.lat || !data.lon) throw new Error('lat or lon not found');
+
+				item.cardData.lat = parseFloat(data.lat);
+				item.cardData.lon = parseFloat(data.lon);
+			} else {
+				throw new Error('response not ok');
+			}
+		} catch (error) {
+			errorMessage = "Couldn't find that location!";
+			return false;
+		} finally {
+			isFetchingLocation = false;
+		}
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Enter a city and country</Subheading>
+	<Input bind:value={search} />
+
+	{#if errorMessage}
+		<Alert type="error" title="Failed to create map card"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			disabled={isFetchingLocation}
+			onclick={async () => {
+				if (await fetchLocation()) oncreate();
+			}}>{isFetchingLocation ? 'Creating...' : 'Create'}</Button
+		>
+	</div>
+</Modal>
diff --git a/src/lib/cards/MapCard/Map.svelte b/src/lib/cards/MapCard/Map.svelte
new file mode 100644
index 0000000..f1a2b99
--- /dev/null
+++ b/src/lib/cards/MapCard/Map.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import 'leaflet/dist/leaflet.css';
+	import type { Item } from '$lib/types';
+
+	let { item }: { item: Item } = $props();
+
+	let lMap;
+	let leaflet;
+
+	let map: HTMLElement | undefined = $state();
+
+	function getCSSVar(variable: string) {
+		return getComputedStyle(document.body).getPropertyValue(variable).trim();
+	}
+
+	onMount(async () => {
+		try {
+			console.log(`Loading map...`);
+
+			// @ts-ignore
+			leaflet = await import('leaflet');
+
+			const location = [item.cardData.lat, item.cardData.lon];
+
+			lMap = leaflet
+				.map(map, {
+					zoomControl: false,
+					dragging: false,
+					minZoom: 2,
+					maxZoom: 5
+				})
+				.setView(location, 3.5);
+			leaflet
+				.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					attribution:
+						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				})
+				.addTo(lMap);
+
+			let color =
+				!item.color || item.color === 'transparent' || item.color === 'base'
+					? 'accent'
+					: item.color;
+
+			console.log(color);
+
+			const computedColor = getCSSVar(`--color-${color}-500`);
+
+			leaflet
+				.circle(location, {
+					color: computedColor,
+					fillColor: computedColor,
+					fillOpacity: 0.5,
+					radius: 100000,
+					class: '!grayscale-0'
+				})
+				.addTo(lMap);
+		} catch (err) {
+			console.error(`Something went wrong trying to get the geolocation data`, err);
+		}
+	});
+</script>
+
+<div
+	bind:this={map}
+	class={[
+		'absolute inset-0 isolate h-full w-full pointer-coarse:pointer-events-none',
+		item.color && item.color !== 'base' && item.color !== 'transparent' ? 'mix-blend-multiply' : ''
+	]}
+></div>
+
+<style>
+	:global(:not(.dark)) :global(.leaflet-layer) {
+		filter: grayscale(100%);
+	}
+	:global(.dark) :global(.leaflet-layer) {
+		filter: grayscale(100%) invert(100%);
+	}
+</style>
diff --git a/src/lib/cards/MapCard/MapCard.svelte b/src/lib/cards/MapCard/MapCard.svelte
new file mode 100644
index 0000000..4cbcdc5
--- /dev/null
+++ b/src/lib/cards/MapCard/MapCard.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import Map from './Map.svelte';
+
+	let { item }: { item: Item } = $props();
+</script>
+
+{#key item.color}
+	<Map {item} />
+{/key}
diff --git a/src/lib/cards/MapCard/SidebarItemMapCard.svelte b/src/lib/cards/MapCard/SidebarItemMapCard.svelte
new file mode 100644
index 0000000..abef339
--- /dev/null
+++ b/src/lib/cards/MapCard/SidebarItemMapCard.svelte
@@ -0,0 +1,22 @@
+<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="M8.161 2.58a1.875 1.875 0 0 1 1.678 0l4.993 2.498c.106.052.23.052.336 0l3.869-1.935A1.875 1.875 0 0 1 21.75 4.82v12.485c0 .71-.401 1.36-1.037 1.677l-4.875 2.437a1.875 1.875 0 0 1-1.676 0l-4.994-2.497a.375.375 0 0 0-.336 0l-3.868 1.935A1.875 1.875 0 0 1 2.25 19.18V6.695c0-.71.401-1.36 1.036-1.677l4.875-2.437ZM9 6a.75.75 0 0 1 .75.75V15a.75.75 0 0 1-1.5 0V6.75A.75.75 0 0 1 9 6Zm6.75 3a.75.75 0 0 0-1.5 0v8.25a.75.75 0 0 0 1.5 0V9Z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+
+	Map with Location
+</Button>
diff --git a/src/lib/cards/MapCard/index.ts b/src/lib/cards/MapCard/index.ts
new file mode 100644
index 0000000..43936ab
--- /dev/null
+++ b/src/lib/cards/MapCard/index.ts
@@ -0,0 +1,19 @@
+import type { CardDefinition } from '../types';
+import CreateMapCardModal from './CreateMapCardModal.svelte';
+import MapCard from './MapCard.svelte';
+import SidebarItemMapCard from './SidebarItemMapCard.svelte';
+
+export const MapCardDefinition = {
+	type: 'mapLocation',
+	contentComponent: MapCard,
+	sidebarButtonText: 'map',
+	createNew: (item) => {
+		item.w = 2;
+		item.h = 2;
+		item.mobileH = 4;
+		item.mobileW = 4;
+	},
+
+	sidebarComponent: SidebarItemMapCard,
+	creationModalComponent: CreateMapCardModal
+} as CardDefinition & { type: 'mapLocation' };
diff --git a/src/lib/cards/YoutubeVideo/SidebarItemYoutubeCard.svelte b/src/lib/cards/YoutubeVideo/SidebarItemYoutubeCard.svelte
index e7f37fc..d05690a 100644
--- a/src/lib/cards/YoutubeVideo/SidebarItemYoutubeCard.svelte
+++ b/src/lib/cards/YoutubeVideo/SidebarItemYoutubeCard.svelte
@@ -4,8 +4,8 @@
 	let { onclick }: { onclick: () => void } = $props();
 </script>
 
-<Button {onclick} variant="ghost" class="w-full" size="lg">
-	<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 h-4" viewBox="0 0 256 180"
+<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"
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 66b4909..742e4f5 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -3,6 +3,7 @@ import { EmbedCardDefinition } from './EmbedCard';
 import { ImageCardDefinition } from './ImageCard';
 import { LinkCardDefinition } from './LinkCard';
 import { LivestreamCardDefitition, LivestreamEmbedCardDefitition } from './LivestreamCard';
+import { MapCardDefinition } from './MapCard';
 import { UpdatedBlentosCardDefitition } from './SpecialCards/UpdatedBlentos';
 import { TextCardDefinition } from './TextCard';
 import type { CardDefinition } from './types';
@@ -17,7 +18,8 @@ export const AllCardDefinitions = [
 	BlueskyPostCardDefinition,
 	LivestreamCardDefitition,
 	LivestreamEmbedCardDefitition,
-	EmbedCardDefinition
+	EmbedCardDefinition,
+	MapCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(
diff --git a/src/lib/cards/types.ts b/src/lib/cards/types.ts
index 8612962..0a672eb 100644
--- a/src/lib/cards/types.ts
+++ b/src/lib/cards/types.ts
@@ -35,4 +35,5 @@ export type CardDefinition = {
 	upload?: (item: Item) => Promise<Item>;
 
 	sidebarComponent?: Component<SidebarComponentProps>;
+	sidebarButtonText?: string;
 };
diff --git a/src/routes/api/geocoding/+server.ts b/src/routes/api/geocoding/+server.ts
new file mode 100644
index 0000000..0da387a
--- /dev/null
+++ b/src/routes/api/geocoding/+server.ts
@@ -0,0 +1,20 @@
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+	const q = url.searchParams.get('q');
+	if (!q) {
+		return json({ error: 'No search provided' }, { status: 400 });
+	}
+
+	try {
+		const data = await fetch(
+			'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(q)
+		);
+		const location = await data.json();
+
+		return json(location[0]);
+	} catch (error) {
+		console.error('Error fetching location:', error);
+		return json({ error: 'Failed to fetch location' }, { status: 500 });
+	}
+}
-- 
2.51.2