allow customizing the library breadcrumb children

ryanatkn · Apr 14, 2024 · a521537 · a521537
1 parent d55f83b
commit a521537
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 16 deletions.
diff --git a/.changeset/silly-insects-deliver.md b/.changeset/silly-insects-deliver.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+allow customizing the library breadcrumb children
diff --git a/.changeset/tricky-knives-pump.md b/.changeset/tricky-knives-pump.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+fix `Package_Summary` homepage url
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
@@ -11,15 +11,15 @@
 	import Dialog from '$lib/Dialog.svelte';
 	import Library_Footer from '$lib/Library_Footer.svelte';
 	import {set_library_links} from '$lib/library.svelte.js';
-	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	interface Props {
 		tomes: Tome[];
 		pkg: Package_Meta;
+		breadcrumb_children?: Snippet<[is_primary_nav: boolean]>;
 		children: Snippet;
 	}
 
-	const {tomes, pkg, children}: Props = $props();
+	const {tomes, pkg, breadcrumb_children, children}: Props = $props();
 
 	// TODO this API is messy, inconsistent usage of props/context
 	const tomes_by_name = new Map(tomes.map((t) => [t.name, t]));
@@ -46,7 +46,7 @@
 <svelte:window bind:innerWidth onhashchange={() => (show_secondary_nav_dialog = false)} />
 
 <div class="library">
-	<Library_Primary_Nav>
+	<Library_Primary_Nav {pkg} {breadcrumb_children}>
 		<div class="nav_dialog_toggle">
 			<button class="plain" type="button" onclick={() => toggle_secondary_nav_dialog()}>menu</button
 			>
@@ -68,7 +68,13 @@
 			<section class="box">
 				<Library_Footer {pkg}>
 					<div class="mb_xl5">
-						<Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb>
+						<Breadcrumb>
+							{#if breadcrumb_children}
+								{@render breadcrumb_children(false)}
+							{:else}
+								{pkg.package_json.icon ?? '🏠'}
+							{/if}
+						</Breadcrumb>
 					</div>
 				</Library_Footer>
 			</section>
@@ -80,7 +86,15 @@
 {#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><Fuz_Logo size="32px" /></Breadcrumb></div>
+			<div class="p_xl pb_0">
+				<Breadcrumb>
+					{#if breadcrumb_children}
+						{@render breadcrumb_children(false)}
+					{:else}
+						{pkg.package_json.icon ?? '🏠'}
+					{/if}
+				</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_Primary_Nav.svelte b/src/lib/Library_Primary_Nav.svelte
@@ -2,38 +2,40 @@
 	import {page} from '$app/stores';
 	import {is_iframed} from '@ryanatkn/belt/dom.js';
 	import type {Snippet} from 'svelte';
+	import type {Package_Meta} from '@ryanatkn/gro/package_meta.js';
 
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
-	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	interface Props {
+		pkg: Package_Meta;
+		breadcrumb_children?: Snippet<[is_primary_nav: boolean]>;
 		children?: Snippet;
 	}
 
-	const {children}: Props = $props();
+	const {pkg, breadcrumb_children, children}: Props = $props();
 
 	// TODO this could be a prop passed by `Breadcrumb`, is commonly needed
 	const {pathname} = $derived($page.url);
-	const root = $derived(pathname === '/');
+	const selected_root = $derived(pathname === '/');
 
 	const iframed = is_iframed();
 	const enabled = !iframed;
 
 	// TODO BLOCK maybe when scrolled to the top, hide shadow, but show otherwise
+
+	// TODO BLOCK make this customizable, using snippet not pkg?
 </script>
 
 {#if enabled}
 	<div class="library_nav shadow_sm">
 		<div class="background" />
 		<div class="content">
-			<nav class:root>
+			<nav class:selected_root>
 				<Breadcrumb>
-					{#if root}
-						<span>fuz</span>
+					{#if breadcrumb_children}
+						{@render breadcrumb_children(true)}
 					{:else}
-						<div class="icon row">
-							<Fuz_Logo size="32px" /> <span class="ml_sm">fuz</span>
-						</div>
+						{pkg.package_json.icon ?? '🏠'}
 					{/if}
 				</Breadcrumb>
 			</nav>
@@ -86,7 +88,7 @@
 		}
 	}
 
-	.root {
+	.selected_root {
 		--text_decoration_selected: none;
 	}
 </style>
diff --git a/src/lib/Package_Summary.svelte b/src/lib/Package_Summary.svelte
@@ -50,7 +50,7 @@
 			{@render homepage_url(pkg.homepage_url)}
 		{:else}
 			<div class="homepage_url">
-				<a class="chip" class:selected={homepage_url === $page.url.href} href={homepage_url}
+				<a class="chip" class:selected={pkg.homepage_url === $page.url.href} href={pkg.homepage_url}
 					>{format_url(pkg.homepage_url)}</a
 				>
 			</div>

diff --git a/src/routes/library/+layout.svelte b/src/routes/library/+layout.svelte
@@ -7,6 +7,7 @@
 	import Style_Variable_Detail from '$routes/Style_Variable_Detail.svelte';
 	import Dialog from '$lib/Dialog.svelte';
 	import {get_pkg} from '$routes/pkg.js';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
 	interface Props {
 		children: Snippet;
@@ -20,6 +21,15 @@
 </script>
 
 <Library {tomes} {pkg}>
+	{#snippet breadcrumb_children(is_primary_nav)}
+		{#if is_primary_nav}
+			<div class="icon row">
+				<Fuz_Logo size="32px" /> <span class="ml_sm">fuz</span>
+			</div>
+		{:else}
+			<Fuz_Logo size="32px" />
+		{/if}
+	{/snippet}
 	{@render children()}
 </Library>