@aendra/bluemoji v3.0.21
Bluemoji! 💙
This is all the client libraries for the Bluemoji project. This is what you need if you're wanting to implement Bluemoji for your AppView.
Installation
Via NPM
$ npm install @aendra/bluemoji
Usage
There are two things you'll need to do with this to make it work:
1. Facet
The facet (defined in the schema blue.moji.richtext.facet
) extends the @atproto/api
RichText
class to support Bluemoji.
Use this instead of the first-party RichText
class to enable your clients to attach Bluemoji facets to records.
import { BluemojiRichText } from "@aendra/bluemoji/facet";
import { AtpAgent } from "@atproto/api";
const agent = new AtpAgent({ service: "https://api.bsky.social" });
await agent.login({ ...credentials });
// creating richtext
const rt = new BluemojiRichText({
text: "Hello @aendra.com, check out this link: https://moji.blue :blue-kiss:"
});
await rt.detectFacets(agent); // automatically detects mentions and links
const postRecord = {
$type: "app.bsky.feed.post",
text: rt.text,
facets: rt.facets,
createdAt: new Date().toISOString()
};
// At least one facet will have a feature of type "blue.moji.richtext.facet"
assert.strictEquals(
rt.facets.some((f) =>
f.features.some((ff) => f.$type === "blue.moji.richtext.facet")
),
true
);
### Render
Once facets are attached to a record, you can render them using the helper libraries in render/
:
import { render } from "@aendra/bluemoji/render";
import { AtpAgent } from "@atproto/api";
import { record, credentials } from "./fixtures";
const agent = new AtpAgent({ service: "https://api.bsky.social" });
await agent.login({ ...credentials });
const [bluemojiFacet] = record.facets;
const element = render(bluemojiFacet, agent);
assert.ok(
element instanceof HTMLCanvasElement || element instanceof HTMLImageElement,
"Render returns either <img> (PNG, APNG) or <canvas> (dotLottie)"
);
Components
A few components are in development for multiple targets. To start, I hope to include renderer components for:
- React
- React Native
- Web Component Custom Element
Repo Contents
src
├── facet # Facet parsing and creation
│
├── render # Facet rendering
│
├── util # Utility functions
│ ├── resizePngToUintArray.ts # Resize a PNG blob to Uint8Array
│ └── uploadBluemoji.ts # Create a blue.moji.collection.item record
│
└── components (these are all works-in-progress)
├── react # React renderer (WIP)
├── react-native # React Native renderer (WIP)
└── webcomponent # Web Component renderer (WIP)
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago