jetstream live feed

src/components/content/ContentFeed.astro

···
 import type { AtprotoRecord } from '../../lib/types/atproto';
 import { extractCidFromBlobRef, blobCdnUrl } from '../../lib/atproto/blob';
 
+
 interface Props {
-  handle: string;
   collection?: string;
   limit?: number;
   feedUri?: string;
   showAuthor?: boolean;
   showTimestamp?: boolean;
+  live?: boolean;
 }
 
 const { 
-  handle, 
   collection = 'app.bsky.feed.post', 
   limit = 10, 
   feedUri,
   showAuthor = true,
-  showTimestamp = true 
+  showTimestamp = true,
+  live = false,
 } = Astro.props;
 
 const config = loadConfig();
+const handle = config.atproto.handle;
 const browser = new AtprotoBrowser();
 
 // Helper function to get image URL from blob reference
···
 
 <div class="space-y-6">
   {records.length > 0 ? (
-    <div class="space-y-4">
+    <div id="feed-container" class="space-y-4" data-show-timestamp={String(showTimestamp)} data-initial-limit={String(limit)} data-did={config.atproto.did}>
       {records.map((record) => {
         if (record.value?.$type !== 'app.bsky.feed.post') return null;
         
···
       <p class="text-sm mt-2">Debug: Handle = {handle}, Records fetched = {records.length}</p>
     </div>
   )}
-</div> 
+</div> 
+
+{live && (
+  <script>
+    // @ts-nocheck
+    const container = document.getElementById('feed-container');
+    if (container) {
+      const SHOW_TIMESTAMP = container.getAttribute('data-show-timestamp') === 'true';
+      const INITIAL_LIMIT = Number(container.getAttribute('data-initial-limit') || '10');
+      const maxPrepend = 20;
+      const DID = container.getAttribute('data-did') || '';
+
+      function extractCid(ref) {
+        if (typeof ref === 'string') return ref;
+        if (ref && typeof ref === 'object') {
+          if (typeof ref.$link === 'string') return ref.$link;
+          if (typeof ref.toString === 'function') return ref.toString();
+        }
+        return null;
+      }
+
+      function buildImagesEl(post, did) {
+        if (post?.embed?.$type !== 'app.bsky.embed.images' || !post.embed.images) return null;
+        const grid = document.createElement('div');
+        const count = post.embed.images.length;
+        const cols = count === 1 ? 'grid-cols-1' : count === 2 ? 'grid-cols-2' : 'grid-cols-3';
+        grid.className = `grid gap-2 ${cols}`;
+        for (const img of post.embed.images) {
+          const cid = extractCid(img?.image?.ref);
+          if (!cid) continue;
+          const url = `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(did)}&cid=${encodeURIComponent(cid)}`;
+          const wrapper = document.createElement('div');
+          wrapper.className = 'relative';
+          const image = document.createElement('img');
+          image.src = url;
+          image.alt = img?.alt || 'Post image';
+          image.className = 'rounded-lg w-full h-auto object-cover';
+          const arW = (img?.aspectRatio && img.aspectRatio.width) || 1;
+          const arH = (img?.aspectRatio && img.aspectRatio.height) || 1;
+          // @ts-ignore
+          image.style.aspectRatio = `${arW} / ${arH}`;
+          wrapper.appendChild(image);
+          grid.appendChild(wrapper);
+        }
+        return grid;
+      }
+
+      function buildPostEl(post, did) {
+        const article = document.createElement('article');
+        article.className = 'bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-4';
+
+        const textDiv = document.createElement('div');
+        textDiv.className = 'text-gray-900 dark:text-white mb-3';
+        textDiv.textContent = post?.text ? String(post.text) : '';
+        article.appendChild(textDiv);
+
+        const imagesEl = buildImagesEl(post, did);
+        if (imagesEl) {
+          const imagesWrap = document.createElement('div');
+          imagesWrap.className = 'mb-3';
+          imagesWrap.appendChild(imagesEl);
+          article.appendChild(imagesWrap);
+        }
+
+        if (SHOW_TIMESTAMP && post?.createdAt) {
+          const timeDiv = document.createElement('div');
+          timeDiv.className = 'text-xs text-gray-500 dark:text-gray-400';
+          timeDiv.textContent = new Date(post.createdAt).toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric' });
+          article.appendChild(timeDiv);
+        }
+
+        return article;
+      }
+
+      try {
+        const endpoint = 'wss://jetstream1.us-east.bsky.network/subscribe';
+        const url = new URL(endpoint);
+        if (DID) url.searchParams.append('wantedDids', DID);
+        const ws = new WebSocket(url.toString());
+
+        ws.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            if (data?.kind !== 'commit') return;
+            const commit = data.commit;
+            const record = commit?.record || {};
+            if (commit?.operation !== 'create') return;
+            if (record?.$type !== 'app.bsky.feed.post') return;
+            const el = buildPostEl(record, data.did);
+            // @ts-ignore
+            container.insertBefore(el, container.firstChild);
+            const posts = container.children;
+            if (posts.length > maxPrepend + INITIAL_LIMIT) {
+              if (container.lastElementChild) container.removeChild(container.lastElementChild);
+            }
+          } catch (e) {
+            console.error('jetstream msg error', e);
+          }
+        };
+
+        ws.onerror = (e) => console.error('jetstream ws error', e);
+      } catch (e) {
+        console.error('jetstream start error', e);
+      }
+    }
+  </script>
+)}

src/pages/index.astro

···
               My Posts
             </h2>
             <ContentFeed 
-              handle={config.atproto.handle}
               limit={10}
               showAuthor={false}
               showTimestamp={true}
+              live={true}
             />
           </section>
           
···
               Explore More
             </h2>
             <div class="grid md:grid-cols-2 gap-6">
-              <a href="/content-feed" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Content Feed
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  All your ATProto content with real-time updates and streaming.
-                </p>
-              </a>
               <a href="/galleries" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                   Image Galleries
                 </h3>
                 <p class="text-gray-600 dark:text-gray-400">
                   View my grain.social image galleries and photo collections.
-                </p>
-              </a>
-              <a href="/galleries-unified" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Unified Galleries
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Galleries with real-time updates using the content system.
-                </p>
-              </a>
-              <a href="/gallery-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Gallery System Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Test the gallery service and display components with detailed debugging.
-                </p>
-              </a>
-              <a href="/content-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Content Rendering Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Test the content rendering system with type-safe components and filters.
-                </p>
-              </a>
-              <a href="/gallery-debug" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Gallery Structure Debug
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Examine Grain.social collection structure and relationships.
-                </p>
-              </a>
-              <a href="/grain-gallery-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Grain Gallery Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Test the Grain.social gallery grouping and display system.
-                </p>
-              </a>
-              <a href="/api-debug" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  API Debug
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Debug ATProto API calls and configuration issues.
-                </p>
-              </a>
-              <a href="/simple-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Simple API Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Basic HTTP request test to ATProto APIs.
-                </p>
-              </a>
-              <a href="/discovery-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Discovery Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Build-time collection discovery and type generation.
-                </p>
-              </a>
-              <a href="/simplified-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Simplified Content Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Test the simplified content service approach based on reference repository patterns.
-                </p>
-              </a>
-              <a href="/jetstream-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Jetstream Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  ATProto sync API streaming with DID filtering (like atptools) - low latency, real-time.
-                </p>
-              </a>
-              <a href="/atproto-browser-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  ATProto Browser Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Browse ATProto accounts and records like atptools - explore collections and records.
-                </p>
-              </a>
-              <a href="/lexicon-generator-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Lexicon Generator Test
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Generate TypeScript types for all lexicons discovered in your configured repository.
                 </p>
               </a>
             </div>