3.0.21 • Published 11 months ago

@aendra/bluemoji v3.0.21

Weekly downloads
-
License
ISC
Repository
-
Last release
11 months ago

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)
3.0.21

11 months ago

3.0.20

11 months ago

3.0.19

11 months ago

3.0.18

11 months ago

3.0.17

11 months ago

3.0.16

11 months ago

3.0.15

11 months ago

3.0.14

11 months ago

3.0.13

11 months ago

3.0.12

11 months ago

3.0.11

11 months ago

3.0.10

11 months ago

3.0.9

11 months ago

3.0.8

11 months ago

3.0.7

11 months ago

3.0.6

11 months ago

3.0.5

11 months ago

3.0.4

11 months ago

3.0.3

11 months ago

3.0.2

11 months ago

3.0.1

11 months ago

3.0.0

11 months ago

2.1.2

12 months ago

2.1.1

12 months ago

2.1.0

12 months ago

2.0.4

12 months ago

2.0.2

12 months ago

2.0.1

12 months ago

2.0.0

12 months ago

1.0.0

12 months ago