Skip to content
Astro Embed

Bluesky Post

The <BlueskyPost> component embeds Bluesky posts in Astro projects.

Usage

The <BlueskyPost> component generates a static HTML embed for a single Bluesky post. The HTML is designed to match the appearance of the Bluesky Embed, but without any client-side JavaScript.

---
import { BlueskyPost } from 'astro-embed';
---


<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la4wqeyztm2u" />

The above code produces the following result:

The id argument is either a Bluesky post URL, or an at:// URI. These will be loaded using the Bluesky API at build time. You can also pass a post object, which will be used directly. You can load the post using the Bluesky API, or use a post object from the Astro Bluesky content loader.

---
import { getCollection } from 'astro:content';
import { BlueskyPost } from 'astro-embed';


const posts = await getCollection('posts');
---


{posts.map((post) => <BlueskyPost post={post.data} />)}

It supports various types of embedded media, including images, videos, starter packs and lists. It can also handle quoted posts and replies. These are all displayed as static HTML, so videos etc are links to the original content.

Some examples:

Astro

Want fancy ~type-aliases? Just update your tsconfig. We'll handle the rest ✨

Video thumbnail
Play button
November 5, 2024 at 2:28 PM UTC
Matt Kane

Would you like to display your Bluesky posts in your Astro site? I've made an Astro content loader for Bluesky! When you build the site it loads your posts and puts them in a content collection. You can then display them on a page, or use the raw data however you want. github.com/ascorbic/ast...

import { authorFeedLoader } from "@ascorbic/bluesky-loader"; const posts = defineCollection({ loader: authorFeedLoader({ identifier: "mk.gg", }), }); export const collections = { posts };
--- import { getCollection } from "astro:content"; const posts = await getCollection("posts"); --- <div> { posts.map(async (post) => { const { Content } = await render(post); return ( <section> <Content /> <p>{post.data.likeCount} likes</p> </section> ); }) } </div>
November 3, 2024 at 6:15 PM UTC
Shinya Fujino

As there doesn't appear to be an Astro Starter Pack and I struggled to find Astro-related people here, I made one myself 🚀 If there's anyone missing, please let me know so I can add them. go.bsky.app/LpKjpPj

Astro Stater Pack
Shinya Fujino

Astro Stater Pack

Starter pack by Shinya Fujino

People from the Astroverse

 November 3, 2024 at 4:09 PM UTC

Standalone installation

If you only need the <BlueskyPost> component, you can install the package directly instead of the main astro-embed package:

Terminal window
npm i @astro-community/astro-embed-bluesky

The <BlueskyPost> component can then be imported as:

import { BlueskyPost } from '@astro-community/astro-embed-bluesky';