2b:null 2c:["$","title",null,{"children":"Bluemoji Tools | ændra | Observable"}] 31:T4bd,{ const doc = document.createElement('div'); doc.style.lineHeight = '1em'; doc.style.fontSize = '1.2em'; for (const segment of rt.segments()) { if (segment.isLink()) { const el = document.createElement('a'); el.href = segment.link?.uri; el.textContent = segment.text; doc.appendChild(el); } else if (segment.isMention()) { const el = document.createElement('a'); el.href = `https://bsky.app/profile/${segment.mention?.did}`; el.textContent = segment.text; doc.appendChild(el); } else if (segment.isBluemoji()) { for (const f of segment.facet.features) { const res = await bluemoji.render(agent, f, { width: 128, height: 128, raw: true }); const el = document.createElement("canvas"); const player = new lottie.DotLottie({ autoplay: true, loop: true, data: res.buffer, canvas: el }); el.height = el.width = 10; el.style.margin = '4px'; doc.appendChild(el); } } else { doc.appendChild(document.createTextNode(segment.text)); } } return doc; }32:T548,{ if (record) { const rt = new BluemojiRichText(record); await rt.detectFacets(agent); const doc = document.createElement("div"); doc.style.lineHeight = "1em"; doc.style.fontSize = "1.2em"; for (const segment of rt.segments()) { if (segment.isLink()) { const el = document.createElement("a"); el.href = segment.link?.uri; el.textContent = segment.text; doc.appendChild(el); } else if (segment.isMention()) { const el = document.createElement("a"); el.href = `https://bsky.app/profile/${segment.mention?.did}`; el.textContent = segment.text; doc.appendChild(el); } else if (segment.isBluemoji()) { for (const f of segment.facet.features) { const res = await bluemoji.render(agent, f, { width: 128, height: 128, raw: true }); const el = document.createElement("canvas"); const player = new lottie.DotLottie({ autoplay: true, loop: true, data: res.buffer, canvas: el }); el.height = el.width = 10; el.style.margin = "4px"; doc.appendChild(el); } } else { doc.appendChild(document.createTextNode(segment.text)); } } return doc; } }33:T7b7,record = { const postRE = /https:\/\/(?bsky.app)\/profile\/(?[\w.]+)\/post\/(?\w+)$/i; if (postRE.test(render_uri.toString())) { const {groups} = render_uri.match(postRE); const {data} = await agent.resolveHandle({handle: groups.HANDLE}); const {did} = data; const {data: {posts: [post]}} = await agent.app.bsky.feed.getPosts({uris: [ `at://${did}/app.bsky.feed.post/${groups.RKEY}`] }); const {record} = post; const rt = new BluemojiRichText({ text: raw_message }); await rt.detectFacets(agent); return record; } } // return; // let uri; // const [proto, rest] = render_uri.split(':'); // if (proto.startsWith('http')) { // const [rkey, col, handle] = rest.split('/').reverse(); // const {data: {did: recDid}} = await agent.resolveHandle({handle}); // uri = `at://${recDid}/${col === 'post' ? 'app.bsky.feed.post' : col}/${rkey}`; // } else { // uri = render_uri; // } // if (uri) { // const {data} = await agent.getPosts({uris: [uri]}); // const [post] = data.posts; // const {record} = post; // const rt = new bluemoji.BluemojiRichText({ text: record.text, facets: record.facets }); // // rendering as markdown // let markdown = ""; // for (const segment of rt.segments()) { // if (segment.isLink()) { // markdown += `[${segment.text}](${segment.link?.uri})`; // } else if (segment.isMention()) { // markdown += `[${segment.text}](https://bsky.app/profile/${segment.mention?.did})`; // } else if (segment.isBluemoji()) { // for (const f of segment.facet.features) { // const img = bluemoji.render(f); // markdown += html`${img}`; // } // } else { // markdown += segment.text; // } // } // return md`

${markdown}

`; // } // return null; // }34:T53f,result = { submit; if (agent && emoji && alttext && emojiName) { const formats = { $type: "blue.moji.collection.item#formats_v0" }; switch (resized.type) { case "png": { const { data: originalBlob } = await agent.uploadBlob( resized.original, { encoding: "image/png" } ); formats.original = originalBlob; // Add bytes APNG version if smaller than 65kb (SUBJECT TO CHANGE) if (resized.bytes.byteLength < 65536 && resized.frames > 1) { formats.apng_128 = resized.bytes; } else { const { data: blobAsset } = await agent.com.atproto.repo.uploadBlob( resized.bytes, { encoding: "image/png" } ); formats.png_128 = blobAsset.blob; } } case "lottie": { formats.lottie = resized.bytes; } } return agent.com.atproto.repo.putRecord({ validate: false, repo: agent.session.did, collection: "blue.moji.collection.item", rkey: emojiName.replace(/:/g, ""), // strip colons record: { name: `:${emojiName.replace(/:/g, "")}:`, // ensure colons are on the name alt: alttext, createdAt: new Date().toISOString(), formats, } }); } else { return false; } } 35:[] 2f:{"id":"2d3f175675de2ddc","slug":"bluemoji-tools","title":"Bluemoji Tools","thumbnail":"9d37d8e16aef77bdaddffa5c29430c44ec1e9d4ce65a2aee741457ec4dd3f590","access_level":"public","create_time":"$D2024-07-21T14:35:24.931Z","update_time":"$D2024-08-17T20:31:32.138Z","view_time":null,"first_public_time":"$D2024-07-23T01:51:19.542Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"41a0ad302e6865ac","login":"aendra","name":"ændra","avatar_url":"https://avatars-next.observableusercontent.com/b5f17deae8366d50c449e79008e4365ce3c09546ff39dff72e6c4495c3806ba5","tier":"starter_2024"},"version":978,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"522665abee3378cc","login":"aendra","name":"ændra.","avatar_url":"https://avatars-next.observableusercontent.com/b5f17deae8366d50c449e79008e4365ce3c09546ff39dff72e6c4495c3806ba5","tier":null}],"members":[{"type":"team","id":"41a0ad302e6865ac","login":"aendra","name":"ændra","avatar_url":"https://avatars-next.observableusercontent.com/b5f17deae8366d50c449e79008e4365ce3c09546ff39dff72e6c4495c3806ba5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"522665abee3378cc","login":"aendra","name":"ændra.","avatar_url":"https://avatars-next.observableusercontent.com/b5f17deae8366d50c449e79008e4365ce3c09546ff39dff72e6c4495c3806ba5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bluemoji Tools","cells":[{"id":0,"value":"# Bluemoji Tools\n\nUse this* to upload Bluemoji to Bluesky. Note that these won't be visible unless you use a client that uses [@aendra/bluemoji](https://www.npmjs.com/package/@aendra/bluemoji) to render facets!\n\n*This is mostly meant as a reference implementation for developers, and much of this may yet change.\n\n**_NONE OF THIS WORKS IN THE MAIN APP YET._** \n\n**Here be dragons!**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof username = Inputs.text({label: 'Bluesky username', required: true, placeholder: 'aendra.com'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"viewof password = Inputs.password({label: 'Bluesky app password', required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"viewof service = Inputs.text({value: \"https://bsky.social\", label: \"Service\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"### Upload or Edit Bluemoji","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"viewof emoji = Inputs.file({required: true, accept: ['.png', '.lottie', '.json'], label: 'Image file (will be downsampled to 128px)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"preview = {\n if (resized.type === 'lottie') {\n const el = document.createElement('canvas');\n el.setAttribute('style', 'width: 128px; height: 128px;');\n const ab = await emoji.arrayBuffer();\n const player = new lottie.DotLottie({autoplay: true, loop: true, data: ab, canvas: el});\n return el;\n }\n \n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":736,"value":"viewof staticPng = {\n if (preview instanceof HTMLCanvasElement) {\n const imageData = preview.getContext('2d').getImageData(0, 0, 128, 128);\n await createImageBitmap(imageData, {\n resizeWidth: 128,\n resizeHeight: 128,\n // resizeQuality: 'high', // this makes everything look worse for some reason\n });\n const image = new Image();\n image.width = 64;\n image.height = 64;\n image.src = preview.toDataURL();\n return image;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof emojiName = Inputs.text({required: true, label: 'Emoji alias', maxlength: 20, placeholder: ':emoji:', validate: str => {\n console.log(str);\n //return /^:(?!.*--)[A-Za-z0-9-]{4,20}(?Success! ${result.data.uri}` : html`

Error

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"---\n### Post a message with Bluemoji!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":453,"value":"viewof raw_message = Inputs.textarea({maxLength: 300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"{\n const button = document.createElement('button');\n button.textContent = 'Skeet!';\n button.addEventListener('click', async (evt) => {\n try {\n await agent.post({\n $type: \"app.bsky.feed.post\",\n text: rt.text,\n facets: rt.facets,\n createdAt: new Date().toISOString()\n });\n } catch (e) {\n console.error(e);\n }\n });\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"rt = {\n const rt = new BluemojiRichText({ text: raw_message });\n await rt.detectFacets(agent);\n return rt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"---\n### Render a skeet with Bluemoji","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":529,"value":"viewof render_uri = Inputs.text({label: 'URL', value: 'https://bsky.app/profile/moji.blue/post/3kzwuakuhug2q'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"---\n### Display Bluemoji collections!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":611,"value":"viewof collection_did = Inputs.text({label: 'Collection DID', value: user_did || ''})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"collection = {\n const { data } = await agent.com.atproto.repo.listRecords({\n repo: collection_did,\n collection: \"blue.moji.collection.item\",\n limit: 100\n });\n\n const items = data.records\n .map((d) => d.value)\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n return html`${items.map((d) => {\n return ``;\n })}

${\n d.name\n }

${\n d.alt\n }

${d.createdAt}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"---\n\n\n\n\n\n\n(code internals follow below)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":385,"value":"resized = {\n const ab = await emoji.arrayBuffer()\n const original = new Uint8Array(ab);\n \n if (!emoji.mimeType || emoji.name.endsWith('.lottie')) \n return {\n blob: new Blob([original], { encoding: \"application/lottie+zip\" }),\n original,\n bytes: original,\n type: \"lottie\"\n };\n \n const {bytes, frames} = await resizePngToUintArray(ab, 128);\n const blob = new Blob([bytes], {encoding: 'image/png'});\n \n return {blob, bytes, original, type: 'png'};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"async function resizePngToUintArray(arrayBuffer, size) {\n const img = UPNG.decode(arrayBuffer);\n const rgba = UPNG.toRGBA8(img);\n const resized = await Promise.all(\n rgba.map(async (buf) => {\n const imageData = new ImageData(\n new Uint8ClampedArray(buf),\n img.width,\n img.height\n );\n const bitmap = await createImageBitmap(imageData, {\n resizeWidth: size,\n resizeHeight: size,\n // resizeQuality: 'high', // this makes everything look worse for some reason\n });\n\n const ctx = DOM.context2d(size, size, 1);\n ctx.drawImage(bitmap, 0, 0);\n const { buffer } = ctx.getImageData(0, 0, size, size).data;\n return buffer;\n })\n );\n\n const apng = UPNG.encode(\n resized,\n size,\n size,\n img.depth,\n img.frames.map((f) => f.delay)\n );\n return {bytes: new Uint8Array(apng), frames: img.frames.length};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"agent = {\n const agent = new AtpAgent({ service });\n\n if (username && password) {\n try {\n await agent.login({ identifier: username, password });\n } catch (e) {\n console.error(e);\n }\n }\n\n return agent;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"user_did = agent?.session?.did","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"AtpAgent = {\n const { BskyAgent } = await import(\"https://esm.sh/@atproto/api@latest\");\n return BskyAgent;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"UPNG = {\n const upng = await import('https://esm.sh/upng-js');\n return upng.default;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"BluemojiRichText = (await import('https://esm.sh/@aendra/bluemoji@3.0.21')).BluemojiRichText","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"lottie = import('https://esm.sh/@lottiefiles/dotlottie-web@latest');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"bluemoji = import('https://esm.sh/@aendra/bluemoji@3.0.21/render')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"