<bluesky-profile-card-embed>

A custom element for embedding Bluesky profile cards.

Installation

$3

``
npm install bluesky-profile-card-embed
`

then, import the package on your app.

`js
import 'bluesky-profile-card-embed';

import 'bluesky-profile-card-embed/style.css';
import 'bluesky-profile-card-embed/themes/light.css';
`

Usage

`html

target="_blank"
href="https://bsky.app/profile/did:plc:2gkh62xvzokhlf6li4ol3b3d"
class="bluesky-profile-card-fallback"
>
@patak.dev's Bluesky profile


`

$3

- actor Required
DID or handle of the account
- allow-unauthenticated Optional
Whether to allow unauthenticated viewing
- service-uri Optional
URL to an AppView service, defaults to https://public.api.bsky.app

$3

- loaded
Fired when the embed has successfully loaded the profile card
- error
Fired when the embed fails to load the profile card

SSR usage

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 { fetchProfileCard, renderProfileCard } from 'bluesky-profile-card-embed/core';

import 'bluesky-profile-card-embed/style.css';
import 'bluesky-profile-card-embed/themes/light.css';

// fetch the profile
const controller = new AbortController();
const data = await fetchProfileCard({
actor: did:plc:ragtjsm2j2vknwkz3zp4oxrd,
signal: controller.signal,
});

// render the profile
const html = renderProfileCard(data);
return (
actor={data.profile?.did}
dangerouslySetInnerHTML={{ __html: html }}
>
);
``

Check out examples for Astro and
SvelteKit.