Custom element for embedding Bluesky posts
A custom element for embedding Bluesky posts.
``
npm install bluesky-post-embed
then, import the package on your app.
`js
import 'bluesky-post-embed';
import 'bluesky-post-embed/style.css';
import 'bluesky-post-embed/themes/light.css';
`
` angel modehtml`
â Paul Frazee (@pfrazee.com)
>January 16, 2024 at 9:11 AM >
- src Required contextless
AT-URI of the post record
- Optional allow-unauthenticated
Whether to show the post without any context (no parent reply)
- Optional service-uri
Whether to allow unauthenticated viewing
- Optional https://public.api.bsky.app
URL to an AppView service, defaults to
- loaded error
Fired when the embed has successfully loaded the post
-
Fired when the embed fails to load the post
The embeds are powered by a static HTML renderer, this renderer can be used directly in your
server-rendering framework of choice for a zero-JS experience.
`tsx
import { fetchPost, renderPost } from 'bluesky-post-embed/core';
import 'bluesky-post-embed/style.css';
import 'bluesky-post-embed/themes/light.css';
// fetch the post
const controller = new AbortController();
const data = await fetchPost({
src: at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.feed.post/3kj2umze7zj2n,
signal: controller.signal,
});
// render the post
const html = renderPost(data);
return (
dangerouslySetInnerHTML={{ __html: html }}
>
);
``