2b:null 2c:["$","title",null,{"children":"Lopefeed | Tom Larkworthy | Observable"}] 31:T2528,feedView = { const {downloadFile, downloadBundle} = downloadHelpers; const LOPE = { paper: '#f5efe5', paperWarm: '#efe7d8', paperDeep: '#e8dec9', ink: '#1a1814', inkSoft: '#3a342b', inkMute: '#7a6f5e', inkFaint: '#b6aa92', rule: '#d8cdb4', ruleSoft: '#e3d9c3', accent: '#c54f2b', accentSoft: '#e8a991', link: '#1f4fb0', serif: '"Source Serif 4","Source Serif Pro","Iowan Old Style",Georgia,serif', sans: '"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif', mono: '"JetBrains Mono","Berkeley Mono","IBM Plex Mono",ui-monospace,"SF Mono",monospace' }; const fmtBytes = b => b >= 1000000 ? `${ (b / 1000000).toFixed(1) }MB` : `${ (b / 1000).toFixed(0) }KB`; const fmtRel = d => { const ms = Date.now() - d.getTime(); const m = Math.round(ms / 60000); if (m < 1) return 'just now'; if (m < 60) return `${ m }m ago`; const h = Math.round(m / 60); if (h < 24) return `${ h }h ago`; const days = Math.round(h / 24); if (days < 7) return `${ days }d ago`; return d.toISOString().slice(0, 10); }; const article = (r, i, last) => htl.html`

${ r.avatar ? htl.html`

` : htl.html`

` } ${ r.handle ? htl.html`@${ r.handle } ⇄ bsky` : htl.html`${ r.did }` } ${ r.displayName ? htl.html`· ${ r.displayName }` : '' }

${ r.title }

${ r.summary ? htl.html`

${ r.summary }

` : '' }

▸ open bundle ${ r.files } blobs · ${ fmtBytes(r.size) } ↗ ${ r.webUrl.replace(/^https:\/\//, '') }

${ r.modules.length ? htl.html`

modules ↓ ${ r.modules.slice(0, 4).map(m => htl.html` { e.preventDefault(); e.stopPropagation(); downloadFile(r.did, r.rkey, m).catch(err => alert(`download failed: ${ err.message }`)); } } >${ m }`) } ${ r.modules.length > 4 ? htl.html`+${ r.modules.length - 4 } more ▾` : '' }

${ r.modules.length > 4 ? htl.html`

${ r.modules.slice(4).map(m => htl.html` { e.preventDefault(); downloadFile(r.did, r.rkey, m).catch(err => alert(`download failed: ${ err.message }`)); } } >${ m }`) }

` : '' }

`; return htl.html`

lopecode · feed

The Lopefeed

vol. 1 · ${ new Date().toISOString().slice(0, 10) } · ${ rows.length } bundle${ rows.length === 1 ? '' : 's' } on the wire

${ rows.map((r, i) => article(r, i, i === rows.length - 1)) }

`; }32:Te49,downloadHelpers = { // Client-side per-file and bundle download via the publishing PDS, // reusing atproto's composeBundle + idb cache. Records keyed by URI, // blobs by CID — peeks across the feed share the cache, and bundle // downloads reuse blobs already pulled by per-file download. function triggerSave(blob, filename) { const objUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objUrl; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(objUrl), 5000); } function decodeFile(file, bytes) { if (file.encoding === 'base64+gzip') { const b64 = new TextDecoder().decode(bytes); const gz = Uint8Array.from(atob(b64), c => c.charCodeAt(0)); const stream = new Blob([gz]).stream().pipeThrough(new DecompressionStream('gzip')); return new Response(stream).arrayBuffer(); } return Promise.resolve(bytes); } function safeFilename(s, ext) { const base = String(s || '').replace(/^@/, '').replace(/[^A-Za-z0-9._@-]+/g, '_').replace(/^_+|_+$/g, '') || 'bundle'; return ext ? `${ base }${ base.endsWith(ext) ? '' : ext }` : base; } async function loadRecord(did, rkey) { const uri = `at://${ did }/com.lopecode.bundle/${ rkey }`; const cached = await idb.get('records', uri); if (cached) return cached; const pds = await resolvePds(did).then(r => r.pds || r); const r = await fetch(`${ pds }/xrpc/com.atproto.repo.getRecord?repo=${ encodeURIComponent(did) }&collection=com.lopecode.bundle&rkey=${ encodeURIComponent(rkey) }`); if (!r.ok) throw new Error(`getRecord ${ r.status }`); const record = (await r.json()).value; const out = { pds, record }; await idb.put('records', uri, out); return out; } async function loadBlob(pds, did, cid) { const cached = await idb.get('blobs', cid); if (cached) return cached; const r = await fetch(`${ pds }/xrpc/com.atproto.sync.getBlob?did=${ encodeURIComponent(did) }&cid=${ encodeURIComponent(cid) }`); if (!r.ok) throw new Error(`getBlob ${ cid }: ${ r.status }`); const bytes = new Uint8Array(await r.arrayBuffer()); await idb.put('blobs', cid, bytes); return bytes; } return { downloadFile: async function downloadFile(did, rkey, fileId) { const {pds, record} = await loadRecord(did, rkey); const file = (record.files || []).find(f => f.id === fileId); if (!file) throw new Error(`file ${ fileId } not in bundle`); const bytes = await loadBlob(pds, did, file.blob?.ref?.$link); const body = await decodeFile(file, bytes); triggerSave(new Blob([body], { type: file.blob.mimeType }), safeFilename(fileId)); }, downloadBundle: async function downloadBundle(did, rkey) { const {pds, record} = await loadRecord(did, rkey); const blobs = await Promise.all((record.files || []).map(async f => { const bytes = await loadBlob(pds, did, f.blob?.ref?.$link); return { ...f, bytes }; })); const html = composeBundle(record, blobs); triggerSave(new Blob([html], { type: 'text/html' }), safeFilename(record.title || rkey, '.html')); } }; }33:[] 2f:{"id":"d87920104efe89b0","slug":"lopefeed","title":"Lopefeed","thumbnail":"0c57f0ea519fc07246574fa8af0df1d6e17deaa6addf0e46367867b06d7a9b72","access_level":"public","create_time":"$D2026-05-10T14:18:54.569Z","update_time":"$D2026-05-16T06:01:57.275Z","view_time":null,"first_public_time":"$D2026-05-10T14:31:03.063Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":40,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"a8095f89b5521b1e","slug":"atmosphere","title":"atmosphere","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Lopefeed","cells":[{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"rows = feedRecords.map(b => {\n const did = b.uri.split('/')[2];\n const rkey = b.uri.split('/').pop();\n const files = b.value?.files || [];\n const moduleNames = files.filter(f => typeof f.id === 'string' && /^@[^/]+\\/[^/]+$/.test(f.id) && f.blob?.mimeType === 'application/javascript').map(f => f.id);\n const totalBytes = files.reduce((n, f) => n + (f.blob?.size || 0), 0);\n const profile = handles.get(did);\n const didSubdomain = did.replace(/:/g, '-');\n return {\n rkey,\n did,\n handle: profile?.handle || null,\n displayName: profile?.displayName || null,\n avatar: profile?.avatar || null,\n title: b.value?.title || '(untitled)',\n summary: b.value?.summary || '',\n when: new Date(b.value?.createdAt || 0),\n files: files.length,\n size: totalBytes,\n modules: moduleNames,\n cid: b.cid,\n uri: b.uri,\n webUrl: `https://${ didSubdomain }.lopecode.com/r/${ rkey }`\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"feedRecords = {\n const url = new URL('https://contrail.lopecode.com/xrpc/com.lopecode.bundle.listRecords');\n url.searchParams.set('limit', '50');\n const r = await fetch(url);\n if (!r.ok)\n throw new Error(`contrail listRecords ${ r.status }: ${ await r.text() }`);\n const data = await r.json();\n // Records arrive newest-first by default; sort defensively to be sure.\n return (data.records || []).slice().sort((a, b) => (b.value?.createdAt || '').localeCompare(a.value?.createdAt || ''));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"dids = [...new Set(feedRecords.map(r => r.uri.split('/')[2]))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"handles = {\n const out = new Map();\n await Promise.all(dids.map(async did => {\n try {\n const r = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${ encodeURIComponent(did) }`);\n if (!r.ok)\n return;\n const j = await r.json();\n out.set(did, {\n handle: j.handle,\n displayName: j.displayName,\n avatar: j.avatar\n });\n } catch {\n }\n }));\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import { resolvePds, idb, composeBundle } from \"@tomlarkworthy/atproto\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"