add logos for zzz and webdevladder (#33)

ryanatkn · Jul 2, 2024 · 41db609 · 41db609
1 parent 85b92a8
commit 41db609
Show file tree

Hide file tree

Showing 22 changed files with 445 additions and 195 deletions.
diff --git a/.changeset/big-glasses-do.md b/.changeset/big-glasses-do.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+add logos for webdevladder and zzz
diff --git a/.changeset/rare-wasps-wonder.md b/.changeset/rare-wasps-wonder.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+add support for `logo` and `logo_alt` in `Package_Json`
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "description": "Svelte UI library",
   "motto": "friendly user zystem",
   "glyph": "🧶",
+  "logo": "logo.svg",
+  "logo_alt": "a friendly brown spider facing you",
   "public": true,
   "license": "MIT",
   "homepage": "https://www.fuz.dev/",
@@ -18,17 +20,17 @@
   },
   "bugs": "https://github.com/ryanatkn/fuz/issues",
   "funding": "https://www.ryanatkn.com/funding",
-  "type": "module",
-  "engines": {
-    "node": ">=20.12"
-  },
   "scripts": {
     "dev": "gro dev",
     "build": "gro build",
     "deploy": "gro deploy",
     "start": "gro start",
     "test": "gro test"
   },
+  "type": "module",
+  "engines": {
+    "node": ">=20.12"
+  },
   "peerDependencies": {
     "@ryanatkn/belt": "*",
     "@ryanatkn/moss": "*",
@@ -40,8 +42,8 @@
     "@ryanatkn/belt": "^0.23.0",
     "@ryanatkn/eslint-config": "^0.1.3",
     "@ryanatkn/fuz_code": "^0.15.0",
-    "@ryanatkn/gro": "^0.127.0",
-    "@ryanatkn/moss": "^0.6.2",
+    "@ryanatkn/gro": "^0.127.1",
+    "@ryanatkn/moss": "^0.6.3",
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/kit": "^2.5.17",
     "@sveltejs/package": "^2.3.2",
@@ -189,10 +191,10 @@
       "svelte": "./dist/Fuz_Logo.svelte",
       "default": "./dist/Fuz_Logo.svelte"
     },
-    "./Fuz_Template_Logo.svelte": {
-      "types": "./dist/Fuz_Template_Logo.svelte.d.ts",
-      "svelte": "./dist/Fuz_Template_Logo.svelte",
-      "default": "./dist/Fuz_Template_Logo.svelte"
+    "./Fuzling.svelte": {
+      "types": "./dist/Fuzling.svelte.d.ts",
+      "svelte": "./dist/Fuzling.svelte",
+      "default": "./dist/Fuzling.svelte"
     },
     "./Github_Logo.svelte": {
       "types": "./dist/Github_Logo.svelte.d.ts",
@@ -356,6 +358,11 @@
       "types": "./dist/tome.d.ts",
       "default": "./dist/tome.js"
     },
+    "./Webdevladder_Logo.svelte": {
+      "types": "./dist/Webdevladder_Logo.svelte.d.ts",
+      "svelte": "./dist/Webdevladder_Logo.svelte",
+      "default": "./dist/Webdevladder_Logo.svelte"
+    },
     "./Zzz_Logo.svelte": {
       "types": "./dist/Zzz_Logo.svelte.d.ts",
       "svelte": "./dist/Zzz_Logo.svelte",

diff --git a/src/app.html b/src/app.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/logo.svg" sizes="any" type="image/svg+xml" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/lib/Fuz_Logo.svelte b/src/lib/Fuz_Logo.svelte
@@ -1,23 +1,39 @@
 <script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
 	import Spider from '$lib/Spider.svelte';
 
 	// TODO think about this API
 	interface Props {
+		fill?: string;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
 		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
 		label?: string;
+		classes?: string;
+		path_attrs?: SvelteHTMLElements['path'];
+		attrs?: SvelteHTMLElements['svg'];
 	}
 
-	const {size, label = 'the Fuz logo, a little brown spider'}: Props = $props();
-
-	// color:
-	// #6a3e1b
-	// hsl(27, 60%, 26%)
-	// rgb(106, 62, 27)
+	const {
+		fill = 'var(--color_f_5)',
+		size,
+		width,
+		height,
+		label = 'a friendly brown spider facing you',
+		classes,
+		path_attrs,
+		attrs,
+	}: Props = $props();
 </script>
 
-<span
-	style:--text_color="var(--color_f_5)"
-	class="inline_block"
-	style:width={size}
-	style:height={size}><Spider {label} /></span
->
+<Spider {fill} {size} {width} {height} {label} {classes} {path_attrs} {attrs} />
diff --git a/src/lib/Fuz_Template_Logo.svelte b/src/lib/Fuz_Template_Logo.svelte
diff --git a/src/lib/Fuzling.svelte b/src/lib/Fuzling.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	interface Props {
+		fill?: string;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
+		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
+		label?: string;
+		classes?: string;
+		path_attrs?: SvelteHTMLElements['path'];
+		attrs?: SvelteHTMLElements['svg'];
+	}
+
+	const {
+		fill = '#f75e22', // TODO change to Moss orange color when it's added
+		size,
+		width,
+		height,
+		label = 'a friendly pixelated spider facing you',
+		classes,
+		path_attrs,
+		attrs,
+	}: Props = $props();
+
+	const final_width = $derived(width ?? size);
+	const final_height = $derived(height ?? size);
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 100 100"
+	{...attrs}
+	aria-label={label}
+	width={final_width}
+	height={final_height}
+	class={classes}
+>
+	<g>
+		<path
+			{...path_attrs}
+			d="m 25,81.200002 h 6.2 v -12.5 h 6.3 v -18.7 h -6.3 v 6.2 H 12.5 v 6.3 H 0 v -6.3 h 6.2 v -6.2 H 25 v -6.3 h 12.5 v -6.2 h -6.3 v -6.3 H 18.7 v -6.2 H 6.2 v -6.3 H 25 v 6.3 h 12.5 v -6.3 H 31.2 V 6.2 h 6.3 v 6.300002 h 6.2 V 31.200001 H 56.2 V 12.500002 h 6.3 V 6.2 h 6.2 v 12.500001 h -6.2 v 18.800001 h 6.2 v -12.5 h 12.5 v -12.5 h 12.5 v 6.2 h -6.2 v 12.5 H 75 v 12.5 h 6.2 v 6.3 h 12.5 v 6.2 h 6.299997 v 6.3 H 87.5 v -6.3 H 75 v -6.2 h -6.3 v 12.5 H 75 v 12.5 h 6.2 V 99.99999 H 75 V 81.200002 h -6.3 v -12.5 h -6.2 v -12.5 H 43.7 v 18.8 h -6.2 v 12.5 H 31.2 V 99.99999 H 25 Z"
+			style:fill
+		/>
+	</g>
+</svg>
diff --git a/src/lib/Github_Logo.svelte b/src/lib/Github_Logo.svelte
@@ -1,27 +1,45 @@
 <script lang="ts">
 	interface Props {
-		size?: string;
 		fill?: string;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
+		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
 		label?: string;
+		classes?: string;
 		attrs?: any; // TODO type
 	}
 
 	const {
-		size = 'var(--space_xl7, 64px)',
 		fill = 'var(--text_color, #000)',
+		size = 'var(--space_xl7, 64px)',
+		width,
+		height,
 		label = 'the GitHub icon, an octocat silhouette',
+		classes,
 		attrs,
 	}: Props = $props();
+
+	const final_width = $derived(width ?? size);
+	const final_height = $derived(height ?? size);
 </script>
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	aria-label={label}
 	viewBox="0 0 1024 1024"
-	style:width={size}
-	style:height={size}
-	fill="none"
 	{...attrs}
+	aria-label={label}
+	style:width={final_width}
+	style:height={final_height}
+	class={classes}
 >
 	<path
 		{fill}

diff --git a/src/lib/Mdn_Link.svelte b/src/lib/Mdn_Link.svelte
@@ -25,21 +25,12 @@
 	const final_children = $derived(children ?? strip_end(href, '/').split('/').at(-1)!);
 </script>
 
-<a {...attrs} href={final_href} class="chip">
-	<span class="logo_wrapper"><Mdn_Logo /></span>{#if typeof final_children === 'string'}
+<a {...attrs} href={final_href} class="chip nowrap">
+	<Mdn_Logo
+		classes="inline_block mr_sm vertical_align_middle"
+	/>{#if typeof final_children === 'string'}
 		<span class="font_mono">{final_children}</span>
 	{:else}
 		{@render final_children()}
 	{/if}
 </a>
-
-<style>
-	a {
-		white-space: nowrap;
-	}
-	.logo_wrapper {
-		display: inline-block;
-		margin-right: var(--space_sm);
-		vertical-align: middle;
-	}
-</style>
diff --git a/src/lib/Mdn_Logo.svelte b/src/lib/Mdn_Logo.svelte
@@ -1,29 +1,45 @@
 <script lang="ts">
 	interface Props {
-		size?: string;
 		fill?: string;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
+		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
 		label?: string;
+		classes?: string;
 		attrs?: any;
 	}
 
 	const {
 		size = 'var(--size, var(--size_md))',
+		width,
+		height,
 		fill = '#8cb4ff',
 		label = 'GitHub icon',
+		classes,
 		attrs,
 	}: Props = $props();
 
-	// TODO do something more optimal
+	const final_width = $derived(width ?? size);
+	const final_height = $derived(height ?? size);
 </script>
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	aria-label={label}
 	viewBox="0 0 100 100"
-	style:width={size}
-	style:height={size}
-	fill="none"
 	{...attrs}
+	aria-label={label}
+	style:width={final_width}
+	style:height={final_height}
+	class={classes}
 >
 	<path
 		d="M42 .2 13.4 92.3H1.7L30.2.2Zm10.4 0v92.1H42V.2Zm40.3 0L64.2 92.3H52.5L81 .2Zm10.4 0v92.1H92.7V.2Z"