live-embed/public/.gitkeep

This is a binary file and will not be displayed.

-1

live-embed/public/vite.svg

··· 1 1 - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

+48 -24

live-embed/src/App.tsx

··· 1 1 - import { useState } from 'react' 2 2 - import reactLogo from './assets/react.svg' 3 3 - import viteLogo from '/vite.svg' 1 1 + import { useEffect, useState } from 'react'; 2 2 + import { Post } from './Post'; 3 3 + import { rotatingPair } from './samplePosts'; 4 4 + import { Spacedust } from './spacedust'; 5 5 + 4 6 import './App.css' 5 7 6 8 function App() { 7 7 - const [count, setCount] = useState(0) 9 9 + const [currentPair, setCurrentPair] = useState([]); 10 10 + const [updates, setUpdates] = useState({}); 11 11 + 12 12 + useEffect(() => { 13 13 + let iMightBeAZombie = false; 14 14 + 15 15 + const spacedust = new Spacedust(handleLink); 16 16 + const cancelRotation = rotatingPair(updatedPair => { 17 17 + if (iMightBeAZombie) return; 18 18 + 19 19 + setCurrentPair(updatedPair); 20 20 + spacedust.setSubjects(updatedPair); 21 21 + setUpdates(current => { // cleanup, probably should combine with pair directly 22 22 + console.log('hi??'); 23 23 + const next = {}; 24 24 + updatedPair.forEach(uri => next[uri] = current[uri] ?? {}); 25 25 + return next; 26 26 + }); 27 27 + }); 28 28 + 29 29 + function handleLink({ subject, source }) { 30 30 + console.log('i only run once', source, subject); 31 31 + 32 32 + setUpdates(current => { 33 33 + console.log('i run twice??', source, subject); 34 34 + const next = Object.assign({}, current); 35 35 + if (!next[subject][source]) next[subject][source] = 0; 36 36 + next[subject][source] += 1; 37 37 + return next; 38 38 + }); 39 39 + } 40 40 + 41 41 + return () => { 42 42 + console.log('byeeee'); 43 43 + cancelRotation(); 44 44 + spacedust.close(); 45 45 + iMightBeAZombie = true; 46 46 + }; 47 47 + }, []); 8 48 9 49 return ( 10 50 <> 11 11 - <div> 12 12 - <a href="https://vite.dev" target="_blank"> 13 13 - <img src={viteLogo} className="logo" alt="Vite logo" /> 14 14 - </a> 15 15 - <a href="https://react.dev" target="_blank"> 16 16 - <img src={reactLogo} className="logo react" alt="React logo" /> 17 17 - </a> 18 18 - </div> 19 19 - <h1>Vite + React</h1> 20 20 - <div className="card"> 21 21 - <button onClick={() => setCount((count) => count + 1)}> 22 22 - count is {count} 23 23 - </button> 24 24 - <p> 25 25 - Edit <code>src/App.tsx</code> and save to test HMR 26 26 - </p> 27 27 - </div> 28 28 - <p className="read-the-docs"> 29 29 - Click on the Vite and React logos to learn more 30 30 - </p> 51 51 + <h1>live post interactions</h1> 52 52 + {currentPair.map(p => ( 53 53 + <Post key={p} atUri={p} updatedLinks={updates[p]} /> 54 54 + ))} 31 55 </> 32 56 ) 33 57 }

+67

live-embed/src/Fetch.tsx

··· 1 1 + import { useContext, useEffect, useState } from 'react'; 2 2 + 3 3 + const loadingDefault = () => ( 4 4 + <em>Loading&hellip;</em> 5 5 + ); 6 6 + 7 7 + const errorDefault = err => ( 8 8 + <span className="error"> 9 9 + <strong>Error</strong>:<br/>{`${err}`} 10 10 + </span> 11 11 + ); 12 12 + 13 13 + export function Fetch({ using, args, ok, loading, error }) { 14 14 + const [asyncData, setAsyncData] = useState({ state: null }); 15 15 + 16 16 + useEffect(() => { 17 17 + let ignore = false; 18 18 + setAsyncData({ state: 'loading' }); 19 19 + (async () => { 20 20 + try { 21 21 + const data = await using(...args); 22 22 + !ignore && setAsyncData({ state: 'done', data }); 23 23 + } catch (err) { 24 24 + !ignore && setAsyncData({ state: 'error', err }); 25 25 + } 26 26 + })(); 27 27 + return () => { ignore = true; } 28 28 + }, args); 29 29 + 30 30 + if (asyncData.state === 'loading') { 31 31 + return (loading || loadingDefault)(...args); 32 32 + } else if (asyncData.state === 'error') { 33 33 + return (error || errorDefault)(asyncData.err); 34 34 + } else if (asyncData.state === null) { 35 35 + return <span>wat, request has not started (bug?)</span>; 36 36 + } else { 37 37 + if (asyncData.state !== 'done') { console.warn(`unexpected async data state: ${asyncData.state}`); } 38 38 + return ok(asyncData.data); 39 39 + } 40 40 + } 41 41 + 42 42 + ///// 43 43 + 44 44 + async function getJson(url, credentials) { 45 45 + const opts = {}; 46 46 + if (credentials) opts.credentials = 'include'; 47 47 + const res = await fetch(url, opts); 48 48 + if (!res.ok) { 49 49 + const m = await res.text(); 50 50 + throw new Error(`Failed to fetch: ${m}`); 51 51 + } 52 52 + return await res.json(); 53 53 + } 54 54 + 55 55 + export function GetJson({ url, params, credentials, ...forFetch }) { 56 56 + const u = new URL(url); 57 57 + for (let [key, val] of Object.entries(params ?? {})) { 58 58 + u.searchParams.append(key, val); 59 59 + } 60 60 + return ( 61 61 + <Fetch 62 62 + using={getJson} 63 63 + args={[u.toString(), credentials]} 64 64 + {...forFetch} 65 65 + /> 66 66 + ); 67 67 + }

+25

live-embed/src/Post.tsx

··· 1 1 + const nameSource = source => ({ 2 2 + 'app.bsky.feed.like:subject.uri': 'like', // likes 3 3 + 'app.bsky.feed.repost:subject.uri': 'repost', // reposts 4 4 + 'app.bsky.feed.post:embed.record.uri': 'quote', // normal quotes 5 5 + 'app.bsky.feed.post:embed.record.record.uri': 'quote', // RecordWithMedia quotes 6 6 + 'app.bsky.feed.post:reply.root.uri': 'reply', // all child replies 7 7 + }[source]); 8 8 + 9 9 + export function Post({ atUri, updatedLinks }) { 10 10 + const nicerStats = {}; 11 11 + for (const [key, val] of Object.entries(updatedLinks)) { 12 12 + const name = nameSource(key); 13 13 + if (!nicerStats[name]) nicerStats[name] = 0; 14 14 + nicerStats[name] += val; 15 15 + } 16 16 + 17 17 + return ( 18 18 + <div> 19 19 + <p> 20 20 + {atUri}<br/> 21 21 + {JSON.stringify(nicerStats)} 22 22 + </p> 23 23 + </div> 24 24 + ); 25 25 + }

live-embed/src/assets/.gitkeep

This is a binary file and will not be displayed.

-1

live-embed/src/assets/react.svg

··· 1 1 - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

+67

live-embed/src/samplePosts.ts

··· 1 1 + 2 2 + const SEKELETON_API = 'https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton'; 3 3 + const FEED = 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot'; 4 4 + const POLL_DELAY = 9000; 5 5 + const POST_LIMIT = 10; 6 6 + 7 7 + async function getFeed() { 8 8 + const url = new URL(SEKELETON_API); 9 9 + url.searchParams.append('feed', FEED); 10 10 + url.searchParams.append('limit', POST_LIMIT.toString()); 11 11 + const res = await fetch(url); 12 12 + const data = await res.json(); 13 13 + return data; 14 14 + } 15 15 + 16 16 + /** 17 17 + * fetch a pair of posts from discover and alternately replace the first/second 18 18 + * 19 19 + * TODO: check w constellation to prioritize popular posts 20 20 + **/ 21 21 + export function rotatingPair(onRotate: any) { 22 22 + let timer: number; 23 23 + let dying = false; 24 24 + const seen = new Set(); // TODO: mem leak, slowly 25 25 + let A: string | null = null; 26 26 + let B: string | null = null; 27 27 + let which: 'A' | 'B' = 'A'; 28 28 + 29 29 + async function next() { 30 30 + try { 31 31 + const { feed } = await getFeed(); 32 32 + if (dying) return; 33 33 + 34 34 + // special case: first load 35 35 + if (A === null && B === null) { 36 36 + if (feed.length < 2) throw new Error('feed returned fewer than two posts to start'); 37 37 + seen.add(A = feed[0].post); 38 38 + seen.add(B = feed[1].post); 39 39 + } else { 40 40 + for (const { post } of feed) { 41 41 + if (seen.has(post)) { 42 42 + continue; 43 43 + } 44 44 + if (which === 'A') { 45 45 + seen.add(B = post); 46 46 + which = 'B'; 47 47 + } else { 48 48 + seen.add(A = post); 49 49 + which = 'A'; 50 50 + } 51 51 + break; 52 52 + } 53 53 + } 54 54 + onRotate([A, B]); 55 55 + } catch (e) { 56 56 + console.error('hmm, failed to get feed', e); 57 57 + } 58 58 + timer = setTimeout(next, POLL_DELAY); 59 59 + } 60 60 + setTimeout(next); 61 61 + 62 62 + return () => { 63 63 + console.log('clearing'); 64 64 + clearTimeout(timer); 65 65 + dying = true; 66 66 + } 67 67 + }

+165

live-embed/src/spacedust.ts

··· 1 1 + 2 2 + type SpacedustStatus = 'disconnected' | 'connecting' | 'connected'; 3 3 + 4 4 + type Linkrement = { // this name should send me to jail 5 5 + subject: String // at-uri 6 6 + source: String // link source 7 7 + }; 8 8 + type LinkHandler = (l: Linkrement) => void; 9 9 + 10 10 + /** 11 11 + * simple spacedust demo client 12 12 + * 13 13 + * only purpose for now is to serve this demo so it might contain hacks 14 14 + **/ 15 15 + export class Spacedust { 16 16 + #callback: LinkHandler; 17 17 + #endpoint: string; 18 18 + 19 19 + // #socket must be null when #status is 'disconnected' 20 20 + #socket: WebSocket | null = null; 21 21 + #status: SpacedustStatus = 'disconnected'; 22 22 + 23 23 + #subjects: string[]; 24 24 + #subjectsDirty: boolean = false; // in case we try to update while disconnected 25 25 + #sources: string[] = [ // hard-coding for demo 26 26 + "app.bsky.feed.like:subject.uri", // likes 27 27 + "app.bsky.feed.repost:subject.uri", // reposts 28 28 + "app.bsky.feed.post:embed.record.uri", // normal quotes 29 29 + "app.bsky.feed.post:embed.record.record.uri", // RecordWithMedia quotes 30 30 + "app.bsky.feed.post:reply.root.uri", // all child replies 31 31 + ]; 32 32 + #eol: boolean = false; // flag: we should shut down 33 33 + 34 34 + constructor( 35 35 + onLink: LinkHandler, 36 36 + endpoint: string = 'https://spacedust.microcosm.blue', 37 37 + subjects: string[] = [], 38 38 + ) { 39 39 + this.#callback = onLink; 40 40 + this.#endpoint = endpoint; 41 41 + this.#subjects = subjects; 42 42 + this.#connect(); 43 43 + } 44 44 + 45 45 + async #connect(reconnecting: boolean = false) { 46 46 + this.#status = 'connecting'; 47 47 + 48 48 + if (reconnecting) { 49 49 + const wait = Math.round(1000 + (Math.random() * 1800)); 50 50 + console.info(`waiting ${(wait / 1000).toFixed(1)}s to reconnect...`); 51 51 + await new Promise(r => setTimeout(r, wait)); 52 52 + } 53 53 + if (this.#eol) return this.close(); 54 54 + 55 55 + // up to date as of this connection init 56 56 + this.#subjectsDirty = false; 57 57 + 58 58 + if (this.#subjects.length === 0) { 59 59 + console.info('no subjects, not connecting spacedust to avoid getting firehosed'); 60 60 + this.#status = 'disconnected'; 61 61 + return; 62 62 + } 63 63 + 64 64 + const url = new URL('/subscribe', this.#endpoint); 65 65 + url.searchParams.set('instant', 'true'); 66 66 + 67 67 + for (const source of this.#sources) { 68 68 + url.searchParams.append('wantedSources', source); 69 69 + } 70 70 + 71 71 + // note: here we put all subjects in the url 72 72 + // that's fine since we only have a few for this demo 73 73 + // but spacedust accepts up to 50,000 subjects! more than fit in a url-- you 74 74 + // have to send a subscriber sourced message in that case after reconnect. 75 75 + for (const subject of this.#subjects) { 76 76 + url.searchParams.append('wantedSubjects', subject); 77 77 + } 78 78 + 79 79 + this.#socket = new WebSocket(url); 80 80 + 81 81 + this.#socket.onopen = () => { 82 82 + console.info('spacedust connected.'); 83 83 + if (this.#eol) return this.close(); 84 84 + this.#status = 'connected'; 85 85 + // in case the subjects were changed while connecting 86 86 + if (this.#subjectsDirty) { 87 87 + this.setSubjects(this.#subjects); 88 88 + } 89 89 + }; 90 90 + 91 91 + this.#socket.onmessage = message => { 92 92 + if (this.#eol) return this.close(); 93 93 + this.#handleMessage(message); 94 94 + }; 95 95 + 96 96 + this.#socket.onerror = err => { 97 97 + console.warn('spacedust socket errored. reconnecting...', err); 98 98 + this.#status = 'disconnected'; 99 99 + this.#connect(true); 100 100 + }; 101 101 + 102 102 + this.#socket.onclose = () => { 103 103 + if (this.#eol) { 104 104 + console.info('spacedust socket closed and we\'re EOL, not restarting'); 105 105 + return; 106 106 + } 107 107 + console.info('spacedust socket closed. restarting...'); 108 108 + this.#status = 'disconnected'; 109 109 + this.#connect(true); 110 110 + }; 111 111 + } 112 112 + 113 113 + #handleMessage(m: MessageEvent) { 114 114 + if (this.#eol) return; 115 115 + const data = JSON.parse(m.data); 116 116 + if (data.kind !== "link" || data.link.operation !== "create") { 117 117 + console.info('ignoring non-link-create event', data); 118 118 + return; 119 119 + } 120 120 + const { link: { subject, source } } = data; 121 121 + this.#callback({ subject, source }); 122 122 + } 123 123 + 124 124 + setSubjects(newSubjects: string[]) { 125 125 + this.#subjects = newSubjects; 126 126 + 127 127 + if (this.#subjects.length === 0) { 128 128 + // no subjects specified: just disconnect (would get firehose from spacedust) 129 129 + this.#socket?.close(); 130 130 + // closing should trigger the .onclose handler to take it from here 131 131 + return; 132 132 + } 133 133 + 134 134 + if (this.#status === 'disconnected') { 135 135 + console.info('spacedust currently disconnected; connecting for updated subjects'); 136 136 + this.#subjectsDirty = true; 137 137 + this.#connect(); 138 138 + return; 139 139 + } else if (this.#status === 'connecting') { 140 140 + console.info('spacedust currently connecting; just flagging subjects as dirty'); 141 141 + this.#subjectsDirty = true; // on connect it should automatically update 142 142 + return; 143 143 + } 144 144 + 145 145 + if (!this.#socket) { 146 146 + throw new Error(`spacedust status is "${this.#status}" but the socket is null -- a bug?`); 147 147 + } 148 148 + 149 149 + this.#socket.send(JSON.stringify({ 150 150 + type: 'options_update', 151 151 + payload: { 152 152 + wantedSources: this.#sources, 153 153 + wantedSubjects: this.#subjects, 154 154 + }, 155 155 + })); 156 156 + 157 157 + this.#subjectsDirty = false; 158 158 + } 159 159 + 160 160 + close() { 161 161 + this.#eol = true; 162 162 + this.#socket?.close(); 163 163 + } 164 164 + 165 165 + }