feat: fetch members dynamically from Bluesky list via AT Protocol

- Add @atproto/api service layer with caching and agent management
- Extend ProjectCard component to support optional avatars and handles
- Implement server-side list member fetching with alphabetical sorting
- Replace static MEMBERS array with dynamic data from list
- Add proper error handling and graceful degradation

.vscode/settings.json

···
 {
     "cSpell.words": [
+        "atproto",
         "colours",
         "jollywhoppers",
+        "lineheight",
         "revitalisation",
         "Witchsky"
     ]

package.json

···
 		"vite": "^7.2.6"
 	},
 	"dependencies": {
+		"@atproto/api": "^0.18.8",
 		"@lucide/svelte": "^0.562.0"
 	}
 }

pnpm-lock.yaml

···
 
   .:
     dependencies:
+      '@atproto/api':
+        specifier: ^0.18.8
+        version: 0.18.8
       '@lucide/svelte':
         specifier: ^0.562.0
         version: 0.562.0(svelte@5.46.0)
···
         version: 7.3.0
 
 packages:
+
+  '@atproto/api@0.18.8':
+    resolution: {integrity: sha512-Qo3sGd1N5hdHTaEWUBgptvPkULt2SXnMcWRhveSyctSd/IQwTMyaIH6E62A1SU+8xBSN5QLpoUJNE7iSrYM2Zg==}
+
+  '@atproto/common-web@0.4.7':
+    resolution: {integrity: sha512-vjw2+81KPo2/SAbbARGn64Ln+6JTI0FTI4xk8if0ebBfDxFRmHb2oSN1y77hzNq/ybGHqA2mecfhS03pxC5+lg==}
+
+  '@atproto/lex-data@0.0.3':
+    resolution: {integrity: sha512-ivo1IpY/EX+RIpxPgCf4cPhQo5bfu4nrpa1vJCt8hCm9SfoonJkDFGa0n4SMw4JnXZoUcGcrJ46L+D8bH6GI2g==}
+
+  '@atproto/lex-json@0.0.3':
+    resolution: {integrity: sha512-ZVcY7XlRfdPYvQQ2WroKUepee0+NCovrSXgXURM3Xv+n5jflJCoczguROeRr8sN0xvT0ZbzMrDNHCUYKNnxcjw==}
+
+  '@atproto/lexicon@0.6.0':
+    resolution: {integrity: sha512-5veb8aD+J5M0qszLJ+73KSFsFrJBgAY/nM1TSAJvGY7fNc9ZAT+PSUlmIyrdye9YznAZ07yktalls/TwNV7cHQ==}
+
+  '@atproto/syntax@0.4.2':
+    resolution: {integrity: sha512-X9XSRPinBy/0VQ677j8VXlBsYSsUXaiqxWVpGGxJYsAhugdQRb0jqaVKJFtm6RskeNkV6y9xclSUi9UYG/COrA==}
+
+  '@atproto/xrpc@0.7.7':
+    resolution: {integrity: sha512-K1ZyO/BU8JNtXX5dmPp7b5UrkLMMqpsIa/Lrj5D3Su+j1Xwq1m6QJ2XJ1AgjEjkI1v4Muzm7klianLE6XGxtmA==}
 
   '@esbuild/aix-ppc64@0.27.2':
     resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
···
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
+  await-lock@2.2.2:
+    resolution: {integrity: sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
···
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
+  iso-datestring-validator@2.2.2:
+    resolution: {integrity: sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==}
+
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
···
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  multiformats@9.9.0:
+    resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
···
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tlds@1.261.0:
+    resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
+    hasBin: true
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uint8arrays@3.0.0:
+    resolution: {integrity: sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==}
+
+  unicode-segmenter@0.14.4:
+    resolution: {integrity: sha512-pR5VCiCrLrKOL6FRW61jnk9+wyMtKKowq+jyFY9oc6uHbWKhDL4yVRiI4YZPksGMK72Pahh8m0cn/0JvbDDyJg==}
+
   vite@7.3.0:
     resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
     engines: {node: ^20.19.0 || >=22.12.0}
···
   zimmerframe@1.1.4:
     resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
 snapshots:
 
+  '@atproto/api@0.18.8':
+    dependencies:
+      '@atproto/common-web': 0.4.7
+      '@atproto/lexicon': 0.6.0
+      '@atproto/syntax': 0.4.2
+      '@atproto/xrpc': 0.7.7
+      await-lock: 2.2.2
+      multiformats: 9.9.0
+      tlds: 1.261.0
+      zod: 3.25.76
+
+  '@atproto/common-web@0.4.7':
+    dependencies:
+      '@atproto/lex-data': 0.0.3
+      '@atproto/lex-json': 0.0.3
+      zod: 3.25.76
+
+  '@atproto/lex-data@0.0.3':
+    dependencies:
+      '@atproto/syntax': 0.4.2
+      multiformats: 9.9.0
+      tslib: 2.8.1
+      uint8arrays: 3.0.0
+      unicode-segmenter: 0.14.4
+
+  '@atproto/lex-json@0.0.3':
+    dependencies:
+      '@atproto/lex-data': 0.0.3
+      tslib: 2.8.1
+
+  '@atproto/lexicon@0.6.0':
+    dependencies:
+      '@atproto/common-web': 0.4.7
+      '@atproto/syntax': 0.4.2
+      iso-datestring-validator: 2.2.2
+      multiformats: 9.9.0
+      zod: 3.25.76
+
+  '@atproto/syntax@0.4.2': {}
+
+  '@atproto/xrpc@0.7.7':
+    dependencies:
+      '@atproto/lexicon': 0.6.0
+      zod: 3.25.76
+
   '@esbuild/aix-ppc64@0.27.2':
     optional: true
 
···
 
   aria-query@5.3.2: {}
 
+  await-lock@2.2.2: {}
+
   axobject-query@4.1.0: {}
 
   chokidar@4.0.3:
···
     dependencies:
       '@types/estree': 1.0.8
 
+  iso-datestring-validator@2.2.2: {}
+
   kleur@4.1.5: {}
 
   locate-character@3.0.0: {}
···
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
+
+  multiformats@9.9.0: {}
 
   nanoid@3.3.11: {}
 
···
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tlds@1.261.0: {}
+
   totalist@3.0.1: {}
 
+  tslib@2.8.1: {}
+
   typescript@5.9.3: {}
+
+  uint8arrays@3.0.0:
+    dependencies:
+      multiformats: 9.9.0
+
+  unicode-segmenter@0.14.4: {}
 
   vite@7.3.0:
     dependencies:
···
       vite: 7.3.0
 
   zimmerframe@1.1.4: {}
+
+  zod@3.25.76: {}

src/lib/components/ProjectCard.svelte

···
 <script lang="ts">
 	import { ExternalLink } from '@lucide/svelte';
 
-	let { title, href = '#' } = $props<{ title: string; href?: string }>();
+	let { title, href = '#', avatar, handle } = $props<{ 
+		title: string; 
+		href?: string;
+		avatar?: string;
+		handle?: string;
+	}>();
 </script>
 
-<a {href} class="project-card">
-	<h3 class="project-title">{title}</h3>
+<a {href} class="project-card" target="_blank" rel="noopener noreferrer">
+	{#if avatar}
+		<img src={avatar} alt={title} class="project-avatar" />
+	{/if}
+	<div class="project-text">
+		<h3 class="project-title">{title}</h3>
+		{#if handle}
+			<p class="project-handle">@{handle}</p>
+		{/if}
+	</div>
 	<ExternalLink size={20} class="project-icon" />
 	<div class="card-shine"></div>
 </a>
···
 	.project-card {
 		position: relative;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--size-2);
+		gap: var(--size-3);
 		min-height: 180px;
 		padding: var(--size-6);
 		background: var(--color-surface);
···
 		box-shadow: var(--shadow-3);
 	}
 
+	.project-avatar {
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		object-fit: cover;
+		transition: transform var(--ease-out-3) 300ms;
+		z-index: 1;
+	}
+
+	.project-card:hover .project-avatar {
+		transform: scale(1.05);
+	}
+
+	.project-text {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--size-1);
+		width: 100%;
+		z-index: 1;
+	}
+
 	.project-title {
 		position: relative;
 		margin: 0;
···
 		text-align: center;
 		line-height: var(--font-lineheight-2);
 		transition: color var(--ease-out-3) 300ms;
-		z-index: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+	}
+
+	.project-handle {
+		margin: 0;
+		color: rgba(67, 87, 173, 0.7);
+		font-size: var(--font-size-1);
+		font-weight: var(--font-weight-5);
+		text-align: center;
+		line-height: var(--font-lineheight-2);
+		transition: color var(--ease-out-3) 300ms;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
 	}
 
 	.project-card :global(.project-icon) {
-		position: relative;
+		position: absolute;
+		top: var(--size-3);
+		right: var(--size-3);
 		color: rgba(67, 87, 173, 0.5);
 		transition: all var(--ease-out-3) 300ms;
 		z-index: 1;
···
 		color: var(--color-primary-600);
 	}
 
+	.project-card:hover .project-handle {
+		color: var(--color-primary-500);
+	}
+
 	.project-card:hover :global(.project-icon) {
 		color: var(--color-primary-600);
 		transform: translate(4px, -4px);
···
 			padding: var(--size-4);
 		}
 
+		.project-avatar {
+			width: 48px;
+			height: 48px;
+		}
+
 		.project-title {
 			font-size: var(--font-size-2);
 		}
 
+		.project-handle {
+			font-size: var(--font-size-0);
+		}
+
 		.project-card :global(.project-icon) {
 			width: 16px;
 			height: 16px;
···
 		.project-card,
 		.card-shine,
 		.project-title,
+		.project-handle,
+		.project-avatar,
 		.project-card::before,
 		.project-card :global(.project-icon) {
 			transition: none;
···
 			transform: none;
 		}
 
+		.project-card:hover .project-avatar,
 		.project-card:hover :global(.project-icon) {
 			transform: none;
 		}

src/lib/components/ProjectGrid.svelte

···
 		projects = []
 	} = $props<{
 		title?: string;
-		projects?: Array<{ title: string; href?: string }>;
+		projects?: Array<{ title: string; href?: string; avatar?: string; handle?: string }>;
 	}>();
 </script>
 
···
 	<div class="project-grid">
 		{#each projects as project, i}
 			<div class="grid-item" style="--delay: {i * 80}ms">
-				<ProjectCard title={project.title} href={project.href} />
+				<ProjectCard 
+					title={project.title} 
+					href={project.href}
+					avatar={project.avatar}
+					handle={project.handle}
+				/>
 			</div>
 		{/each}
 	</div>

src/lib/components/index.ts

···
 export type Project = {
 	title: string;
 	href?: string;
+	// Optional member-specific fields
+	avatar?: string;
+	handle?: string;
 };
 
 export type AboutItem = {

src/lib/constants.ts

···
 	{ title: 'Contributor 3', href: '#' }
 ];
 
-export const MEMBERS: Project[] = [
-	{ title: 'Member 1', href: '#' },
-	{ title: 'Member 2', href: '#' },
-	{ title: 'Member 3', href: '#' }
-];
+// Members are now fetched dynamically from Bluesky list
+// See src/routes/+page.server.ts for the fetch logic
 
 export const ABOUT_ITEMS: AboutItem[] = [];
 

src/lib/services/atproto/README.md

···
+# AT Protocol Service for Jollywhoppers
+
+This directory contains a DRY (Don't Repeat Yourself) service for fetching member data from a Bluesky list using the AT Protocol. Members are displayed using the existing `ProjectCard` component, which has been extended to support optional avatars and handles.
+
+## Architecture
+
+The service is modeled after the implementation in [Ewan's website](https://ewancroft.uk) and follows best practices for AT Protocol data fetching.
+
+### Files
+
+- **`types.ts`** - TypeScript type definitions for profiles, lists, and cache entries
+- **`cache.ts`** - In-memory caching with TTL support to reduce API calls
+- **`agents.ts`** - AT Protocol agent creation with PDS resolution via Slingshot
+- **`list.ts`** - Core logic for fetching list members and their profiles
+- **`index.ts`** - Public API exports
+
+## Usage
+
+### Server-Side Data Loading
+
+```typescript
+// src/routes/+page.server.ts
+import { fetchListMembers } from '$lib/services/atproto';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  const LIST_URI = 'at://did:plc:lwckcyzhyrufq4ytg2abji7d/app.bsky.graph.list/3mas22fg3ud2y';
+  const listMembers = await fetchListMembers(LIST_URI, fetch);
+  
+  return {
+    members: listMembers.members
+  };
+};
+```
+
+### Component Usage
+
+```svelte
+<script lang="ts">
+  import { ProjectGrid } from '$lib/components';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+</script>
+
+<!-- Members use the same component as Projects for consistency -->
+<ProjectGrid title="Members" projects={data.members} />
+```
+
+## Features
+
+### Smart Agent Resolution
+
+- Attempts to resolve the list owner's PDS via Slingshot
+- Falls back to Bluesky public API if PDS is unavailable
+- Caches resolved agents for performance
+
+### Profile Fetching
+
+- Fetches profiles in batches of 25 to avoid rate limits
+- Gracefully handles failed profile fetches
+- Continues fetching even if individual profiles fail
+
+### Caching
+
+- 5-minute default TTL for cached data
+- Reduces API calls for frequently accessed lists
+- Can be cleared or customized as needed
+
+### Error Handling
+
+- Comprehensive error logging
+- Graceful degradation on failures
+- Returns empty arrays instead of throwing errors
+
+## List URI Format
+
+The list URI follows the AT Protocol format:
+
+```plaintext
+at://[DID]/app.bsky.graph.list/[RKEY]
+```
+
+Example:
+
+```plaintext
+at://did:plc:lwckcyzhyrufq4ytg2abji7d/app.bsky.graph.list/3mas22fg3ud2y
+```
+
+## Visual Design
+
+The `ProjectCard` component has been extended to support optional member-specific fields:
+
+- `avatar` - Profile picture URL
+- `handle` - Bluesky handle
+
+When these fields are present, the card displays:
+
+- Avatar
+- Display name as title
+- Handle below the title
+- Link to Bluesky profile
+
+When these fields are absent (for Projects/Contributors), the card displays:
+
+- Simple title with icon
+- Standard hover effects
+
+This unified component approach ensures:
+
+- **Visual consistency** across all sections
+- **DRY principle** - no duplicate card components
+- **Flexible design** - gracefully adapts to available data
+
+Member data is transformed into the `Project` format:
+
+```typescript
+{
+  title: member.displayName || member.handle,
+  href: `https://witchsky.app/profile/${member.handle}`,
+  avatar: member.avatar,    // Optional
+  handle: member.handle      // Optional
+}
+```
+
+## Dependencies
+
+- `@atproto/api` - Official AT Protocol client library
+
+## Installation
+
+```bash
+npm install @atproto/api
+# or
+pnpm install @atproto/api
+```
+
+## Configuration
+
+Update the list URI in `src/routes/+page.server.ts`:
+
+```typescript
+const JOLLYWHOPPERS_LIST_URI = 'at://[YOUR_DID]/app.bsky.graph.list/[YOUR_RKEY]';
+```
+
+## Performance Considerations
+
+1. **Server-Side Rendering** - Data is fetched server-side for better performance and SEO
+2. **Caching** - Reduces redundant API calls
+3. **Batch Fetching** - Profiles are fetched in batches to avoid rate limits
+4. **Parallel Requests** - Uses `Promise.all()` for concurrent fetching

src/lib/services/atproto/agents.ts

···
+import { AtpAgent } from '@atproto/api';
+import type { ResolvedIdentity } from './types';
+
+/**
+ * Creates an AtpAgent with optional fetch function injection
+ */
+export function createAgent(service: string, fetchFn?: typeof fetch): AtpAgent {
+	// If we have an injected fetch, wrap it to ensure we handle headers correctly
+	const wrappedFetch = fetchFn
+		? async (url: URL | RequestInfo, init?: RequestInit) => {
+				// Convert URL to string if needed
+				const urlStr = url instanceof URL ? url.toString() : url;
+
+				// Make the request with the injected fetch
+				const response = await fetchFn(urlStr, init);
+
+				// Create a new response with the same body but add content-type if missing
+				const headers = new Headers(response.headers);
+				if (!headers.has('content-type')) {
+					headers.set('content-type', 'application/json');
+				}
+
+				return new Response(response.body, {
+					status: response.status,
+					statusText: response.statusText,
+					headers
+				});
+			}
+		: undefined;
+
+	return new AtpAgent({
+		service,
+		...(wrappedFetch && { fetch: wrappedFetch })
+	});
+}
+
+// Default Bluesky public API agent
+export const defaultAgent = createAgent('https://public.api.bsky.app');
+
+// Cached agents
+let resolvedAgent: AtpAgent | null = null;
+let pdsAgent: AtpAgent | null = null;
+
+/**
+ * Resolves a DID to find its PDS endpoint using Slingshot.
+ */
+export async function resolveIdentity(
+	did: string,
+	fetchFn?: typeof fetch
+): Promise<ResolvedIdentity> {
+	console.info(`[Identity] Resolving DID: ${did}`);
+
+	// Prefer an injected fetch (from SvelteKit load), fall back to global fetch
+	const _fetch = fetchFn ?? globalThis.fetch;
+
+	const response = await _fetch(
+		`https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(
+			did
+		)}`
+	);
+
+	if (!response.ok) {
+		console.error(`[Identity] Resolution failed: ${response.status} ${response.statusText}`);
+		throw new Error(
+			`Failed to resolve identifier via Slingshot: ${response.status} ${response.statusText}`
+		);
+	}
+
+	const rawText = await response.text();
+	console.debug(`[Identity] Raw response:`, rawText);
+	let data: any;
+	try {
+		data = JSON.parse(rawText);
+	} catch (err) {
+		console.error('[Identity] Failed to parse identity resolver response as JSON', err);
+		throw err;
+	}
+
+	if (!data.did || !data.pds) {
+		throw new Error('Invalid response from identity resolver');
+	}
+
+	return data;
+}
+
+/**
+ * Gets or creates an agent for the public Bluesky API with PDS fallback
+ */
+export async function getPublicAgent(did: string, fetchFn?: typeof fetch): Promise<AtpAgent> {
+	console.info(`[Agent] Getting public agent for DID: ${did}`);
+	if (resolvedAgent) {
+		console.debug('[Agent] Using cached agent');
+		return resolvedAgent;
+	}
+
+	try {
+		// Try Slingshot for PDS resolution
+		console.info('[Agent] Attempting Slingshot resolution');
+		const resolved = await resolveIdentity(did, fetchFn);
+		console.info(`[Agent] Resolved PDS endpoint: ${resolved.pds}`);
+		resolvedAgent = createAgent(resolved.pds, fetchFn);
+		return resolvedAgent;
+	} catch (err) {
+		console.error('[Agent] Slingshot failed, falling back to Bluesky:', err);
+		resolvedAgent = defaultAgent;
+		return resolvedAgent;
+	}
+}
+
+/**
+ * Gets or creates a PDS-specific agent
+ */
+export async function getPDSAgent(did: string, fetchFn?: typeof fetch): Promise<AtpAgent> {
+	if (pdsAgent) return pdsAgent;
+
+	try {
+		const resolved = await resolveIdentity(did, fetchFn);
+		pdsAgent = createAgent(resolved.pds, fetchFn);
+		return pdsAgent;
+	} catch (err) {
+		console.error('Failed to resolve PDS for DID:', err);
+		throw err;
+	}
+}
+
+/**
+ * Executes a function with automatic fallback from Bluesky public API to user's PDS
+ */
+export async function withFallback<T>(
+	did: string,
+	operation: (agent: AtpAgent) => Promise<T>,
+	usePDSFirst = false,
+	fetchFn?: typeof fetch
+): Promise<T> {
+	const defaultAgentFn = () =>
+		fetchFn ? createAgent('https://public.api.bsky.app', fetchFn) : Promise.resolve(defaultAgent);
+
+	const agents = usePDSFirst
+		? [() => getPDSAgent(did, fetchFn), defaultAgentFn]
+		: [defaultAgentFn, () => getPDSAgent(did, fetchFn)];
+
+	let lastError: any;
+
+	for (const getAgent of agents) {
+		try {
+			const agent = await getAgent();
+			return await operation(agent);
+		} catch (error) {
+			console.warn('Operation failed, trying next agent:', error);
+			lastError = error;
+		}
+	}
+
+	throw lastError;
+}
+
+/**
+ * Resets cached agents (useful for testing or when identity changes)
+ */
+export function resetAgents(): void {
+	resolvedAgent = null;
+	pdsAgent = null;
+}

src/lib/services/atproto/cache.ts

···
+import type { CacheEntry } from './types';
+
+/**
+ * Simple in-memory cache with TTL support
+ */
+export class ATProtoCache {
+	private cache = new Map<string, CacheEntry<any>>();
+	private defaultTTL: number;
+
+	constructor(defaultTTL: number = 5 * 60 * 1000) {
+		// 5 minutes default
+		this.defaultTTL = defaultTTL;
+	}
+
+	/**
+	 * Gets a cached value if it exists and hasn't expired
+	 */
+	get<T>(key: string): T | null {
+		const entry = this.cache.get(key);
+		if (!entry) return null;
+
+		const now = Date.now();
+		if (now - entry.timestamp > this.defaultTTL) {
+			this.cache.delete(key);
+			return null;
+		}
+
+		return entry.data as T;
+	}
+
+	/**
+	 * Sets a value in the cache
+	 */
+	set<T>(key: string, data: T): void {
+		this.cache.set(key, {
+			data,
+			timestamp: Date.now()
+		});
+	}
+
+	/**
+	 * Clears the entire cache
+	 */
+	clear(): void {
+		this.cache.clear();
+	}
+
+	/**
+	 * Removes a specific key from the cache
+	 */
+	delete(key: string): void {
+		this.cache.delete(key);
+	}
+}
+
+// Export a singleton instance
+export const cache = new ATProtoCache();

src/lib/services/atproto/index.ts

···
+/**
+ * Unified AT Protocol service exports for Jollywhoppers
+ *
+ * This module provides a clean API for interacting with AT Protocol services,
+ * specifically for fetching Bluesky list members and their profile data.
+ */
+
+// Export all types
+export type {
+	ProfileData,
+	ResolvedIdentity,
+	CacheEntry,
+	ListItem,
+	ListMember,
+	ListMembersData
+} from './types';
+
+// Export list functions
+export { fetchListMembers } from './list';
+
+// Export utility functions
+export { resolveIdentity, withFallback, resetAgents } from './agents';
+
+// Export cache for advanced use cases
+export { cache, ATProtoCache } from './cache';

src/lib/services/atproto/list.ts

···
+import { cache } from './cache';
+import { withFallback, defaultAgent } from './agents';
+import type { ListMembersData, ListMember, ListItem, ProfileData } from './types';
+
+/**
+ * Parses an AT URI to extract the DID and record key
+ */
+function parseAtUri(uri: string): { did: string; collection: string; rkey: string } | null {
+	const match = uri.match(/^at:\/\/([^\/]+)\/([^\/]+)\/([^\/]+)$/);
+	if (!match) return null;
+
+	return {
+		did: match[1],
+		collection: match[2],
+		rkey: match[3]
+	};
+}
+
+/**
+ * Fetches all list items (members) from a Bluesky list with pagination
+ */
+async function fetchListItems(
+	listUri: string,
+	fetchFn?: typeof fetch
+): Promise<ListItem[]> {
+	console.info(`[List] Fetching list items from: ${listUri}`);
+	
+	const parsed = parseAtUri(listUri);
+	if (!parsed) {
+		throw new Error(`Invalid list URI: ${listUri}`);
+	}
+
+	const allItems: ListItem[] = [];
+	let cursor: string | undefined;
+
+	const agent = fetchFn ? defaultAgent : defaultAgent;
+
+	try {
+		do {
+			const response = await withFallback(
+				parsed.did,
+				async (agent) => {
+					const res = await agent.com.atproto.repo.listRecords({
+						repo: parsed.did,
+						collection: 'app.bsky.graph.listitem',
+						limit: 100,
+						cursor
+					});
+					return res.data;
+				},
+				true,
+				fetchFn
+			);
+
+			// Filter items that belong to this specific list
+			const listItems = response.records
+				.filter((record: any) => record.value.list === listUri)
+				.map((record: any) => ({
+					uri: record.uri,
+					subject: record.value.subject,
+					createdAt: record.value.createdAt
+				}));
+
+			allItems.push(...listItems);
+			cursor = response.cursor;
+		} while (cursor);
+
+		console.info(`[List] Found ${allItems.length} list items`);
+		return allItems;
+	} catch (error) {
+		console.error('[List] Failed to fetch list items:', error);
+		throw error;
+	}
+}
+
+/**
+ * Fetches profile data for a list of DIDs
+ */
+async function fetchProfiles(
+	dids: string[],
+	fetchFn?: typeof fetch
+): Promise<Map<string, ProfileData>> {
+	console.info(`[List] Fetching profiles for ${dids.length} DIDs`);
+	
+	const profiles = new Map<string, ProfileData>();
+	const agent = fetchFn ? defaultAgent : defaultAgent;
+
+	// Fetch profiles in batches to avoid overwhelming the API
+	const batchSize = 25;
+	for (let i = 0; i < dids.length; i += batchSize) {
+		const batch = dids.slice(i, i + batchSize);
+		
+		await Promise.all(
+			batch.map(async (did) => {
+				try {
+					const profile = await withFallback(
+						did,
+						async (agent) => {
+							const response = await agent.getProfile({ actor: did });
+							return response.data;
+						},
+						false,
+						fetchFn
+					);
+
+					profiles.set(did, {
+						did: profile.did,
+						handle: profile.handle,
+						displayName: profile.displayName,
+						description: profile.description,
+						avatar: profile.avatar,
+						banner: profile.banner,
+						followersCount: profile.followersCount,
+						followsCount: profile.followsCount,
+						postsCount: profile.postsCount
+					});
+				} catch (error) {
+					console.warn(`[List] Failed to fetch profile for ${did}:`, error);
+					// Continue with other profiles even if one fails
+				}
+			})
+		);
+	}
+
+	console.info(`[List] Successfully fetched ${profiles.size} profiles`);
+	return profiles;
+}
+
+/**
+ * Fetches list members with their profile data
+ */
+export async function fetchListMembers(
+	listUri: string,
+	fetchFn?: typeof fetch
+): Promise<ListMembersData> {
+	console.info(`[List] Fetching list members for: ${listUri}`);
+	
+	const cacheKey = `list-members:${listUri}`;
+	const cached = cache.get<ListMembersData>(cacheKey);
+	if (cached) {
+		console.debug('[List] Returning cached list members');
+		return cached;
+	}
+
+	try {
+		// Fetch all list items
+		const listItems = await fetchListItems(listUri, fetchFn);
+
+		// Extract unique DIDs
+		const dids = [...new Set(listItems.map((item) => item.subject))];
+
+		// Fetch profile data for all DIDs
+		const profiles = await fetchProfiles(dids, fetchFn);
+
+		// Combine list items with profile data
+		const members: ListMember[] = listItems
+			.map((item) => {
+				const profile = profiles.get(item.subject);
+				if (!profile) return null;
+
+				return {
+					did: profile.did,
+					handle: profile.handle,
+					displayName: profile.displayName,
+					description: profile.description,
+					avatar: profile.avatar,
+					addedAt: item.createdAt,
+					uri: item.uri
+				};
+			})
+			.filter((member): member is ListMember => member !== null);
+
+		// Sort by when they were added (newest first)
+		members.sort((a, b) => new Date(b.addedAt).getTime() - new Date(a.addedAt).getTime());
+
+		const data: ListMembersData = {
+			members,
+			listUri
+		};
+
+		console.info(`[List] Successfully fetched ${members.length} list members`);
+		cache.set(cacheKey, data);
+		return data;
+	} catch (error) {
+		console.error('[List] Failed to fetch list members:', error);
+		throw error;
+	}
+}

src/lib/services/atproto/types.ts

···
+/**
+ * Type definitions for AT Protocol services
+ */
+
+/**
+ * Profile data from Bluesky
+ */
+export interface ProfileData {
+	did: string;
+	handle: string;
+	displayName?: string;
+	description?: string;
+	avatar?: string;
+	banner?: string;
+	followersCount?: number;
+	followsCount?: number;
+	postsCount?: number;
+}
+
+/**
+ * Resolved identity from Slingshot
+ */
+export interface ResolvedIdentity {
+	did: string;
+	pds: string;
+}
+
+/**
+ * Cache entry with timestamp
+ */
+export interface CacheEntry<T> {
+	data: T;
+	timestamp: number;
+}
+
+/**
+ * Bluesky list item (member)
+ */
+export interface ListItem {
+	uri: string;
+	subject: string; // DID of the member
+	createdAt: string;
+}
+
+/**
+ * List member with profile data
+ */
+export interface ListMember {
+	did: string;
+	handle: string;
+	displayName?: string;
+	description?: string;
+	avatar?: string;
+	addedAt: string; // When they were added to the list
+	uri: string; // AT URI of the list item
+}
+
+/**
+ * List members data
+ */
+export interface ListMembersData {
+	members: ListMember[];
+	listUri: string;
+}

src/routes/+page.server.ts

···
+import { fetchListMembers } from '$lib/services/atproto';
+import type { PageServerLoad } from './$types';
+import type { Project } from '$lib/components';
+
+// The list URI from the Jollywhoppers list
+const JOLLYWHOPPERS_LIST_URI = 'at://did:plc:lwckcyzhyrufq4ytg2abji7d/app.bsky.graph.list/3mas22fg3ud2y';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	try {
+		const listMembers = await fetchListMembers(JOLLYWHOPPERS_LIST_URI, fetch);
+		
+		// Transform members into Project format for consistent display
+		const members: Project[] = listMembers.members.map((member) => ({
+			title: member.displayName || member.handle,
+			href: `https://witchsky.app/profile/${member.handle}`,
+			avatar: member.avatar,
+			handle: member.handle
+		}));
+		
+		// Sort alphabetically by title
+		members.sort((a, b) => a.title.localeCompare(b.title));
+		
+		return {
+			members
+		};
+	} catch (error) {
+		console.error('Failed to fetch list members:', error);
+		
+		// Return empty members array if fetch fails
+		return {
+			members: []
+		};
+	}
+};

src/routes/+page.svelte

···
 <script lang="ts">
 	import { Header, Hero, ProjectGrid, About } from '$lib/components';
-	import { SITE_CONFIG, PROJECTS, CONTRIBUTORS, MEMBERS, ABOUT_ITEMS } from '$lib/constants';
+	import { SITE_CONFIG, PROJECTS, CONTRIBUTORS, ABOUT_ITEMS } from '$lib/constants';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
 </script>
 
 <div class="page">
···
 		<div class="content-wrapper">
 			<ProjectGrid title="Projects" projects={PROJECTS} />
 			<ProjectGrid title="Contributors" projects={CONTRIBUTORS} />
-			<ProjectGrid title="Members" projects={MEMBERS} />
+			<ProjectGrid title="Members" projects={data.members} />
 			{#if ABOUT_ITEMS.length > 0}
 				<About title="About" items={ABOUT_ITEMS} />
 			{/if}