rename Spider from Fuz_Logo and publish Fuz_Logo and Spiders

ryanatkn · Apr 13, 2024 · 0f4908e · 0f4908e
1 parent d3b9aac
commit 0f4908e
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 103 deletions.
diff --git a/.changeset/quick-plants-tie.md b/.changeset/quick-plants-tie.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+rename `Spider` from `Fuz_Logo` and publish `Fuz_Logo` and `Spiders`
diff --git a/package.json b/package.json
@@ -278,6 +278,16 @@
       "default": "./dist/Redirect.svelte",
       "types": "./dist/Redirect.svelte.d.ts"
     },
+    "./Spider.svelte": {
+      "svelte": "./dist/Spider.svelte",
+      "default": "./dist/Spider.svelte",
+      "types": "./dist/Spider.svelte.d.ts"
+    },
+    "./Spiders.svelte": {
+      "svelte": "./dist/Spiders.svelte",
+      "default": "./dist/Spiders.svelte",
+      "types": "./dist/Spiders.svelte.d.ts"
+    },
     "./style_animations.css": {
       "default": "./dist/style_animations.css"
     },

diff --git a/src/lib/Fuz_Logo.svelte b/src/lib/Fuz_Logo.svelte
@@ -1,60 +1,28 @@
 <script lang="ts">
-	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {base} from '$app/paths';
 
+	import Spider from '$lib/Spider.svelte';
+
+	// TODO think about this API
 	interface Props {
 		size?: string;
-		fill?: string;
-		label?: string;
-		path_attrs?: SvelteHTMLElements['path'];
-		attrs?: SvelteHTMLElements['svg'];
+		image?: boolean;
+		src?: string;
+		alt?: string;
 	}
 
-	const {
-		size = '100%',
-		fill = 'var(--color, #000)',
-		label = 'the Fuz logo, a little brown spider',
-		path_attrs,
-		attrs,
-	}: Props = $props();
+	const {size, image = false, src, alt = 'the Fuz logo, a little brown spider'}: Props = $props();
 
-	// TODO do something more optimal preferring {@html}
+	// color:
+	// #6a3e1b
+	// hsl(27, 60%, 26%)
+	// rgb(106, 62, 27)
 </script>
 
-<!-- viewBox="0 0 1024 1024"
-style:width={size}
-style:height={size} 
-	<path
-		transform="scale(64)"
-	/>
--->
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	aria-label={label}
-	viewBox="0 0 100 100"
-	width={size}
-	height={size}
-	fill="none"
-	{...attrs}
->
-	<path
-		{fill}
-		d="M 26.253917,88.532336 29.904106,71.394855 40.667193,53.342811 40.258534,49.99234 38.417407,
-		49.000991 22.876908,50.369035 9.4865496,53.880193 2.3019024,57.978424 0.42708056,
-		57.27994 7.2642726,51.086985 20.811326,45.373351 37.960128,42.356792 39.354818,
-		40.107008 38.229925,38.149883 26.030989,27.105568 14.46539,21.861786 8.0479986,
-		18.615387 l -0.41428,-1.710463 8.2789464,1.499862 13.012873,5.003724 13.447448,
-		10.696856 1.680801,-0.729547 0.222439,-1.343157 -3.983998,-12.128053 -5.730215,
-		-9.573597 -0.823624,-5.1744052 1.16944,-1.165102 2.604334,6.3355162 6.612025,7.08777 4.874534,
-		11.55989 2.800804,0.515574 4.48815,-1.359246 1.521623,-8.687062 5.685014,-8.620764 2.75965,
-		-6.8316782 1.094578,1.128569 -1.293029,5.4222362 -4.084776,11.06803 -0.484994,
-		8.377408 0.194311,1.192896 1.42954,1.700726 11.563936,-10.644623 9.878262,-8.331535 8.732915,
-		-3.390708 -0.387305,1.402757 -5.294686,3.023816 -10.445054,10.705792 -9.561599,
-		13.627899 -0.438945,1.602755 1.001398,1.666754 17.376932,3.986302 9.537375,6.940531 4.325785,
-		4.636405 0.211208,1.557106 -6.15842,-4.279925 -10.413771,-5.155697 -15.838715,
-		-1.696223 -0.83461,1.144484 0.774499,2.593247 9.737644,16.194355 3.925704,17.214082 0.07146,
-		10.277289 -1.706242,1.13628 -2.009721,-9.21637 -5.894265,-16.88027 -12.292087,
-		-17.295813 -4.177778,-0.585888 -7.294671,2.935716 -11.138052,16.645915 -6.462422,
-		17.752509 -1.634756,7.206641 -2.070766,-1.52923 z"
-		{...path_attrs}
-	/>
-</svg>
+{#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}
diff --git a/src/lib/Github_Logo.svelte b/src/lib/Github_Logo.svelte
@@ -12,8 +12,6 @@
 		label = 'the GitHub icon, an octocat silhouette',
 		attrs,
 	}: Props = $props();
-
-	// TODO do something more optimal preferring {@html}
 </script>
 
 <svg

diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
@@ -11,7 +11,7 @@
 	import Dialog from '$lib/Dialog.svelte';
 	import Library_Footer from '$lib/Library_Footer.svelte';
 	import {set_library_links} from '$lib/library.svelte.js';
-	import Spider from '$routes/Spider.svelte';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	interface Props {
 		tomes: Tome[];
@@ -68,7 +68,7 @@
 			<section class="box">
 				<Library_Footer {pkg}>
 					<div class="mb_xl5">
-						<Breadcrumb><Spider size="32px" /></Breadcrumb>
+						<Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb>
 					</div>
 				</Library_Footer>
 			</section>
@@ -80,7 +80,7 @@
 {#if show_secondary_nav_dialog && innerWidth && innerWidth <= TERTIARY_NAV_BREAKPOINT}
 	<Dialog onclose={() => (show_secondary_nav_dialog = false)}>
 		<div class="pane">
-			<div class="p_xl pb_0"><Breadcrumb><Spider size="32px" /></Breadcrumb></div>
+			<div class="p_xl pb_0"><Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb></div>
 			<div class="px_lg pb_xl">
 				<Library_Secondary_Nav {tomes} sidebar={false} />
 				<Library_Tertiary_Nav {tomes} {tomes_by_name} sidebar={false} />

diff --git a/src/lib/Library_Content.svelte b/src/lib/Library_Content.svelte
@@ -4,16 +4,15 @@
 
 	import type {Tome} from '$lib/tome.js';
 	import Package_Summary from '$lib/Package_Summary.svelte';
-	import {get_pkg} from '$routes/pkg';
+	import type {Package_Meta} from '@ryanatkn/gro/package_meta.js';
 
 	interface Props {
 		root_path?: string;
 		tomes: Tome[];
+		pkg: Package_Meta;
 	}
 
-	const {root_path = '/library', tomes}: Props = $props();
-
-	const pkg = get_pkg();
+	const {root_path = '/library', tomes, pkg}: Props = $props();
 </script>
 
 {#if $page.url.pathname === base + root_path}

diff --git a/src/lib/Library_Primary_Nav.svelte b/src/lib/Library_Primary_Nav.svelte
@@ -4,7 +4,7 @@
 	import type {Snippet} from 'svelte';
 
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
-	import Spider from '$routes/Spider.svelte';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	interface Props {
 		children?: Snippet;
@@ -32,7 +32,7 @@
 						<span>fuz</span>
 					{:else}
 						<div class="icon row">
-							<Spider size="32px" /> <span class="ml_sm">fuz</span>
+							<Fuz_Logo size="32px" /> <span class="ml_sm">fuz</span>
 						</div>
 					{/if}
 				</Breadcrumb>

diff --git a/src/lib/Spider.svelte b/src/lib/Spider.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	interface Props {
+		size?: string;
+		fill?: string;
+		label?: string;
+		path_attrs?: SvelteHTMLElements['path'];
+		attrs?: SvelteHTMLElements['svg'];
+	}
+
+	const {
+		size = '100%',
+		fill = 'var(--color, #000)',
+		label = 'a little brown spider',
+		path_attrs,
+		attrs,
+	}: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-label={label}
+	viewBox="0 0 100 100"
+	width={size}
+	height={size}
+	fill="none"
+	{...attrs}
+>
+	<path
+		{fill}
+		d="M 26.253917,88.532336 29.904106,71.394855 40.667193,53.342811 40.258534,49.99234 38.417407,
+		49.000991 22.876908,50.369035 9.4865496,53.880193 2.3019024,57.978424 0.42708056,
+		57.27994 7.2642726,51.086985 20.811326,45.373351 37.960128,42.356792 39.354818,
+		40.107008 38.229925,38.149883 26.030989,27.105568 14.46539,21.861786 8.0479986,
+		18.615387 l -0.41428,-1.710463 8.2789464,1.499862 13.012873,5.003724 13.447448,
+		10.696856 1.680801,-0.729547 0.222439,-1.343157 -3.983998,-12.128053 -5.730215,
+		-9.573597 -0.823624,-5.1744052 1.16944,-1.165102 2.604334,6.3355162 6.612025,7.08777 4.874534,
+		11.55989 2.800804,0.515574 4.48815,-1.359246 1.521623,-8.687062 5.685014,-8.620764 2.75965,
+		-6.8316782 1.094578,1.128569 -1.293029,5.4222362 -4.084776,11.06803 -0.484994,
+		8.377408 0.194311,1.192896 1.42954,1.700726 11.563936,-10.644623 9.878262,-8.331535 8.732915,
+		-3.390708 -0.387305,1.402757 -5.294686,3.023816 -10.445054,10.705792 -9.561599,
+		13.627899 -0.438945,1.602755 1.001398,1.666754 17.376932,3.986302 9.537375,6.940531 4.325785,
+		4.636405 0.211208,1.557106 -6.15842,-4.279925 -10.413771,-5.155697 -15.838715,
+		-1.696223 -0.83461,1.144484 0.774499,2.593247 9.737644,16.194355 3.925704,17.214082 0.07146,
+		10.277289 -1.706242,1.13628 -2.009721,-9.21637 -5.894265,-16.88027 -12.292087,
+		-17.295813 -4.177778,-0.585888 -7.294671,2.935716 -11.138052,16.645915 -6.462422,
+		17.752509 -1.634756,7.206641 -2.070766,-1.52923 z"
+		{...path_attrs}
+	/>
+</svg>
diff --git a/src/routes/Spiders.svelte → src/lib/Spiders.svelte b/src/routes/Spiders.svelte → src/lib/Spiders.svelte
@@ -9,10 +9,11 @@
 </script>
 
 <script lang="ts">
-	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 	import {random_int, shuffle} from '@ryanatkn/belt/random.js';
 	import {create_random_alea} from '@ryanatkn/belt/random_alea.js';
 
+	import Spider from '$lib/Spider.svelte';
+
 	interface Props {
 		spiders?: string[]; // for now, just colors
 		seed?: unknown;
@@ -41,7 +42,7 @@
 <div class="spiders" style:--width="{100 / spiders.length}%">
 	{#each shuffled as color (color)}
 		<div style:--color={color} class="col_2">
-			<Fuz_Logo />
+			<Spider />
 		</div>
 	{/each}
 </div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 	import Themed from '$lib/Themed.svelte';
 	import {set_pkg} from '$routes/pkg.js';
 	import {package_json, src_json} from '$routes/package.js';
-	import Spiders from '$routes/Spiders.svelte';
+	import Spiders from '$lib/Spiders.svelte';
 	// TODO re-enable this, see comment below
 	// import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';
 	// import Dialog from '$lib/Dialog.svelte';

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 	import Library_Footer from '$lib/Library_Footer.svelte';
 	import Card from '$lib/Card.svelte';
 	import {get_pkg} from '$routes/pkg.js';
-	import Spider from '$routes/Spider.svelte';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	const pkg = get_pkg();
 </script>
@@ -13,7 +13,7 @@
 	<div class="box width_md">
 		<section class="box">
 			<h1 class="mt_xl4 mb_lg">fuz</h1>
-			<div class="box mb_xl"><Spider size="120px" /></div>
+			<div class="box mb_xl"><Fuz_Logo size="120px" /></div>
 			<blockquote>friendly user zystem</blockquote>
 			<div class="width_sm panel p_md">
 				<p>

diff --git a/src/routes/Spider.svelte b/src/routes/Spider.svelte
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -2,7 +2,7 @@
 	import Package_Detail from '$lib/Package_Detail.svelte';
 	import Library_Footer from '$lib/Library_Footer.svelte';
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
-	import Spider from '$routes/Spider.svelte';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	import {get_pkg} from '$routes/pkg.js';
 
@@ -16,7 +16,7 @@
 		<header class="box">
 			<h1 class="mt_xl4">{pkg.repo_name}</h1>
 		</header>
-		<Breadcrumb><Spider size="32px" /></Breadcrumb>
+		<Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb>
 	</section>
 	<section class="box w_100 mb_lg">
 		<div class="panel p_md width_md">
@@ -26,7 +26,7 @@
 	<section class="box mb_xl7">
 		<Library_Footer {pkg}>
 			<div class="mb_xl5">
-				<Breadcrumb><Spider size="32px" /></Breadcrumb>
+				<Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb>
 			</div>
 		</Library_Footer>
 	</section>

diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import Library_Content from '$lib/Library_Content.svelte';
 	import {get_tomes} from '$lib/tome.js';
+	import {get_pkg} from '$routes/pkg.js';
 
 	const tomes_by_name = get_tomes();
 
 	const tomes = Array.from(tomes_by_name.values());
+
+	const pkg = get_pkg();
 </script>
 
-<Library_Content {tomes} />
+<Library_Content {tomes} {pkg} />
diff --git a/src/routes/package.ts b/src/routes/package.ts
@@ -243,6 +243,16 @@ export const package_json = {
 			default: './dist/Redirect.svelte',
 			types: './dist/Redirect.svelte.d.ts',
 		},
+		'./Spider.svelte': {
+			svelte: './dist/Spider.svelte',
+			default: './dist/Spider.svelte',
+			types: './dist/Spider.svelte.d.ts',
+		},
+		'./Spiders.svelte': {
+			svelte: './dist/Spiders.svelte',
+			default: './dist/Spiders.svelte',
+			types: './dist/Spiders.svelte.d.ts',
+		},
 		'./style_animations.css': {default: './dist/style_animations.css'},
 		'./style_components.css': {default: './dist/style_components.css'},
 		'./style_reset.css': {default: './dist/style_reset.css'},
@@ -397,6 +407,8 @@ export const src_json = {
 		'./Pending_Animation.svelte': {path: 'Pending_Animation.svelte', declarations: []},
 		'./Pending_Button.svelte': {path: 'Pending_Button.svelte', declarations: []},
 		'./Redirect.svelte': {path: 'Redirect.svelte', declarations: []},
+		'./Spider.svelte': {path: 'Spider.svelte', declarations: []},
+		'./Spiders.svelte': {path: 'Spiders.svelte', declarations: []},
 		'./style_animations.css': {path: 'style_animations.css', declarations: []},
 		'./style_components.css': {path: 'style_components.css', declarations: []},
 		'./style_reset.css': {path: 'style_reset.css', declarations: []},