From 9222875c97a4b85801e81d65e3a8d9a208aaadb1 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 14 Apr 2024 13:51:23 -0600
Subject: [PATCH] rework logo component APIs

---
 .changeset/fluffy-years-argue.md |  5 +++++
 src/lib/Fuz_Logo.svelte          | 18 +++++-------------
 src/lib/Fuz_Template_Logo.svelte | 12 ++++--------
 src/lib/Moss_Logo.svelte         | 12 ++++--------
 src/lib/Spiderspace_Logo.svelte  | 12 ++++--------
 src/lib/Zzz_Logo.svelte          | 12 ++++--------
 6 files changed, 26 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/fluffy-years-argue.md

diff --git a/.changeset/fluffy-years-argue.md b/.changeset/fluffy-years-argue.md
new file mode 100644
index 000000000..68e97055a
--- /dev/null
+++ b/.changeset/fluffy-years-argue.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+rework logo component APIs
diff --git a/src/lib/Fuz_Logo.svelte b/src/lib/Fuz_Logo.svelte
index 688281659..0d9da55c8 100644
--- a/src/lib/Fuz_Logo.svelte
+++ b/src/lib/Fuz_Logo.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
-	import {base} from '$app/paths';
-
 	import Spider from '$lib/Spider.svelte';
 
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		image?: boolean;
-		src?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, image = false, src, alt = 'the Fuz logo, a little brown spider'}: Props = $props();
+	const {size, label = 'the Fuz logo, a little brown spider'}: Props = $props();
 
 	// color:
 	// #6a3e1b
@@ -19,10 +15,6 @@
 	// rgb(106, 62, 27)
 </script>
 
-{#if image}<img src={src ?? `${base}/favicon.png`} {alt} width={size} height={size} />{:else}<span
-		aria-label={alt}
-		style:--color="var(--color_f_5)"
-		class="inline_block"
-		style:width={size}
-		style:height={size}><Spider /></span
-	>{/if}
+<span style:--color="var(--color_f_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
+>
diff --git a/src/lib/Fuz_Template_Logo.svelte b/src/lib/Fuz_Template_Logo.svelte
index 54caad6d1..46cb9d8b2 100644
--- a/src/lib/Fuz_Template_Logo.svelte
+++ b/src/lib/Fuz_Template_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the fuz_template logo, a little purple spider'}: Props = $props();
+	const {size, label = 'the fuz_template logo, a little purple spider'}: Props = $props();
 
 	// color:
 	// #6a40bf
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_d_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_d_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
diff --git a/src/lib/Moss_Logo.svelte b/src/lib/Moss_Logo.svelte
index 9aa05a079..8c0d087c4 100644
--- a/src/lib/Moss_Logo.svelte
+++ b/src/lib/Moss_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Moss logo, a fuzzy tuft of green moss'}: Props = $props();
+	const {size, label = 'the Moss logo, a fuzzy tuft of green moss'}: Props = $props();
 
 	// TODO publish a plain SVG probably
 
@@ -17,12 +17,8 @@
 	// rgb(41, 142, 41)
 </script>
 
-<span
-	aria-label={alt}
-	style:--color="var(--color_b_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_b_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
 
 <style>
diff --git a/src/lib/Spiderspace_Logo.svelte b/src/lib/Spiderspace_Logo.svelte
index ea7fbf155..1c61d0ce5 100644
--- a/src/lib/Spiderspace_Logo.svelte
+++ b/src/lib/Spiderspace_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Spiderspace logo, a little yellow spider'}: Props = $props();
+	const {size, label = 'the Spiderspace logo, a little yellow spider'}: Props = $props();
 
 	// color:
 	// #b19a25
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_e_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_e_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >
diff --git a/src/lib/Zzz_Logo.svelte b/src/lib/Zzz_Logo.svelte
index dcc4ce5bc..916f8a2d8 100644
--- a/src/lib/Zzz_Logo.svelte
+++ b/src/lib/Zzz_Logo.svelte
@@ -4,10 +4,10 @@
 	// TODO think about this API
 	interface Props {
 		size?: string;
-		alt?: string;
+		label?: string;
 	}
 
-	const {size, alt = 'the Zzz logo, a little pink spider'}: Props = $props();
+	const {size, label = 'the Zzz logo, a little pink spider'}: Props = $props();
 
 	// color:
 	// #e03e81
@@ -16,10 +16,6 @@
 </script>
 
 <!-- TODO could potentially support the `image` option like `Fuz_Logo` -->
-<span
-	aria-label={alt}
-	style:--color="var(--color_g_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider /></span
+<span style:--color="var(--color_g_5)" class="inline_block" style:width={size} style:height={size}
+	><Spider {label} /></span
 >