Merge pull request #760 from spences10/feat/add-bsky-component

feat: ✨ add bsky component

Author: spences10

apps/web/src/routes/+page.md

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores'
 	import {
 		AnchorFm,
+		Bluesky,
 		Buzzsprout,
 		CodePen,
 		Deezer,
@@ -131,6 +132,7 @@ Your embed not here? Start a
 or open a [PR](https://github.com/spences10/sveltekit-embed/pulls).
 
 - [AnchorFm](#anchorfm)
+- [Bluesky](#bluesky)
 - [Buzzsprout](#buzzsprout)
 - [CodePen](#codepen)
 - [Deezer](#deezer)
@@ -176,6 +178,38 @@ Output:
   episodeUrl="purrfect-dev/embed/episodes/3-6---Effective-Testing-using-Cypress-io-e1vbg9m"
 />
 
+## Bluesky
+
+Get the `did:plc` identifier from the embed post option on Bluesky.
+
+Props:
+
+```ts
+post_id = '',
+width = '100%',
+iframe_styles = '',
+```
+
+Usage:
+
+<!-- cSpell:ignore nlvjelw,pddq,qoglleko,bsky,tnwn2k,bluesky,rgba,tiktok -->
+
+```html
+<Bluesky
+	disable_observer="{$disable_observer_store}"
+	post_id="did:plc:nlvjelw3dy3pddq7qoglleko/app.bsky.feed.post/3l6ud34tnwn2k"
+	iframe_styles="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
+/>
+```
+
+Output:
+
+<Bluesky
+  disable_observer={$disable_observer_store}
+  post_id="did:plc:nlvjelw3dy3pddq7qoglleko/app.bsky.feed.post/3l6ud34tnwn2k"
+  iframe_styles="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);" 
+/>
+
 ## Buzzsprout
 
 Props:

packages/sveltekit-embed/src/lib/components/bluesky.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		post_id?: string;
+		width?: string;
+		iframe_styles?: string;
+	}
+
+	let {
+		post_id = '',
+		width = '100%',
+		iframe_styles = '',
+	}: Props = $props();
+
+	let wrapper_height = $state('174.5px');
+
+	const get_embed_url = (post_id: string) => {
+		return `https://embed.bsky.app/embed/${post_id}`;
+	};
+
+	onMount(() => {
+		const handle_message = (event: MessageEvent) => {
+			if (event.origin !== 'https://embed.bsky.app') return;
+
+			if (typeof event.data === 'object') {
+				wrapper_height = `${event.data.height || event.data.h || 500}px`;
+			}
+		};
+
+		window.addEventListener('message', handle_message);
+		return () => {
+			window.removeEventListener('message', handle_message);
+		};
+	});
+</script>
+
+<div class="bluesky-wrapper-container">
+	<div class="bluesky-wrapper" style={`height: ${wrapper_height}`}>
+		<iframe
+			data-testid="bluesky-embed"
+			title="Bluesky Post Embed"
+			src={get_embed_url(post_id)}
+			{width}
+			frameborder="0"
+			scrolling="no"
+			style={`
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border: 0px;
+				${iframe_styles}
+			`}
+		></iframe>
+	</div>
+</div>
+
+<style>
+	.bluesky-wrapper-container {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.bluesky-wrapper {
+		position: relative;
+		margin-bottom: 12px;
+		max-width: 600px;
+		min-width: 300px;
+		width: 100%;
+	}
+</style>

packages/sveltekit-embed/src/lib/components/bluesky.test.ts

@@ -0,0 +1,102 @@
+import { cleanup, render } from '@testing-library/svelte/svelte5';
+import { afterEach, describe, expect, it } from 'vitest';
+import Bluesky from './bluesky.svelte';
+
+describe('Bluesky', () => {
+	afterEach(() => cleanup());
+
+	const test_post_id =
+		'did:plc:nlvjelw3dy3pddq7qoglleko/app.bsky.feed.post/3l6ud34tnwn2k';
+
+	it('mounts with default props', async () => {
+		const { container } = render(Bluesky);
+		expect(container).toBeTruthy();
+	});
+
+	it('renders iframe with correct embed url', async () => {
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+		});
+
+		const iframe = getByTestId('bluesky-embed');
+		const expected_src = `https://embed.bsky.app/embed/${test_post_id}`;
+		expect(iframe.getAttribute('src')).toBe(expected_src);
+	});
+
+	it('renders with custom width', async () => {
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+			width: '50%',
+		});
+
+		const iframe = getByTestId('bluesky-embed');
+		expect(iframe.getAttribute('width')).toBe('50%');
+	});
+
+	it('applies custom iframe styles', async () => {
+		const custom_styles = 'border-radius: 8px; background: #f0f0f0;';
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+			iframe_styles: custom_styles,
+		});
+
+		const iframe = getByTestId('bluesky-embed');
+		const style_text = iframe.style.cssText.toLowerCase();
+		expect(style_text).toContain('border-radius: 8px');
+		expect(style_text).toContain('background: rgb(240, 240, 240)');
+	});
+
+	it('has correct default styles', async () => {
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+		});
+
+		const iframe = getByTestId('bluesky-embed');
+		const style_text = iframe.style.cssText.toLowerCase();
+		expect(style_text).toContain('position: absolute');
+		expect(style_text).toContain('top: 0px');
+		expect(style_text).toContain('left: 0px');
+		expect(style_text).toContain('width: 100%');
+		expect(style_text).toContain('height: 100%');
+		expect(style_text).toContain('border: 0px');
+		expect(iframe.getAttribute('frameborder')).toBe('0');
+		expect(iframe.getAttribute('scrolling')).toBe('no');
+	});
+
+	it('combines default and custom iframe styles correctly', async () => {
+		const custom_styles = 'border-radius: 8px; margin: 10px;';
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+			iframe_styles: custom_styles,
+		});
+
+		const iframe = getByTestId('bluesky-embed');
+		const style_text = iframe.style.cssText.toLowerCase();
+
+		// Check default styles are preserved
+		expect(style_text).toContain('position: absolute');
+		expect(style_text).toContain('width: 100%');
+		expect(style_text).toContain('height: 100%');
+		expect(style_text).toContain('border: 0px');
+
+		// Check custom styles are applied
+		expect(style_text).toContain('border-radius: 8px');
+		expect(style_text).toContain('margin: 10px');
+	});
+
+	it('updates height when receiving message from iframe', () => {
+		const { getByTestId } = render(Bluesky, {
+			post_id: test_post_id,
+		});
+
+		const message_event = new MessageEvent('message', {
+			data: { type: 'height', height: 500 },
+			origin: 'https://embed.bsky.app',
+		});
+
+		window.dispatchEvent(message_event);
+
+		const iframe = getByTestId('bluesky-embed');
+		expect(iframe.style.height).toBe('100%');
+	});
+});

packages/sveltekit-embed/src/lib/index.ts

@@ -1,4 +1,5 @@
 export { default as AnchorFm } from './components/anchor-fm.svelte';
+export { default as Bluesky } from './components/bluesky.svelte';
 export { default as Buzzsprout } from './components/buzzsprout.svelte';
 export { default as CodePen } from './components/code-pen.svelte';
 export { default as Deezer } from './components/deezer.svelte';