add Project_Links.svelte and use it in Community_Links_Panel.svelte

.changeset/tasty-parrots-bow.md

@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+add `Project_Links.svelte` and use it in `Community_Links_Panel.svelte`

package.json

@@ -305,6 +305,11 @@
       "svelte": "./dist/Pending_Button.svelte",
       "default": "./dist/Pending_Button.svelte"
     },
+    "./Project_Links.svelte": {
+      "types": "./dist/Project_Links.svelte.d.ts",
+      "svelte": "./dist/Project_Links.svelte",
+      "default": "./dist/Project_Links.svelte"
+    },
     "./Redirect.svelte": {
       "types": "./dist/Redirect.svelte.d.ts",
       "svelte": "./dist/Redirect.svelte",

src/lib/Community_Links_Panel.svelte

@@ -1,8 +1,22 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte';
+
 	import Community_Links from '$lib/Community_Links.svelte';
+	import Project_Links from '$lib/Project_Links.svelte';
+
+	interface Props {
+		children?: Snippet;
+	}
+
+	const {children}: Props = $props();
 </script>
 
 <section class="panel p_lg">
-	<h2 class="mt_0 mb_lg">Links</h2>
+	{#if children}
+		{@render children()}
+	{:else}
+		<h2 class="mt_0 mb_lg">Links</h2>
+	{/if}
 	<Community_Links />
+	<div class="box row"><Project_Links /></div>
 </section>

src/lib/Project_Links.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Zzz_Logo from '$lib/Zzz_Logo.svelte';
+	import Moss_Logo from '$lib/Moss_Logo.svelte';
+	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
+	import Gro_Logo from '$lib/Gro_Logo.svelte';
+	import Fuzling from '$lib/Fuzling.svelte';
+
+	const size = 'var(--icon_size_lg)';
+</script>
+
+<!--<a href="https://www.spiderspace.org/"></a>--><!--<a href="https://www.webdevladder.net/"></a>--><a
+	class="project_link"
+	title="Zzz - social web app framework"
+	href="https://zzz.ryanatkn.com/"><Zzz_Logo {size} /><span class="name">Zzz</span></a
+>
+<a class="project_link" title="Moss - CSS framework" href="https://moss.ryanatkn.com/"
+	><Moss_Logo {size} /><span class="name">Moss</span></a
+>
+<a class="project_link" title="Fuz - Svelte UI library" href="https://www.fuz.dev/"
+	><Fuz_Logo {size} /><span class="name">Fuz</span></a
+>
+<a
+	class="project_link"
+	title="Gro - task runner and toolkit extending SvelteKit"
+	href="https://gro.ryanatkn.com/"><Gro_Logo {size} /><span class="name">Gro</span></a
+>
+<a
+	class="project_link"
+	title="fuz_template - a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Fuz, and Gro"
+	href="https://template.fuz.dev/"><Fuzling {size} /><span class="name">fuz_template</span></a
+>
+
+<style>
+	.project_link {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: var(--space_md);
+		text-align: center;
+	}
+
+	.project_link:hover {
+		text-decoration: none;
+	}
+	.project_link:hover .name {
+		text-decoration: underline;
+	}
+
+	.project_link .name {
+		display: block;
+		margin-top: var(--size_sm);
+		font-size: var(--size_lg);
+		font-weight: 400;
+	}
+</style>

src/routes/about/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
+	import {get_pkg} from '$routes/pkg.js';
+	import Community_Links_Panel from '$lib/Community_Links_Panel.svelte';
 	import Package_Detail from '$lib/Package_Detail.svelte';
 	import Library_Footer from '$lib/Library_Footer.svelte';
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
 	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
 
-	import {get_pkg} from '$routes/pkg.js';
-	import Community_Links_Panel from '$lib/Community_Links_Panel.svelte';
-
 	const pkg = get_pkg();
 
 	// TODO standardize

src/routes/package.ts

@@ -279,6 +279,11 @@ export const package_json = {
 			svelte: './dist/Pending_Button.svelte',
 			default: './dist/Pending_Button.svelte',
 		},
+		'./Project_Links.svelte': {
+			types: './dist/Project_Links.svelte.d.ts',
+			svelte: './dist/Project_Links.svelte',
+			default: './dist/Project_Links.svelte',
+		},
 		'./Redirect.svelte': {
 			types: './dist/Redirect.svelte.d.ts',
 			svelte: './dist/Redirect.svelte',
@@ -457,6 +462,7 @@ export const src_json = {
 		'./Package_Summary.svelte': {path: 'Package_Summary.svelte', declarations: []},
 		'./Pending_Animation.svelte': {path: 'Pending_Animation.svelte', declarations: []},
 		'./Pending_Button.svelte': {path: 'Pending_Button.svelte', declarations: []},
+		'./Project_Links.svelte': {path: 'Project_Links.svelte', declarations: []},
 		'./Redirect.svelte': {path: 'Redirect.svelte', declarations: []},
 		'./rune_helpers.svelte.js': {
 			path: 'rune_helpers.svelte.ts',