From e789bba96c3565c53465ae70b7c7ecf0e2af1539 Mon Sep 17 00:00:00 2001
From: Brittany Ellich <brittanyellich@github.com>
Date: Fri, 17 Apr 2026 08:44:10 -0700
Subject: [PATCH] Add Colorado community

---
 src/components/CommunityCard.astro | 25 +++++++++++++++++++------
 src/data/communities.yml           |  8 ++++++++
 src/pages/communities.astro        | 15 ++++++++++++++-
 src/pages/events.astro             |  4 +++-
 src/pages/index.astro              | 18 ++++++++++++++++--
 5 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/components/CommunityCard.astro b/src/components/CommunityCard.astro
index 88a9224..03d2750 100644
--- a/src/components/CommunityCard.astro
+++ b/src/components/CommunityCard.astro
@@ -6,13 +6,14 @@ interface Props {
   description?: string;
   bluesky?: string;
   website?: string;
+  avatar?: string;
 }
 
-const { name, handle, location, description, bluesky, website } = Astro.props;
+const { name, handle, location, description, bluesky, website, avatar } = Astro.props;
 
-// Generate initials from the handle for the colored circle
+// Generate initials from the handle for the colored circle (fallback when no avatar)
 const abbr = handle
-  .replace(/\.(bsky\.social|atproto\.camp|atprotocol\.community)$/, '')
+  .replace(/\.(bsky\.social|atproto\.camp|atprotocol\.community|atprotocol\.space)$/, '')
   .replace(/^atproto\.?/, '')
   .slice(0, 3)
   .toUpperCase();
@@ -27,9 +28,13 @@ function handleColor(h: string): string {
 ---
 
 <div class="community-pill">
-  <span class="community-pill__dot" style={`background: ${handleColor(handle)}`} aria-hidden="true">
-    {abbr}
-  </span>
+  {avatar ? (
+    <img src={avatar} alt="" class="community-pill__avatar" width="28" height="28" loading="lazy" />
+  ) : (
+    <span class="community-pill__dot" style={`background: ${handleColor(handle)}`} aria-hidden="true">
+      {abbr}
+    </span>
+  )}
   <div class="community-pill__text">
     <span class="community-pill__name">{name}</span>
     <span class="community-pill__location">{location}</span>
@@ -54,6 +59,14 @@ function handleColor(h: string): string {
     padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
   }
 
+  .community-pill__avatar {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
   .community-pill__dot {
     flex-shrink: 0;
     width: 28px;
diff --git a/src/data/communities.yml b/src/data/communities.yml
index 0175708..ec79058 100644
--- a/src/data/communities.yml
+++ b/src/data/communities.yml
@@ -16,6 +16,14 @@
   description: Boston ATProtocol user group
   bluesky: https://bsky.app/profile/atproto.boston
 
+- name: ATProto Colorado
+  handle: colorado.atprotocol.space
+  location: Colorado, US
+  description: Colorado ATProtocol user group
+  bluesky: https://bsky.app/profile/colorado.atprotocol.space
+  extraEventAccounts:
+    - pyxorium.com
+
 - name: ATProto Brazil
   handle: atproto.com.br
   location: Brazil
diff --git a/src/pages/communities.astro b/src/pages/communities.astro
index 1b89f5a..02a2e72 100644
--- a/src/pages/communities.astro
+++ b/src/pages/communities.astro
@@ -5,6 +5,7 @@ import Footer from '../components/Footer.astro';
 import CommunityCard from '../components/CommunityCard.astro';
 import yaml from 'js-yaml';
 import communitiesRaw from '../data/communities.yml?raw';
+import { getProfile } from '../lib/atproto';
 
 interface Community {
   name: string;
@@ -16,6 +17,18 @@ interface Community {
 }
 
 const communities = yaml.load(communitiesRaw) as Community[];
+
+// Fetch Bluesky profile avatars for communities
+const communityProfiles = await Promise.allSettled(
+  communities.map(c => getProfile(c.handle))
+);
+const communityAvatars = new Map<string, string>();
+for (let i = 0; i < communities.length; i++) {
+  const result = communityProfiles[i];
+  if (result.status === 'fulfilled' && result.value.avatar) {
+    communityAvatars.set(communities[i].handle, result.value.avatar);
+  }
+}
 ---
 
 <Base title="Communities" description="Find AT Protocol communities around the world.">
@@ -32,7 +45,7 @@ const communities = yaml.load(communitiesRaw) as Community[];
       <div class="communities-grid">
         {communities.map(c => (
           <div class="community-entry">
-            <CommunityCard {...c} />
+            <CommunityCard {...c} avatar={communityAvatars.get(c.handle)} />
             {c.description && <p class="community-desc">{c.description}</p>}
           </div>
         ))}
diff --git a/src/pages/events.astro b/src/pages/events.astro
index 5ab34fe..80aa307 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -11,14 +11,16 @@ interface Community {
   name: string;
   handle: string;
   location: string;
+  extraEventAccounts?: string[];
 }
 
 const communities = yaml.load(communitiesRaw) as Community[];
 
-// Build event account list: atmosphere.community + all community handles
+// Build event account list: atmosphere.community + all community handles + extra accounts
 const eventAccounts = [
   'atmosphere.community',
   ...communities.map(c => c.handle),
+  ...communities.flatMap(c => c.extraEventAccounts ?? []),
 ];
 
 // Fetch events from ATProto (community.lexicon.calendar.event)
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 395e441..9fb3da7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,10 +19,23 @@ interface Community {
   description?: string;
   bluesky?: string;
   website?: string;
+  extraEventAccounts?: string[];
 }
 
 const communities = yaml.load(communitiesRaw) as Community[];
 
+// Fetch Bluesky profile avatars for communities
+const communityProfiles = await Promise.allSettled(
+  communities.map(c => getProfile(c.handle))
+);
+const communityAvatars = new Map<string, string>();
+for (let i = 0; i < communities.length; i++) {
+  const result = communityProfiles[i];
+  if (result.status === 'fulfilled' && result.value.avatar) {
+    communityAvatars.set(communities[i].handle, result.value.avatar);
+  }
+}
+
 // Fetch blog posts from ATProto via Content Collection
 let posts: Array<{
   title: string;
@@ -74,10 +87,11 @@ try {
   ];
 }
 
-// Build event account list: atmosphere.community + all community handles
+// Build event account list: atmosphere.community + all community handles + extra accounts
 const eventAccounts = [
   'atmosphere.community',
   ...communities.map(c => c.handle),
+  ...communities.flatMap(c => c.extraEventAccounts ?? []),
 ];
 
 // Fetch events from ATProto (community.lexicon.calendar.event)
@@ -184,7 +198,7 @@ const highlights = [
       </div>
       <div class="community-row">
         {communities.slice(0, 8).map(c => (
-          <CommunityCard {...c} />
+          <CommunityCard {...c} avatar={communityAvatars.get(c.handle)} />
         ))}
       </div>
     </div>
-- 
2.51.2