Merge pull request #57 from flo-bit/theme-colors

add theme colors selection

docs/Beta.md

···
 - site.standard
   - move description to markdownDescription and set description as text only
 
+- allow editing on mobile
+
+- get automatic layout for mobile if only edited on desktop (and vice versa)
+
+- add cards in middle of current position (both mobile and desktop version)
+
+- show nsfw warnings
+
 - big button card
 
 - card with big call to action button
 
-- link card allow changing favicon, og image (+ hide favicon)
-
 - video card?
 
 - allow setting base and accent color
 
 - 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
-
 - when adding images try to add them in a size that best fits aspect ratio
 
 - onboarding
 
-- show alert when user tries to close window with unsaved changes
+- fix invalid handle thing

docs/CardIdeas.md

···
 ## media
 
 - general video card
-- inline youtube video
+- [x] inline youtube video
 - cartoons: aka https://www.opendoodles.com/
 - excalidraw (/svg card)
 - latest blog post (e.g. leaflet)
 - fake 3d image (with depth map)
-- fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
-- gifs
-- little drawing app
+- [x] fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
+- [x] gifs
+- [x] little drawing app
 - css voxel art
 - 3d model
+- spotify or apple music playlist
 
 ## social accounts
 
 - instagram card (showing follow button, follower count, latest posts)
-- github card (showing activity grid)
+- [x] github card (showing activity grid)
 - bluesky account card (showing follow button, follower count, avatar, name, cover image)
 - youtube channel card (showing channel name, latest videos, follow button?)
 - bluesky posts workcloud
···
 - teal.fm
   - [x] last played songs
 - tangled.sh
+  - pinned repos
+  - activity heatmap?
 - popfeed.social
   - reading goal
   - [x] latest ratings
   - lists
-- smokesignal.events (https://pdsls.dev/at://did:plc:xbtmt2zjwlrfegqvch7fboei/events.smokesignal.calendar.event/3ltn2qrxf3626)
-- statusphere.xyz (https://googlefonts.github.io/noto-emoji-animation/, https://gist.github.com/sanjacob/a0ccdf6d88f15bf158d8895090722d14)
+- smokesignal.events
+  - [x] specific event
+  - all future events i'm hosting/attending
+- [x] statusphere.xyz (TODO: assing to specific record)
 - goals.garden
 - flashes.blue (https://pdsls.dev/at://did:plc:aytgljyikzbtgrnac2u4ccft/blue.flashes.actor.portfolio, https://app.flashes.blue/profile/j4ck.xyz)
 - room: flo-bit.dev/room

src/lib/components/select-theme/SelectTheme.svelte

···
+<script lang="ts">
+	import { Paragraph } from '@foxui/core';
+	import { ColorSelect } from '@foxui/colors';
+
+	let accentColors = [
+		{ class: 'text-red-500', label: 'red' },
+		{ class: 'text-orange-500', label: 'orange' },
+		{ class: 'text-amber-500', label: 'amber' },
+		{ class: 'text-yellow-500', label: 'yellow' },
+		{ class: 'text-lime-500', label: 'lime' },
+		{ class: 'text-green-500', label: 'green' },
+		{ class: 'text-emerald-500', label: 'emerald' },
+		{ class: 'text-teal-500', label: 'teal' },
+		{ class: 'text-cyan-500', label: 'cyan' },
+		{ class: 'text-sky-500', label: 'sky' },
+		{ class: 'text-blue-500', label: 'blue' },
+		{ class: 'text-indigo-500', label: 'indigo' },
+		{ class: 'text-violet-500', label: 'violet' },
+		{ class: 'text-purple-500', label: 'purple' },
+		{ class: 'text-fuchsia-500', label: 'fuchsia' },
+		{ class: 'text-pink-500', label: 'pink' },
+		{ class: 'text-rose-500', label: 'rose' }
+	];
+
+	let baseColors = [
+		{ class: 'text-gray-500', label: 'gray' },
+		{ class: 'text-stone-500', label: 'stone' },
+		{ class: 'text-zinc-500', label: 'zinc' },
+		{ class: 'text-neutral-500', label: 'neutral' },
+		{ class: 'text-slate-500', label: 'slate' }
+	];
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+
+	let selectedAccentColor = $derived(
+		accentColors.find((c) => c.label === accentColor) ?? accentColors[15]
+	);
+
+	let selectedBaseColor = $derived(baseColors.find((c) => c.label === baseColor) ?? baseColors[1]);
+</script>
+
+{#if selectAccentColor}
+	<Paragraph class="mb-2">Accent Color</Paragraph>
+	<ColorSelect
+		selected={selectedAccentColor}
+		colors={accentColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			accentColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+		class="w-64"
+	/>
+{/if}
+
+{#if selectBaseColor}
+	<Paragraph class="mt-4 mb-2">Base Color</Paragraph>
+	<ColorSelect
+		selected={selectedBaseColor}
+		colors={baseColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			baseColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+	/>
+{/if}

src/lib/components/select-theme/SelectThemePopover.svelte

···
+<script lang="ts">
+	import { buttonVariants, Popover, cn } from '@foxui/core';
+	import SelectTheme from './SelectTheme.svelte';
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+</script>
+
+<Popover>
+	{#snippet child({ props })}
+		<button
+			{...props}
+			class={cn(
+				buttonVariants({ variant: 'link', size: 'default' }),
+				'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
+			)}
+		>
+			{#if selectAccentColor}
+				<div
+					class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+
+			{#if selectBaseColor}
+				<div
+					class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+		</button>
+	{/snippet}
+	<SelectTheme bind:accentColor bind:baseColor {selectAccentColor} {selectBaseColor} {onchanged} />
+</Popover>

src/lib/components/select-theme/index.ts

···
+export { default as SelectTheme } from './SelectTheme.svelte';
+export { default as SelectThemePopover } from './SelectThemePopover.svelte';

src/lib/types.ts

···
 
 			// 'side' (default on desktop) or 'top' (always top like mobile view)
 			profilePosition?: 'side' | 'top';
+
+			// theme colors
+			accentColor?: string;
+			baseColor?: string;
 		};
 	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;

src/lib/website/EditableProfile.svelte

···
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import { Avatar, Button } from '@foxui/core';
 	import { getIsMobile } from './context';
-	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 
 	let { data = $bindable(), hideBlento = false }: { data: WebsiteData; hideBlento?: boolean } =
 		$props();
+
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
 
 	let profilePosition = $derived(getProfilePosition(data));
 
···
 				{/if}
 			</Button>
 		{/if}
+
+		<!-- Theme selection -->
+		<SelectThemePopover
+			{accentColor}
+			{baseColor}
+			onchanged={(newAccent, newBase) => updateTheme(newAccent, newBase)}
+		/>
 	</div>
 
 	<div
 		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>
···
 				/>
 			{/if}
 		</div>
-
-		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
 		{#if !hideBlento}
 			<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />

src/lib/website/EditableWebsite.svelte

···
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
-	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import FloatingEditButton from './FloatingEditButton.svelte';
···
 
 	// Check if floating login button will be visible (to hide MadeWithBlento)
 	const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
+
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
 
 	let imageDragOver = $state(false);
 
···
 	favicon={data.profile.avatar ?? null}
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Account {data} />
···
 			]}
 		>
 			{#if getHideProfileSection(data)}
-				<Button
-					size="icon"
-					variant="ghost"
-					onclick={() => {
-						data.publication.preferences ??= {};
-						data.publication.preferences.hideProfileSection = false;
-						data = { ...data };
-					}}
-					class="pointer-events-auto absolute top-2 left-2 z-20"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-6"
+				<div class="pointer-events-auto absolute top-2 left-2 z-20 flex gap-2">
+					<Button
+						size="icon"
+						variant="ghost"
+						onclick={() => {
+							data.publication.preferences ??= {};
+							data.publication.preferences.hideProfileSection = false;
+							data = { ...data };
+						}}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-						/>
-					</svg>
-				</Button>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-6"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+							/>
+						</svg>
+					</Button>
+					<SelectThemePopover
+						{accentColor}
+						{baseColor}
+						onchanged={(newAccent, newBase) => updateTheme(newAccent, newBase)}
+					/>
+				</div>
 			{/if}
 			<div class="pointer-events-none"></div>
 			<!-- svelte-ignore a11y_no_static_element_interactions -->

src/lib/website/Head.svelte

···
 <script lang="ts">
+	import ThemeScript from './ThemeScript.svelte';
+
 	let {
 		favicon,
 		title,
 		image,
-		description
-	}: { favicon: string | null; title: string | null; image?: string; description?: string } =
-		$props();
+		description,
+		accentColor,
+		baseColor
+	}: {
+		favicon: string | null;
+		title: string | null;
+		image?: string;
+		description?: string;
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
 </script>
+
+<ThemeScript {accentColor} {baseColor} />
 
 <svelte:head>
 	{#if favicon}

src/lib/website/Profile.svelte

···
 >
 	<div
 		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>

src/lib/website/ThemeScript.svelte

···
+<script lang="ts">
+	let {
+		accentColor = 'pink',
+		baseColor = 'stone'
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
+
+	let script = $derived(
+		`<script>(function(){document.documentElement.classList.add(${JSON.stringify(accentColor)},${JSON.stringify(baseColor)});})();<` +
+			'/script>'
+	);
+</script>
+
+<svelte:head>
+	{@html script}
+</svelte:head>

src/lib/website/Website.svelte

···
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
 	description={getDescription(data)}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Context {data}>