From d422d79aea67e85bea0f32122663b770b1a285d5 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Fri, 5 Jul 2024 22:04:41 -0600
Subject: [PATCH] add some links components

---
 .changeset/wild-clocks-tease.md      |  5 +++
 package.json                         | 15 +++++++
 src/lib/Community_Links.svelte       | 64 ++++++++++++++++++++++++++++
 src/lib/Community_Links_Panel.svelte |  8 ++++
 src/lib/Hidden_Personal_Links.svelte |  8 ++++
 src/routes/+page.svelte              | 12 ++----
 src/routes/about/+page.svelte        |  2 +
 src/routes/package.ts                | 18 ++++++++
 8 files changed, 123 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/wild-clocks-tease.md
 create mode 100644 src/lib/Community_Links.svelte
 create mode 100644 src/lib/Community_Links_Panel.svelte
 create mode 100644 src/lib/Hidden_Personal_Links.svelte

diff --git a/.changeset/wild-clocks-tease.md b/.changeset/wild-clocks-tease.md
new file mode 100644
index 000000000..4de6a085d
--- /dev/null
+++ b/.changeset/wild-clocks-tease.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+add `Community_Links.svelte`, `Community_Links_Panel.svelte`, and `Hidden_Personal_Links.svelte`
diff --git a/package.json b/package.json
index f2d471f8a..70eac2769 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,16 @@
       "svelte": "./dist/Color_Scheme_Input.svelte",
       "default": "./dist/Color_Scheme_Input.svelte"
     },
+    "./Community_Links_Panel.svelte": {
+      "types": "./dist/Community_Links_Panel.svelte.d.ts",
+      "svelte": "./dist/Community_Links_Panel.svelte",
+      "default": "./dist/Community_Links_Panel.svelte"
+    },
+    "./Community_Links.svelte": {
+      "types": "./dist/Community_Links.svelte.d.ts",
+      "svelte": "./dist/Community_Links.svelte",
+      "default": "./dist/Community_Links.svelte"
+    },
     "./config.js": {
       "types": "./dist/config.d.ts",
       "default": "./dist/config.js"
@@ -206,6 +216,11 @@
       "svelte": "./dist/Hashlink.svelte",
       "default": "./dist/Hashlink.svelte"
     },
+    "./Hidden_Personal_Links.svelte": {
+      "types": "./dist/Hidden_Personal_Links.svelte.d.ts",
+      "svelte": "./dist/Hidden_Personal_Links.svelte",
+      "default": "./dist/Hidden_Personal_Links.svelte"
+    },
     "./Hue_Input.svelte": {
       "types": "./dist/Hue_Input.svelte.d.ts",
       "svelte": "./dist/Hue_Input.svelte",
diff --git a/src/lib/Community_Links.svelte b/src/lib/Community_Links.svelte
new file mode 100644
index 000000000..aa9885d02
--- /dev/null
+++ b/src/lib/Community_Links.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	interface Props {
+		selected?: 'spiderspace.org' | 'webdevladder.net' | 'ryanatkn.com';
+	}
+
+	const {selected}: Props = $props();
+</script>
+
+<ul>
+	<li>
+		join <a rel="me" href="https://discord.gg/YU5tyeK72X">the Discord</a> community
+	</li>
+	<li>
+		<a
+			rel="me"
+			href="https://www.webdevladder.net/"
+			class:selected={selected === 'webdevladder.net'}>webdevladder.net</a
+		>
+		- realworld webdev with TypeScript and Svelte, YouTube channels
+		<a rel="me" href="https://youtube.com/@webdevladder">@webdevladder</a>
+		and
+		<a rel="me" href="https://youtube.com/@webdevladder_vods">@webdevladder_vods</a
+		>{#if selected === 'webdevladder.net'}, you are here{/if}
+	</li>
+	<li>
+		<a rel="me" href="https://www.spiderspace.org/" class:selected={selected === 'spiderspace.org'}
+			>spiderspace.org</a
+		>
+		- nontechnical design videos where we'll make a social website together with
+		<a href="https://zzz.ryanatkn.com/">Zzz</a> when it's ready, YouTube channel
+		<a rel="me" href="https://youtube.com/@spiderspace_8000">@spiderspace_8000</a
+		>{#if selected === 'spiderspace.org'}, you are here{/if}
+	</li>
+	<li>
+		<a rel="me" href="https://www.ryanatkn.com/" class:selected={selected === 'ryanatkn.com'}
+			>ryanatkn.com</a
+		>
+		- my homepage{#if selected === 'ryanatkn.com'}, you are here{/if}
+	</li>
+	<li>
+		GitHub - <a rel="me" href="https://github.com/ryanatkn">@ryanatkn</a> and
+		<a rel="me" href="https://github.com/spiderspace">@spiderspace</a>
+	</li>
+	<li>
+		Mastodon as
+		<a rel="me" href="https://mastodon.social/@webdevladder">@webdevladder@mastodon.social</a>
+		and
+		<a rel="me" href="https://hci.social/@ryanatkn">@ryanatkn@hci.social</a>
+	</li>
+	<li>
+		@webdevladder on <a rel="me" href="https://twitter.com/webdevladder">Twitter</a>,
+		<a rel="me" href="https://www.reddit.com/user/webdevladder/">Reddit</a>, and
+		<a href="https://news.ycombinator.com/user?id=webdevladder">Hacker News</a>
+	</li>
+	<li>
+		support me at <a href="https://www.ryanatkn.com/funding">ryanatkn.com/funding</a>
+	</li>
+</ul>
+
+<style>
+	li > a {
+		word-break: break-all;
+	}
+</style>
diff --git a/src/lib/Community_Links_Panel.svelte b/src/lib/Community_Links_Panel.svelte
new file mode 100644
index 000000000..cdf72594c
--- /dev/null
+++ b/src/lib/Community_Links_Panel.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Community_Links from '$lib/Community_Links.svelte';
+</script>
+
+<section class="panel p_lg">
+	<h2 class="mt_0 mb_lg">Links</h2>
+	<Community_Links />
+</section>
diff --git a/src/lib/Hidden_Personal_Links.svelte b/src/lib/Hidden_Personal_Links.svelte
new file mode 100644
index 000000000..d27f6d4ae
--- /dev/null
+++ b/src/lib/Hidden_Personal_Links.svelte
@@ -0,0 +1,8 @@
+<div hidden>
+	@ryanatkn@hci.social on <a rel="me" href="https://hci.social/@ryanatkn">Mastodon</a>
+</div>
+<div hidden>
+	@webdevladder@mastodon.social on <a rel="me" href="https://mastodon.social/@webdevladder"
+		>Mastodon</a
+	>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 562344df2..82ef83f10 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
 	import Card from '$lib/Card.svelte';
 	import {get_pkg} from '$routes/pkg.js';
 	import Fuz_Logo from '$lib/Fuz_Logo.svelte';
+	import Hidden_Personal_Links from '$lib/Hidden_Personal_Links.svelte';
 
 	const pkg = get_pkg();
 </script>
@@ -63,15 +64,8 @@
 				{#snippet logo_header()}
 					<a href="{base}/about" class="mb_xs">about</a>
 				{/snippet}
-				<div hidden>
-					@ryanatkn@hci.social on <a rel="me" href="https://hci.social/@ryanatkn">Mastodon</a>
-				</div>
-				<div hidden>
-					@webdevladder@mastodon.social on <a rel="me" href="https://mastodon.social/@webdevladder"
-						>Mastodon</a
-					>
-				</div></Library_Footer
-			>
+				<Hidden_Personal_Links />
+			</Library_Footer>
 		</section>
 	</div>
 </main>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 2f4041891..ffeb61668 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -5,6 +5,7 @@
 	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();
 
@@ -18,6 +19,7 @@
 		</header>
 		<Breadcrumb><Fuz_Logo size="32px" /></Breadcrumb>
 	</section>
+	<Community_Links_Panel />
 	<section class="box w_100 mb_lg">
 		<div class="panel p_md width_md">
 			<Package_Detail {pkg} />
diff --git a/src/routes/package.ts b/src/routes/package.ts
index 9fe473111..43c7abac8 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -95,6 +95,16 @@ export const package_json = {
 			svelte: './dist/Color_Scheme_Input.svelte',
 			default: './dist/Color_Scheme_Input.svelte',
 		},
+		'./Community_Links_Panel.svelte': {
+			types: './dist/Community_Links_Panel.svelte.d.ts',
+			svelte: './dist/Community_Links_Panel.svelte',
+			default: './dist/Community_Links_Panel.svelte',
+		},
+		'./Community_Links.svelte': {
+			types: './dist/Community_Links.svelte.d.ts',
+			svelte: './dist/Community_Links.svelte',
+			default: './dist/Community_Links.svelte',
+		},
 		'./config.js': {types: './dist/config.d.ts', default: './dist/config.js'},
 		'./Contextmenu_Entry.svelte': {
 			types: './dist/Contextmenu_Entry.svelte.d.ts',
@@ -180,6 +190,11 @@ export const package_json = {
 			svelte: './dist/Hashlink.svelte',
 			default: './dist/Hashlink.svelte',
 		},
+		'./Hidden_Personal_Links.svelte': {
+			types: './dist/Hidden_Personal_Links.svelte.d.ts',
+			svelte: './dist/Hidden_Personal_Links.svelte',
+			default: './dist/Hidden_Personal_Links.svelte',
+		},
 		'./Hue_Input.svelte': {
 			types: './dist/Hue_Input.svelte.d.ts',
 			svelte: './dist/Hue_Input.svelte',
@@ -355,6 +370,8 @@ export const src_json = {
 		'./Breadcrumb.svelte': {path: 'Breadcrumb.svelte', declarations: []},
 		'./Card.svelte': {path: 'Card.svelte', declarations: []},
 		'./Color_Scheme_Input.svelte': {path: 'Color_Scheme_Input.svelte', declarations: []},
+		'./Community_Links_Panel.svelte': {path: 'Community_Links_Panel.svelte', declarations: []},
+		'./Community_Links.svelte': {path: 'Community_Links.svelte', declarations: []},
 		'./config.js': {
 			path: 'config.ts',
 			declarations: [
@@ -411,6 +428,7 @@ export const src_json = {
 		'./Github_Logo.svelte': {path: 'Github_Logo.svelte', declarations: []},
 		'./Gro_Logo.svelte': {path: 'Gro_Logo.svelte', declarations: []},
 		'./Hashlink.svelte': {path: 'Hashlink.svelte', declarations: []},
+		'./Hidden_Personal_Links.svelte': {path: 'Hidden_Personal_Links.svelte', declarations: []},
 		'./Hue_Input.svelte': {path: 'Hue_Input.svelte', declarations: []},
 		'./Library_Content.svelte': {path: 'Library_Content.svelte', declarations: []},
 		'./Library_Footer.svelte': {path: 'Library_Footer.svelte', declarations: []},