-
-
Save nightpool/a9da6bd6942ef82701ec4d4dac29457a to your computer and use it in GitHub Desktop.
literally the simplest and dumbest activitypub client i can make
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<div id="root" style="width: 500px; overflow-wrap: break-word;"></div> | |
<script> | |
Object.defineProperty(Object.prototype, 'tap', | |
{ value: tap, configurable: true, writable: true } | |
); | |
const AsyncFunction = (async () => {}).constructor; | |
const createElement = document.createElement.bind(document); | |
const outbox = 'https://cybre.space/users/nightpool/outbox'; | |
const init = () => { | |
resolve('https://cybre.space/users/nightpool'); | |
const page = withPlaceholder(async () => { | |
const { first } = await resolve(outbox); | |
return renderPage(await resolve(first)); | |
}, () => spinner().tap(s => s.style = 'display: block; margin: 2em auto')); | |
document.querySelector('#root').append(page); | |
} | |
const renderPage = (page) => { | |
const items = page.orderedItems || page.items; | |
return createElement('div').tap(div => | |
div.append(...items.map(renderPost)) | |
); | |
} | |
const renderPost = (post) => | |
createElement('div').tap(div => { | |
div.style = 'margin: 1em; border: 1px solid black;' | |
div.append(postHeader(post)); | |
if (post.type === 'Create') { | |
div.append(renderContent(post.object, | |
{ showAttribution: false } | |
)); | |
} else if (post.type === 'Announce') { | |
div.append(withPlaceholder(reblogTrail(post), | |
() => spinner().tap(s => s.style = 'display: block; margin: 1em auto'))); | |
post.content && div.append(renderContent(post)); | |
} | |
}); | |
const postHeader = (post) => createElement('div').tap(div => { | |
div.style = "margin: 1em;" | |
div.append(renderUsername(post.attributedTo || post.actor)); | |
if (post.type === 'Announce') { | |
div.append(createElement('span').tap(s => s.innerText = ' reblogged ')); | |
const rebloggedFrom = resolve(post.object).then(o => | |
o.attributedTo || o.actor | |
); | |
div.append(renderUsername(rebloggedFrom)); | |
}; | |
}); | |
const reblogTrail = async (post) => { | |
if (post.type !== 'Announce') { | |
return []; | |
} | |
const reblog = await resolve(post.object); | |
return reblogTrail(reblog).tap(async trail => | |
(await trail).push(renderContent(reblog)) | |
); | |
} | |
const renderContent = ({ | |
content, summary, | |
actor, | |
attributedTo=actor | |
}, { | |
showAttribution = true | |
} = {}) => | |
createElement('div').tap(container => { | |
container.style.margin = '1em'; | |
if (showAttribution) { | |
container.append(createElement('div').tap(separator => { | |
separator.style.display = 'flex'; | |
separator.append(renderUsername(attributedTo)); | |
separator.append(createElement('hr').tap(hr => { | |
hr.style = 'margin-left: 1em; flex-grow: 1'; | |
})) | |
})); | |
} | |
container.append(createElement('div').tap(contentElement => { | |
contentElement.innerHTML = content || summary; | |
})); | |
}); | |
const renderUsername = (user) => | |
withPlaceholder(async () => { | |
const { | |
preferredUsername | |
} = await resolve(await user); | |
return createElement('strong').tap(attribution => { | |
attribution.innerText = preferredUsername; | |
}); | |
}, () => spinner().tap(s => s.style = 'max-height: 1em;')); | |
const withCors = (url) => `https://cors-anywhere.herokuapp.com/${url}`; | |
function resolve(objectOrUrl, cors=true) { | |
if (typeof objectOrUrl === "string") { | |
if (!resolve.cache[objectOrUrl]) { | |
const location = cors ? withCors(objectOrUrl) : objectOrUrl; | |
resolve.cache[objectOrUrl] = fetch( | |
location, | |
{headers: {Accept: 'application/activity+json'}} | |
).then(resp => resp.json()); | |
} | |
return resolve.cache[objectOrUrl]; | |
} else { | |
return Promise.resolve(objectOrUrl); | |
} | |
} | |
resolve.cache = {}; | |
function tap(f) { | |
if (f instanceof AsyncFunction) { | |
return f(this).then(() => this); | |
} else { | |
f(this); return this; | |
} | |
}; | |
function withPlaceholder(funcOrPromise, placeholder = spinner) { | |
const placeholderElement = placeholder(); | |
const promise = funcOrPromise instanceof Promise ? | |
funcOrPromise : funcOrPromise(); | |
promise.then(element => { | |
placeholderElement.replaceWith(...([].concat(element))); | |
}).catch(error => { | |
placeholderElement.replaceWith(renderError(error)); | |
}); | |
return placeholderElement; | |
} | |
function renderError(error) { | |
console.error(error); | |
return createElement('span').tap(span => { | |
span.style = 'color: red; font-weight: bold'; | |
span.innerText = 'error'; | |
}) | |
} | |
function spinner() { | |
return createElement('img').tap(img => { | |
img.alt = 'placeholder spinner'; | |
img.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"; | |
}) | |
} | |
</script> | |
<script>init();</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment