Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
3.1 kB · 106 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107// Annotation records and rendering for the unified library page.
export interface Annotation { uri: string; rkey: string; target: { source: string; selector?: { exact?: string } }; body?: { value?: string }; createdAt?: string;}
export async function listAnnotations(): Promise<Annotation[]> { const did = process.env.CAMERON_DID || "did:plc:gfrmhdmjvxn2sjedzboeudef"; const pds = "https://bsky.social"; let cursor: string | undefined; const all: Annotation[] = [];
do { const url = new URL(`${pds}/xrpc/com.atproto.repo.listRecords`); url.searchParams.set("repo", did); url.searchParams.set("collection", "at.margin.annotation"); url.searchParams.set("limit", "100"); if (cursor) url.searchParams.set("cursor", cursor);
const res = await fetch(url.toString()); if (!res.ok) break; const data = await res.json();
for (const r of data.records ?? []) { const rkey = r.uri.split("/").pop()!; all.push({ uri: r.uri, rkey, target: r.value.target ?? {}, body: r.value.body, createdAt: r.value.createdAt ?? r.value.created, }); } cursor = data.cursor; } while (cursor);
// Sort newest first return all.sort( (a, b) => new Date(b.createdAt ?? 0).getTime() - new Date(a.createdAt ?? 0).getTime() );}
function displayUrl(url: string): string { try { const u = new URL(url); return u.hostname + (u.pathname === "/" ? "" : u.pathname); } catch { return url; }}
export function AnnotationList({ annotations }: { annotations: Annotation[] }) { return ( <div class="annotations-list"> {annotations.map((a) => { const date = a.createdAt ? new Date(a.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }) : "";
return ( <div class="annotation-item" key={a.rkey}> <div class="annotation-target"> <a href={a.target.source} target="_blank" rel="noopener" style="color:var(--site-accent);text-decoration:none;font-size:0.8125rem" > {displayUrl(a.target.source)} </a> </div> {a.target.selector?.exact && ( <blockquote class="annotation-quote"> {a.target.selector.exact} </blockquote> )} {a.body?.value && ( <p class="annotation-body">{a.body.value}</p> )} <div class="annotation-meta"> {date && <span>{date}</span>} <a href={`https://pdsls.dev/${a.uri}`} target="_blank" rel="noopener" style="color:var(--site-text-muted);text-decoration:none;font-size:0.7rem" > record </a> </div> </div> ); })} </div> );}