feat: add BlueskyPost (#167)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

.changeset/spotty-singers-scream.md

@@ -0,0 +1,7 @@
+---
+'@astro-community/astro-embed-integration': minor
+'@astro-community/astro-embed-bluesky': minor
+'astro-embed': minor
+---
+
+Adds Bluesky Post embed

demo/src/pages/bluesky.astro

@@ -0,0 +1,26 @@
+---
+import { BlueskyPost } from '@astro-community/astro-embed-bluesky';
+import Base from '../layouts/Base.astro';
+import post from '../post.json';
+---
+
+<Base title="BlueskyPost component example">
+	<BlueskyPost post={post.data} />
+	<p>Raw data</p>
+	<BlueskyPost post="https://bsky.app/profile/wesbos.com/post/3la2ezdodvu2g" />
+	<p>Basic</p>
+	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la2snrsnhd2a" />
+	<p>Images</p>
+	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7xzeex4vf2m" />
+	<p>External link</p>
+	<BlueskyPost
+		post="https://bsky.app/profile/wattenberger.com/post/3la54isd7az2i"
+	/>
+	<p>Video</p>
+	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7zx4hltw62a" />
+	<p>External media with quote</p>
+	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la4wuiii4o2e" />
+	<p>External link with quote</p>
+	<BlueskyPost post="https://bsky.app/profile/sentry.io/post/3la5clrgyw52g" />
+	<p>Starter pack</p>
+</Base>

demo/src/pages/index.astro

@@ -20,7 +20,13 @@ import Base from '../layouts/Base.astro';
 			>
 		</li>
 		<li>
-			<a href="/baseline-status"><code>&lt;BaselineStatus/&gt;</code> component examples</a>
+			<a href="/baseline-status"
+				><code>&lt;BaselineStatus/&gt;</code> component examples</a
+			>
+		</li>
+		<li>
+			<a href="/bluesky"><code>&lt;BlueskyPost/&gt;</code> component examples</a
+			>
 		</li>
 	</ul>
 	<h2>Other examples</h2>

demo/src/pages/integration.mdx

@@ -18,6 +18,8 @@ defineConfig({
 
 https://twitter.com/astrodotbuild/status/1511750228428435457
 
+https://bsky.app/profile/antfu.me/post/3la5f4i4znh2c
+
 https://vimeo.com/32001208
 
 http://www.youtube.com/watch?v=Hoe-woAhq_k

demo/src/pages/markdown.mdx

@@ -3,7 +3,7 @@ title: Components in MDX
 layout: ../layouts/Base.astro
 ---
 
-import { Tweet, YouTube, LinkPreview } from 'astro-embed';
+import { Tweet, YouTube, LinkPreview, BlueskyPost } from 'astro-embed';
 
 The embeds on this page are imported as components in the MDX frontmatter’s `setup` block and then used in the document body.
 
@@ -27,3 +27,7 @@ setup: |
 ## `<LinkPreview />`
 
     <LinkPreview id="https://astro.build/blog/welcome-world/" />
+
+## `<BlueskyPost />`
+
+    <BlueskyPost id="https://bsky.app/profile/wesbos.com/post/3la2ezdodvu2g" />

demo/src/post.json

@@ -0,0 +1,75 @@
+{
+  "id": "bafyreihqnx74v7vawq6nkao7ysljobitlq4j5lsvds7y7no5imhkhvmmee",
+  "data": {
+    "uri": "at://did:plc:uwbl4k3tza7eyjv3morkrld2/app.bsky.feed.post/3khyhd5tdi32t",
+    "cid": "bafyreihqnx74v7vawq6nkao7ysljobitlq4j5lsvds7y7no5imhkhvmmee",
+    "author": {
+      "did": "did:plc:uwbl4k3tza7eyjv3morkrld2",
+      "handle": "mk.gg",
+      "displayName": "Matt Kane",
+      "avatar": "https://cdn.bsky.app/img/avatar/plain/did:plc:uwbl4k3tza7eyjv3morkrld2/bafkreic4mwsbm2tmuonamj4jq4kcjofk35bwics2f4oorp57f3cdfusjwu@jpeg",
+      "associated": {
+        "chat": {
+          "allowIncoming": "following"
+        }
+      },
+      "labels": [],
+      "createdAt": "2023-05-25T20:08:01.862Z"
+    },
+    "record": {
+      "$type": "app.bsky.feed.post",
+      "createdAt": "2024-01-02T09:42:47.992Z",
+      "embed": {
+        "$type": "app.bsky.embed.external",
+        "external": {
+          "description": "Live UK train departure boards",
+          "thumb": {
+            "$type": "blob",
+            "ref": {
+              "$link": "bafkreigtng2rcb2qkucgk2l53ow63f3rk5sraw3zlsde363pvyuf7hp7by"
+            },
+            "mimeType": "image/jpeg",
+            "size": 512514
+          },
+          "title": "Live Trains - UK railway times - Apps on Google Play",
+          "uri": "https://play.google.com/store/apps/details?id=live.departures.livetrains"
+        }
+      },
+      "facets": [
+        {
+          "features": [
+            {
+              "$type": "app.bsky.richtext.facet#link",
+              "uri": "https://play.google.com/store/apps/details?id=live.departures.livetrains"
+            }
+          ],
+          "index": {
+            "byteEnd": 300,
+            "byteStart": 269
+          }
+        }
+      ],
+      "langs": ["en"],
+      "text": "Happy New Year! My watch app has been approved. It's a live UK train times app for Wear OS with live departures, delays etc. No fancy extra features - just the stuff you need when heading to the station. I got a free Pixel Watch 2 when I bought my phone, so made this. play.google.com/store/apps/d..."
+    },
+    "embed": {
+      "$type": "app.bsky.embed.external#view",
+      "external": {
+        "uri": "https://play.google.com/store/apps/details?id=live.departures.livetrains",
+        "title": "Live Trains - UK railway times - Apps on Google Play",
+        "description": "Live UK train departure boards",
+        "thumb": "https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uwbl4k3tza7eyjv3morkrld2/bafkreigtng2rcb2qkucgk2l53ow63f3rk5sraw3zlsde363pvyuf7hp7by@jpeg"
+      }
+    },
+    "replyCount": 0,
+    "repostCount": 0,
+    "likeCount": 0,
+    "quoteCount": 0,
+    "indexedAt": "2024-01-02T09:42:47.992Z",
+    "labels": []
+  },
+  "rendered": {
+    "html": "Happy New Year! My watch app has been approved. It&#39;s a live UK train times app for Wear OS with live departures, delays etc. No fancy extra features - just the stuff you need when heading to the station. I got a free Pixel Watch 2 when I bought my phone, so made this. <a href=\"https://play.google.com/store/apps/details?id=live.departures.livetrains\">play.google.com/store/apps/d...</a>"
+  },
+  "collection": "bluesky"
+}

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

@@ -0,0 +1,87 @@
+---
+title: Bluesky Post
+description: Learn how to use the Astro Embed BlueskyPost component to embed Bluesky posts in your website
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { BlueskyPost } from '@astro-community/astro-embed-bluesky';
+
+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](https://embed.bsky.app/), but without any client-side JavaScript.
+
+<Tabs>
+<TabItem label="Astro" icon="astro">
+```astro
+---
+import { BlueskyPost } from 'astro-embed';
+---
+
+<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la4wqeyztm2u" />
+
+````
+</TabItem>
+<TabItem label="MDX" icon="seti:markdown">
+```mdx
+import { BlueskyPost } from 'astro-embed';
+
+<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la4wqeyztm2u" />
+````
+
+</TabItem>
+</Tabs>
+
+The above code produces the following result:
+
+<div>
+	<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la4wqeyztm2u" />
+</div>
+
+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](https://docs.bsky.app/docs/get-started), or use a post object from [the Astro Bluesky content loader](https://www.npmjs.com/package/@ascorbic/bluesky-loader).
+
+```astro
+---
+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:
+
+<div>
+	<BlueskyPost id="https://bsky.app/profile/astro.build/post/3la7gw63tfn26" />
+</div>
+
+<div>
+	<BlueskyPost id="https://bsky.app/profile/mk.gg/post/3la2snrsnhd2a" />
+</div>
+
+<div>
+	<BlueskyPost id="https://bsky.app/profile/fujino.dev/post/3la2llq5x2y2q" />
+</div>
+
+<div>
+	<BlueskyPost id="https://bsky.app/profile/dierkens.dev/post/3la2wzxzixe2c" />
+</div>
+
+## Standalone installation
+
+If you only need the `<BlueskyPost>` component, you can install the package directly instead of the main `astro-embed` package:
+
+import { PackageManagers } from 'starlight-package-managers';
+
+<PackageManagers pkg="@astro-community/astro-embed-bluesky" />
+
+The `<BlueskyPost>` component can then be imported as:
+
+```js
+import { BlueskyPost } from '@astro-community/astro-embed-bluesky';
+```

docs/src/content/docs/components/link-preview.mdx

@@ -46,20 +46,17 @@ The above code produces the following result:
 
 <LinkPreview id="https://fosstodon.org/@mikeneu/112123823339364565" />
 
-
 ### Hiding media
 
 If a URL's image or video is unwanted, add `hideMedia` as a prop.
 
-
 ```astro
 <LinkPreview id="https://fosstodon.org/@mikeneu/112123823339364565" hideMedia />
 ```
 
 The above code produces the following result:
 
-<LinkPreview id="https://fosstodon.org/@mikeneu/112123823339364565" hideMedia/>
-
+<LinkPreview id="https://fosstodon.org/@mikeneu/112123823339364565" hideMedia />
 
 ### Limitations
 

docs/src/content/docs/examples/tweet-with-js-dark.mdx

@@ -13,13 +13,19 @@ Adding Twitter’s widget script will hydrate the HTML markup of `<Tweet>`.
 ```astro
 <script async src="https://platform.twitter.com/widgets.js"></script>
 
-<Tweet theme="dark" id="https://twitter.com/astrodotbuild/status/1632809919291457537" />
+<Tweet
+	theme="dark"
+	id="https://twitter.com/astrodotbuild/status/1632809919291457537"
+/>
 ```
 
 The above code produces the following result:
 
 <script async src="https://platform.twitter.com/widgets.js"></script>
 
-<Tweet theme="dark" id="https://twitter.com/astrodotbuild/status/1632809919291457537" />
+<Tweet
+	theme="dark"
+	id="https://twitter.com/astrodotbuild/status/1632809919291457537"
+/>
 
 <LinkCard title="See full Tweet docs" href="/components/twitter/" />

docs/src/content/docs/index.mdx

@@ -46,6 +46,14 @@ import { Icon, Card, CardGrid } from '@astrojs/starlight/components';
 
     </Card>
 
+    <Card title="Bluesky" icon="blueSky">
+
+    	Embed a fully-styled Bluesky post with no client-side JavaScript.
+
+    	[Bluesky Post docs](/components/bluesky/)
+
+    </Card>
+
     <Card title="Link Preview" icon="seti:html">
 
     	Embed the Open Graph media and metadata for any URL in your page.

docs/tsconfig.json

@@ -1,3 +1,3 @@
 {
   "extends": "astro/tsconfigs/strictest"
-}
+}