upgrade moss and some components

ryanatkn · Apr 16, 2024 · 72056e3 · 72056e3
1 parent c6fe125
commit 72056e3
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 112 deletions.
diff --git a/.changeset/gentle-hats-talk.md b/.changeset/gentle-hats-talk.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+upgrade: `@ryanatkn/moss@0.2.0`
diff --git a/README.md b/README.md
@@ -4,8 +4,9 @@
 
 > friendly user zystem 🧶 [fuz.dev](https://www.fuz.dev/)
 
-Fuz is a [Svelte](https://svelte.dev/) UI library.
-It's in early alpha and there will be many breaking changes.
+Fuz is a [Svelte](https://svelte.dev/) UI library
+with components and helpers for making excellent websites.
+It's in early alpha and it will go through many breaking changes.
 
 Fuz is being made to support [my other projects](https://www.ryanatkn.com/)
 that focus on end-users.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@ryanatkn/eslint-config": "^0.1.2",
     "@ryanatkn/fuz_code": "^0.11.0",
     "@ryanatkn/gro": "^0.115.2",
-    "@ryanatkn/moss": "^0.1.0",
+    "@ryanatkn/moss": "^0.2.0",
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.5.6",
     "@sveltejs/package": "^2.3.1",
@@ -355,5 +355,8 @@
       "default": "./dist/Zzz_Logo.svelte",
       "types": "./dist/Zzz_Logo.svelte.d.ts"
     }
+  },
+  "dependencies": {
+    "@ryanatkn/fuz": "^0.98.1"
   }
 }
diff --git a/src/lib/Card.svelte b/src/lib/Card.svelte
@@ -86,10 +86,10 @@
 		text-align: center;
 	}
 	.link {
-		box-shadow: var(--shadow_inset_md);
+		box-shadow: var(--shadow, var(--shadow_outset_sm));
 	}
 	.link:active {
-		box-shadow: var(--shadow_inset_inverse_md);
+		box-shadow: var(--shadow, var(--shadow_inset_sm));
 	}
 	.link.selected .content,
 	.link:hover .content {

diff --git a/src/lib/Dialog.svelte b/src/lib/Dialog.svelte
@@ -147,7 +147,7 @@
 
 <style>
 	.dialog {
-		--pane_shadow: var(--shadow_lg);
+		--pane_shadow: var(--shadow_xl);
 		position: fixed;
 		inset: 0;
 		overflow: auto;

diff --git a/src/lib/Library_Footer.svelte b/src/lib/Library_Footer.svelte
@@ -20,7 +20,7 @@
 
 <footer class="box">
 	{#if children}{@render children()}{/if}
-	<div class="logo box panel p_lg">
+	<div class="logo box panel p_lg shadow_inset_xs">
 		{#if logo_header}{@render logo_header()}{/if}
 		<a href={pkg.repo_url} rel="me" title="source code on GitHub"
 			>{#if logo}{@render logo()}{:else}<Github_Logo />{/if}</a

diff --git a/src/lib/Library_Primary_Nav.svelte b/src/lib/Library_Primary_Nav.svelte
@@ -27,7 +27,7 @@
 </script>
 
 {#if enabled}
-	<div class="library_nav shadow_sm">
+	<div class="library_nav shadow_xs">
 		<div class="background" />
 		<div class="content">
 			<nav class:selected_root>

diff --git a/src/lib/Package_Summary.svelte b/src/lib/Package_Summary.svelte
@@ -7,13 +7,14 @@
 	interface Props {
 		pkg: Package_Meta; // TODO normalized version with cached primitives?
 		repo_name?: Snippet<[repo_name: string]>;
+		motto?: Snippet<[motto: string, icon?: string]>;
 		description?: Snippet<[description: string, icon?: string]>;
 		npm_url?: Snippet<[npm_url: string]>;
 		homepage_url?: Snippet<[homepage_url: string]>;
 		children?: Snippet;
 	}
 
-	const {pkg, repo_name, description, npm_url, homepage_url, children}: Props = $props();
+	const {pkg, repo_name, motto, description, npm_url, homepage_url, children}: Props = $props();
 
 	const {package_json} = $derived(pkg);
 </script>
@@ -34,15 +35,26 @@
 			alt="logo for {pkg.repo_name}"
 		/>
 	</header>
+	{#if package_json.motto}
+		{#if motto}
+			{@render motto(package_json.motto, package_json.icon)}
+		{:else}
+			<blockquote>
+				{package_json.motto}
+				{package_json.icon}
+			</blockquote>
+		{/if}
+	{/if}
 	{#if package_json.description}
 		{#if description}
 			{@render description(package_json.description, package_json.icon)}
 		{:else}
-			<blockquote class="description">
+			<p>
 				{package_json.description}
-				{package_json.icon}
-				{package_json.motto}
-			</blockquote>
+				{#if !package_json.motto}
+					{package_json.icon}
+				{/if}
+			</p>
 		{/if}
 	{/if}
 	{#if children}{@render children()}{/if}
@@ -95,10 +107,6 @@
 		display: flex;
 		margin-bottom: var(--space_lg);
 	}
-	.description {
-		margin-bottom: var(--space_lg);
-		text-align: center;
-	}
 	.homepage_url {
 		margin-bottom: var(--space_lg);
 	}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -14,11 +14,12 @@
 		<section class="box">
 			<h1 class="mt_xl4 mb_lg">fuz</h1>
 			<div class="box mb_xl"><Fuz_Logo size="120px" /></div>
-			<blockquote class="shadow_inset_inverse_md px_xl">friendly user zystem</blockquote>
-			<div class="width_sm panel p_xs shadow_inset_inverse_md bg">
-				<div class="panel p_lg shadow_inset_inverse_md bg">
+			<blockquote class="shadow_inset_sm px_xl">friendly user zystem</blockquote>
+			<div class="width_sm panel p_xs shadow_inset_sm bg">
+				<div class="panel p_lg shadow_inset_sm bg">
 					<p>
-						Fuz is a Svelte UI library. It's in early alpha and it'll have many breaking changes.
+						Fuz is a Svelte UI library with components and helpers for making excellent websites.
+						It's in early alpha and it will go through many breaking changes.
 					</p>
 					<p>
 						Fuz is being made to support <a href="https://www.ryanatkn.com/table"
@@ -38,22 +39,24 @@
 		<section>
 			<Card href="{base}/library">library{#snippet icon()}🧶{/snippet}</Card>
 		</section>
-		<section class="panel p_xs shadow_inset_inverse_md bg">
-			<div class="panel p_lg shadow_inset_inverse_md bg">
+		<section class="panel p_xs shadow_inset_xs bg">
+			<div class="panel p_lg shadow_inset_sm bg">
 				<!-- TODO ideally this wouldn't duplicate metadata like descriptions, but adding fuz_gitops to this repo is heavy -->
 				<h2 class="mt_0 mb_xl2 px_md">other packages</h2>
 				<menu class="unstyled">
-					<a class="chip bg shadow_inset_md px_md py_xs2 radius_sm" href="https://template.fuz.dev/"
-						>fuz_template</a
+					<a
+						class="chip bg shadow_outset_xs px_md py_xs2 radius_sm"
+						href="https://template.fuz.dev/">fuz_template</a
 					>
-					<a class="chip bg shadow_inset_md px_md py_xs2 radius_sm" href="https://gitops.fuz.dev/"
+					<a class="chip bg shadow_outset_xs px_md py_xs2 radius_sm" href="https://gitops.fuz.dev/"
 						>fuz_gitops</a
 					>
-					<a class="chip bg shadow_inset_md px_md py_xs2 radius_sm" href="https://code.fuz.dev/"
+					<a class="chip bg shadow_outset_xs px_md py_xs2 radius_sm" href="https://code.fuz.dev/"
 						>fuz_code</a
 					>
-					<a class="chip bg shadow_inset_md px_md py_xs2 radius_sm" href="https://mastodon.fuz.dev/"
-						>fuz_mastodon</a
+					<a
+						class="chip bg shadow_outset_xs px_md py_xs2 radius_sm"
+						href="https://mastodon.fuz.dev/">fuz_mastodon</a
 					>
 				</menu>
 			</div>
@@ -86,6 +89,6 @@
 		font-size: var(--size_lg);
 	}
 	a.chip:active {
-		box-shadow: var(--shadow_inset_inverse_md);
+		box-shadow: var(--shadow_inset_sm);
 	}
 </style>
diff --git a/src/routes/package.ts b/src/routes/package.ts
@@ -38,7 +38,7 @@ export const package_json = {
 		'@ryanatkn/eslint-config': '^0.1.2',
 		'@ryanatkn/fuz_code': '^0.11.0',
 		'@ryanatkn/gro': '^0.115.2',
-		'@ryanatkn/moss': '^0.1.0',
+		'@ryanatkn/moss': '^0.2.0',
 		'@sveltejs/adapter-static': '^3.0.1',
 		'@sveltejs/kit': '^2.5.6',
 		'@sveltejs/package': '^2.3.1',
@@ -322,6 +322,7 @@ export const package_json = {
 			types: './dist/Zzz_Logo.svelte.d.ts',
 		},
 	},
+	dependencies: {'@ryanatkn/fuz': '^0.98.1'},
 } satisfies Package_Json;
 
 export const src_json = {