improve package components

ryanatkn · Apr 14, 2024 · b25a4c6 · b25a4c6
1 parent 45ba76d
commit b25a4c6
Show file tree

Hide file tree

Showing 10 changed files with 141 additions and 88 deletions.
diff --git a/.changeset/fair-ads-beg.md b/.changeset/fair-ads-beg.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+improve package components
diff --git a/.changeset/rich-pumpkins-arrive.md b/.changeset/rich-pumpkins-arrive.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+add `icon_size_xl3`
diff --git a/src/lib/Package_Detail.svelte b/src/lib/Package_Detail.svelte
@@ -65,92 +65,110 @@
 
 <div class="package_detail">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
-	<header>
-		{#if repo_name}
-			{@render repo_name(pkg.repo_name)}
-		{:else}
-			<div class="repo_name">
-				{pkg.repo_name}{#if package_json.icon}{' '}{package_json.icon}{/if}
-			</div>
-		{/if}
-	</header>
-	{#if children}{@render children(pkg)}{/if}
-	{#if package_json.description}
-		{#if description}
-			{@render description(package_json.description)}
-		{:else}
-			<div class="description">{package_json.description}</div>
-		{/if}
-	{/if}
-	{#if pkg.npm_url}
-		{#if npm_url}
-			{@render npm_url(pkg.npm_url)}
-		{:else}
-			<blockquote class="npm_url">npm i -D {package_json.name}</blockquote>
-		{/if}
-	{/if}
-	<section class="properties">
-		{#if pkg.homepage_url}
-			{#if homepage_url}
-				{@render homepage_url(pkg.homepage_url)}
-			{:else}
-				<span class="title">homepage</span>
-				<div class="content">
-					<a
-						class="chip"
-						class:selected={pkg.homepage_url === $page.url.href}
-						href={pkg.homepage_url}
-					>
-						<img
-							src="{ensure_end(pkg.homepage_url, '/')}favicon.png"
-							alt="favicon to homepage at {pkg.homepage_url}"
-							style:width="16px"
-							style:height="16px"
-							style:margin-right="var(--space_xs)"
-						/>
-						{format_url(pkg.homepage_url)}
-					</a>
-				</div>
-			{/if}
-		{/if}
-		{#if pkg.repo_url}
-			<span class="title">repo</span>
-			<div class="content">
-				<a class="chip" title="repo" href={pkg.repo_url}>{pkg.repo_name}</a>
-			</div>
-		{/if}
-		{#if pkg.npm_url}
-			<span class="title">npm</span>
-			<div class="content">
-				<a class="chip" title="npm" href={pkg.npm_url}>{package_json.name}</a>
-			</div>
-		{/if}
-		{#if pkg.changelog_url}
-			<span class="title">version</span>
-			<div class="content">
-				<a class="chip" title="version" href={pkg.changelog_url}>{package_json.version}</a>
-			</div>
-		{/if}
-		{#if license_url}
-			<span class="title">license</span>
-			<div class="content">
-				<a class="chip" title="license" href={license_url}>{package_json.license}</a>
-			</div>
-		{/if}
-		{#if pkg.homepage_url}
-			<span class="title">data</span>
-			<div class="content">
-				<a
-					class="chip"
-					title="data"
-					href="{ensure_end(pkg.homepage_url, '/')}.well-known/package.json">package.json</a
-				>
-				<a class="chip" title="data" href="{ensure_end(pkg.homepage_url, '/')}.well-known/src.json"
-					>src.json</a
-				>
+	<div class="info">
+		<div class="flex flex_1">
+			<!-- add yet another wrapper so it flows like we want -->
+			<div>
+				<header>
+					{#if repo_name}
+						{@render repo_name(pkg.repo_name)}
+					{:else}
+						<div class="repo_name">
+							{pkg.repo_name}{#if package_json.icon}{' '}{package_json.icon}{/if}
+						</div>
+					{/if}
+				</header>
+				{#if children}{@render children(pkg)}{/if}
+				{#if package_json.description}
+					{#if description}
+						{@render description(package_json.description)}
+					{:else}
+						<div class="description">{package_json.description}</div>
+					{/if}
+				{/if}
+				{#if pkg.npm_url}
+					{#if npm_url}
+						{@render npm_url(pkg.npm_url)}
+					{:else}
+						<blockquote class="npm_url">npm i -D {package_json.name}</blockquote>
+					{/if}
+				{/if}
+				<!-- TODO accessible HTML -->
+				<section class="properties">
+					{#if pkg.homepage_url}
+						{#if homepage_url}
+							{@render homepage_url(pkg.homepage_url)}
+						{:else}
+							<span class="title">homepage</span>
+							<div class="content">
+								<a
+									class="chip"
+									class:selected={pkg.homepage_url === $page.url.href}
+									href={pkg.homepage_url}
+								>
+									<img
+										src="{ensure_end(pkg.homepage_url, '/')}favicon.png"
+										alt="favicon to homepage at {pkg.homepage_url}"
+										style:width="16px"
+										style:height="16px"
+										style:margin-right="var(--space_xs)"
+									/>
+									{format_url(pkg.homepage_url)}
+								</a>
+							</div>
+						{/if}
+					{/if}
+					{#if pkg.repo_url}
+						<span class="title">repo</span>
+						<div class="content">
+							<a class="chip" title="repo" href={pkg.repo_url}>{pkg.repo_name}</a>
+						</div>
+					{/if}
+					{#if pkg.npm_url}
+						<span class="title">npm</span>
+						<div class="content">
+							<a class="chip" title="npm" href={pkg.npm_url}>{package_json.name}</a>
+						</div>
+					{/if}
+					{#if pkg.changelog_url}
+						<span class="title">version</span>
+						<div class="content">
+							<a class="chip" title="version" href={pkg.changelog_url}>{package_json.version}</a>
+						</div>
+					{/if}
+					{#if license_url}
+						<span class="title">license</span>
+						<div class="content">
+							<a class="chip" title="license" href={license_url}>{package_json.license}</a>
+						</div>
+					{/if}
+					{#if pkg.homepage_url}
+						<span class="title">data</span>
+						<div class="content">
+							<a
+								class="chip"
+								title="data"
+								href="{ensure_end(pkg.homepage_url, '/')}.well-known/package.json">package.json</a
+							>
+							<a
+								class="chip"
+								title="data"
+								href="{ensure_end(pkg.homepage_url, '/')}.well-known/src.json">src.json</a
+							>
+						</div>
+					{/if}
+				</section>
 			</div>
-		{/if}
-	</section>
+		</div>
+		<div class="logo">
+			<img
+				style:width="var(--size, var(--icon_size_xl3))"
+				style:height="var(--size, var(--icon_size_xl3))"
+				src="{pkg.homepage_url}/favicon.png"
+				alt="logo for {pkg.repo_name}"
+			/>
+		</div>
+	</div>
 	{#if modules && pkg.repo_url}
 		<section>
 			<menu class="unstyled">
@@ -204,9 +222,22 @@
 		width: 100%;
 		max-width: var(--max_width, var(--width_md));
 	}
+
+	.info {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.logo {
+		flex-shrink: 0;
+		padding: 0 var(--space_xl);
+	}
+
 	header {
 		margin-bottom: var(--space_lg);
 	}
+
 	section {
 		width: 100%;
 		margin-bottom: var(--space_lg);

diff --git a/src/lib/Package_Summary.svelte b/src/lib/Package_Summary.svelte
@@ -31,7 +31,7 @@
 			style:width="var(--size, var(--icon_size_xl2))"
 			style:height="var(--size, var(--icon_size_xl2))"
 			src="{pkg.homepage_url}/favicon.png"
-			alt="favicon for {pkg.repo_name}"
+			alt="logo for {pkg.repo_name}"
 		/>
 	</header>
 	{#if package_json.description}

diff --git a/src/lib/Spiders.svelte b/src/lib/Spiders.svelte
@@ -35,13 +35,14 @@
 	}: Props = $props();
 
 	const shuffled = $derived(shuffle(spiders.slice(), (min, max) => random_int(min, max, random)));
+	const rotations = $derived(shuffled.map(() => random_int(0, 359, random)));
 </script>
 
 <!-- TODO animate each in randomly -->
 <!-- TODO show when intersected in viewport, maybe inline `svelte-intersect` in Fuz? -->
 <div class="spiders" style:--width="{100 / spiders.length}%">
-	{#each shuffled as color (color)}
-		<div style:--color={color} class="col_2">
+	{#each shuffled as color, i (color)}
+		<div style:--color={color} class="col_2" style:transform="rotate({rotations[i]}deg)">
 			<Spider />
 		</div>
 	{/each}
@@ -51,6 +52,7 @@
 	.spiders {
 		position: relative;
 		z-index: -1;
+		overflow: hidden;
 		margin-top: var(--space_xl9);
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);

diff --git a/src/lib/style.css b/src/lib/style.css
@@ -1085,6 +1085,9 @@ text
 .icon_size_xl2 {
 	font-size: var(--icon_size_xl2);
 }
+.icon_size_xl3 {
+	font-size: var(--icon_size_xl3);
+}
 
 .text_align_center {
 	text-align: center;

diff --git a/src/lib/style_utilities.css b/src/lib/style_utilities.css
@@ -239,6 +239,9 @@ text
 .icon_size_xl2 {
 	font-size: var(--icon_size_xl2);
 }
+.icon_size_xl3 {
+	font-size: var(--icon_size_xl3);
+}
 
 .text_align_center {
 	text-align: center;

diff --git a/src/lib/theme.css b/src/lib/theme.css
@@ -228,6 +228,7 @@
 	--icon_size_lg: 80px;
 	--icon_size_xl: 128px;
 	--icon_size_xl2: 192px;
+	--icon_size_xl3: 256px;
 	--duration_1: 0.08s;
 	--duration_2: 0.2s;
 	--duration_3: 0.5s;

diff --git a/src/lib/variables.ts b/src/lib/variables.ts
@@ -648,6 +648,7 @@ export const icon_size_md: Style_Variable = {name: 'icon_size_md', light: '48px'
 export const icon_size_lg: Style_Variable = {name: 'icon_size_lg', light: '80px'};
 export const icon_size_xl: Style_Variable = {name: 'icon_size_xl', light: '128px'};
 export const icon_size_xl2: Style_Variable = {name: 'icon_size_xl2', light: '192px'};
+export const icon_size_xl3: Style_Variable = {name: 'icon_size_xl3', light: '256px'};
 
 /* durations */
 // TODO maybe change the scale from xs-xl, and add an xs here around 0.04s or 0.03s
@@ -931,6 +932,7 @@ export const default_variables: Style_Variable[] = [
 	icon_size_lg,
 	icon_size_xl,
 	icon_size_xl2,
+	icon_size_xl3,
 
 	/* durations */
 	duration_1,

diff --git a/src/routes/package.ts b/src/routes/package.ts
@@ -701,6 +701,7 @@ export const src_json = {
 				{name: 'icon_size_lg', kind: 'variable'},
 				{name: 'icon_size_xl', kind: 'variable'},
 				{name: 'icon_size_xl2', kind: 'variable'},
+				{name: 'icon_size_xl3', kind: 'variable'},
 				{name: 'duration_1', kind: 'variable'},
 				{name: 'duration_2', kind: 'variable'},
 				{name: 'duration_3', kind: 'variable'},