feat: Add Bluesky showcase component and update docs

.changeset/hungry-ducks-relax.md

@@ -0,0 +1,5 @@
+---
+'starlight-showcases': patch
+---
+
+Adds Bluesky showcase component.

docs/src/content/docs/components/bluesky.mdx

@@ -0,0 +1,58 @@
+---
+title: Bluesky
+description: Learn how to use the Bluesky component to showcase posts.
+sidebar:
+  order: 6
+---
+
+The `<ShowcaseBluesky>` component can be used to showcase Bluesky posts.
+
+## Import
+
+```js
+import { ShowcaseBluesky } from 'starlight-showcases'
+```
+
+## Usage
+
+Specify a list of Bluesky posts to display using the `entries` prop.
+
+import { Preview } from '@hideoo/starlight-plugins-docs-components'
+import { ShowcaseBluesky } from 'starlight-showcases'
+
+<Preview>
+
+```mdx title="src/content/docs/showcase.mdx"
+import { ShowcaseBluesky } from 'starlight-showcases'
+
+<ShowcaseBluesky
+  entries={[
+    'https://bsky.app/profile/astro.build/post/3lifesehhok27',
+    'https://bsky.app/profile/astro.build/post/3ld7tgc2cts2l',
+  ]}
+/>
+```
+
+<ShowcaseBluesky
+  slot="preview"
+  entries={[
+    'https://bsky.app/profile/astro.build/post/3lifesehhok27',
+    'https://bsky.app/profile/astro.build/post/3ld7tgc2cts2l',
+  ]}
+/>
+
+</Preview>
+
+The `<ShowcaseBluesky>` component uses [Astro Embed](https://astro-embed.netlify.app/) to load a minimal version of Bluesky’s widget with zero JavaScript and only static HTML content.
+
+## Props
+
+The `<ShowcaseBluesky>` component accepts the following props:
+
+### `entries`
+
+**required**  
+**type:** `string[]`
+
+The list of Bluesky post URLs to display.
+See the [Usage](#usage) section for an example.

docs/src/content/docs/components/profiles.mdx

@@ -2,7 +2,7 @@
 title: Profiles
 description: Learn how to use the profile component to showcase profiles including a name, description, picture and link.
 sidebar:
-  order: 7
+  order: 8
 ---
 
 The `<ShowcaseProfile>` component can be used to showcase profiles like GitHub users, repositories or any other profile.

docs/src/content/docs/components/quotes.mdx

@@ -2,7 +2,7 @@
 title: Quotes
 description: Learn how to use the quotes component to showcase quotes.
 sidebar:
-  order: 6
+  order: 7
 ---
 
 The `<ShowcaseQuote>` component can be used to showcase quotes which can link to their respective sources.

docs/src/content/docs/demo.mdx

@@ -130,6 +130,20 @@ import { ShowcaseTwitter } from 'starlight-showcases'
   ]}
 />
 
+## Bluesky
+
+To showcase Bluesky posts, use the [`<ShowcaseBluesky>`](/components/bluesky/) component.
+
+import { ShowcaseBluesky } from 'starlight-showcases'
+
+<ShowcaseBluesky
+  entries={[
+    'https://bsky.app/profile/astro.build/post/3lifesehhok27',
+    'https://bsky.app/profile/astro.build/post/3ld7tgc2cts2l',
+    'https://bsky.app/profile/astro.build/post/3lajaipuxdk2x',
+  ]}
+/>
+
 ## Quotes
 
 To showcase quote entries, use the [`<ShowcaseQuote>`](/components/quotes/) component.

docs/src/content/docs/getting-started.mdx

@@ -5,7 +5,7 @@ description: Learn how to add author showcase pages to your documentation with t
 
 A set of [Starlight](https://starlight.astro.build) components to author showcase pages for your documentation.
 
-Different type of showcase items can be displayed, such as [text](/components/text/), [images](/components/images/), [YouTube videos](/components/youtube/), [Twitter posts](/components/twitter/), [quotes](/components/quotes/), and [profiles](/components/profiles/).
+Different type of showcase items can be displayed, such as [text](/components/text/), [images](/components/images/), [YouTube videos](/components/youtube/), [Twitter posts](/components/twitter/), [Bluesky posts](/components/bluesky/), [quotes](/components/quotes/), and [profiles](/components/profiles/).
 
 Check out the [demo](/demo/) for a preview of the components in action.
 

packages/starlight-showcases/README.md

@@ -21,7 +21,7 @@ Want to get started immediately? Check out the [getting started guide](https://s
 
 A set of [Starlight](https://starlight.astro.build) components to author showcase pages for your documentation.
 
-Different type of showcase items can be displayed, such as [text](https://starlight-showcases.vercel.app/components/text/), [images](https://starlight-showcases.vercel.app/components/images/), [YouTube videos](https://starlight-showcases.vercel.app/components/youtube/), [Twitter posts](https://starlight-showcases.vercel.app/components/twitter/), [quotes](https://starlight-showcases.vercel.app/components/quotes/), and [profiles](https://starlight-showcases.vercel.app/components/profiles/).
+Different type of showcase items can be displayed, such as [text](https://starlight-showcases.vercel.app/components/text/), [images](https://starlight-showcases.vercel.app/components/images/), [YouTube videos](https://starlight-showcases.vercel.app/components/youtube/), [Twitter posts](https://starlight-showcases.vercel.app/components/twitter/), [Bluesky posts](https://starlight-showcases.vercel.app/components/bluesky/), [quotes](https://starlight-showcases.vercel.app/components/quotes/), and [profiles](https://starlight-showcases.vercel.app/components/profiles/).
 
 > [!NOTE]
 > Credits to [Chris Swithinbank (@delucis)](https://github.com/delucis/) for the original idea and implementation in the [Starlight documentation](https://starlight.astro.build/resources/showcase/) and also creating the [Astro Embed](https://astro-embed.netlify.app/) library used in this project.

packages/starlight-showcases/components/ShowcaseBluesky.astro

@@ -0,0 +1,22 @@
+---
+import ShowcaseBlueskyCard from './ShowcaseBlueskyCard.astro'
+
+export type ShowcaseBlueskyProps = Props
+
+interface Props {
+  entries: string[]
+}
+
+const { entries } = Astro.props
+---
+
+<div class="not-content sl-flex">
+  {entries.map((href) => <ShowcaseBlueskyCard {href} />)}
+</div>
+
+<style>
+  div {
+    flex-direction: column;
+    gap: 1rem;
+  }
+</style>

packages/starlight-showcases/components/ShowcaseBlueskyCard.astro

@@ -0,0 +1,13 @@
+---
+import { BlueskyPost } from '@astro-community/astro-embed-bluesky'
+
+interface Props {
+  href: string
+}
+
+const { href } = Astro.props
+---
+
+<div class="starlight-showcases-bluesky-card">
+  <BlueskyPost id={href} />
+</div>

packages/starlight-showcases/index.ts

@@ -1,3 +1,4 @@
+export { default as ShowcaseBluesky, type ShowcaseBlueskyProps } from './components/ShowcaseBluesky.astro'
 export { default as ShowcaseCTA, type ShowcaseCTAProps } from './components/ShowcaseCTA.astro'
 export { default as ShowcaseText, type ShowcaseTextProps } from './components/ShowcaseText.astro'
 export { default as ShowcaseImage, type ShowcaseImageProps } from './components/ShowcaseImage.astro'

packages/starlight-showcases/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint . --cache --max-warnings=0"
   },
   "dependencies": {
+    "@astro-community/astro-embed-bluesky": "^0.1.3",
     "@astro-community/astro-embed-twitter": "^0.5.8",
     "@astro-community/astro-embed-youtube": "^0.5.6"
   },