add germ card

src/lib/cards/index.ts

···
 import { PlyrFMCardDefinition, PlyrFMCollectionCardDefinition } from './media/PlyrFMCard';
 import { MarginCardDefinition } from './social/MarginCard';
 import { SembleCollectionCardDefinition } from './social/SembleCollectionCard';
+import { GermDMCardDefinition } from './social/GermDMCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
···
 	PlyrFMCardDefinition,
 	PlyrFMCollectionCardDefinition,
 	MarginCardDefinition,
-	SembleCollectionCardDefinition
+	SembleCollectionCardDefinition,
+	GermDMCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/social/GermDMCard/GermDMCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import type { ContentComponentProps } from '../../types';
+	import { CardDefinitionsByType } from '../..';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { platformsData } from '../BigSocialCard';
+
+	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+
+	let germData = $state(
+		data[item.cardType] as { messageMeUrl: string; showButtonTo: string } | null | undefined
+	);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+	let isLoaded = $state(false);
+
+	onMount(async () => {
+		if (!germData) {
+			germData = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+				did,
+				handle
+			})) as { messageMeUrl: string; showButtonTo: string } | null | undefined;
+
+			data[item.cardType] = germData;
+			isLoaded = true;
+		}
+	});
+
+	const brandColor = `#${platformsData.germ.hex}`;
+
+	const dmUrl = $derived.by(() => {
+		if (!germData?.messageMeUrl) return undefined;
+		const viewerDid = user.did;
+		const fragment = viewerDid ? `${did}+${viewerDid}` : `${did}`;
+		return `${germData.messageMeUrl}/web#${fragment}`;
+	});
+</script>
+
+{#if germData && dmUrl}
+	<div
+		class="flex h-full w-full items-center justify-center p-10"
+		style="background-color: {brandColor}"
+	>
+		<div
+			class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"
+		>
+			{@html platformsData.germ.svg}
+		</div>
+	</div>
+
+	{#if !isEditing}
+		<a href={dmUrl} target="_blank" rel="noopener noreferrer">
+			<div class="absolute inset-0 z-50"></div>
+			<span class="sr-only">Message me on Germ</span>
+		</a>
+	{/if}
+{:else if isLoaded}
+	<div
+		class="text-base-500 dark:text-base-400 accent:text-white/70 flex h-full w-full items-center justify-center p-4 text-center text-sm"
+	>
+		Germ DM not available
+	</div>
+{:else}
+	<div
+		class="text-base-500 dark:text-base-400 accent:text-white/70 flex h-full w-full items-center justify-center p-4 text-center text-sm"
+	>
+		Loading...
+	</div>
+{/if}

src/lib/cards/social/GermDMCard/index.ts

···
+import { getRecord } from '$lib/atproto';
+import type { CardDefinition } from '../../types';
+import { platformsData } from '../BigSocialCard';
+import GermDMCard from './GermDMCard.svelte';
+
+const germ = platformsData.germ;
+
+export const GermDMCardDefinition = {
+	type: 'germDM',
+	contentComponent: GermDMCard,
+	createNew: (card) => {
+		card.w = 2;
+		card.h = 2;
+		card.mobileW = 4;
+		card.mobileH = 4;
+		card.cardData.label = 'Message me';
+	},
+	loadData: async (_items, { did }) => {
+		try {
+			const record = await getRecord({
+				did,
+				collection: 'com.germnetwork.declaration',
+				rkey: 'self'
+			});
+			const value = record?.value;
+			if (!value?.messageMe) return null;
+			return {
+				messageMeUrl: value.messageMe.messageMeUrl,
+				showButtonTo: value.messageMe.showButtonTo
+			};
+		} catch {
+			return null;
+		}
+	},
+	defaultColor: 'transparent',
+	allowSetColor: false,
+	canHaveLabel: true,
+	name: 'DM on Germ',
+	keywords: ['germ', 'dm', 'message', 'chat', 'encrypted'],
+	groups: ['Social'],
+	icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-4">${germ.svg.replace(/<svg[^>]*>/, '').replace(/<\/svg>/, '')}</svg>`
+} as CardDefinition & { type: 'germDM' };

src/lib/website/Context.svelte

···
 	setAdditionalUserData(data.additionalData);
 
 	setCanEdit(
-		() => (dev && isEditing === true) || (user.isLoggedIn && user.profile?.did === data.did && isEditing === true)
+		() =>
+			(dev && isEditing === true) ||
+			(user.isLoggedIn && user.profile?.did === data.did && isEditing === true)
 	);
 
 	// svelte-ignore state_referenced_locally