Leaflet Blog in Deno Fresh
knotbin.com
1"use client";
2
3import { useEffect, useId, useState } from "npm:react";
4
5const EMBED_URL = "https://embed.bsky.app";
6
7export function BlueskyPostEmbed({ uri }: { uri: string }) {
8 const id = useId();
9 const [height, setHeight] = useState(0);
10
11 useEffect(() => {
12 const abortController = new AbortController();
13 const { signal } = abortController;
14 window.addEventListener(
15 "message",
16 (event) => {
17 if (event.origin !== EMBED_URL) {
18 return;
19 }
20
21 const iframeId = (event.data as { id: string }).id;
22 if (id !== iframeId) {
23 return;
24 }
25
26 const internalHeight = (event.data as { height: number }).height;
27 if (internalHeight && typeof internalHeight === "number") {
28 setHeight(internalHeight);
29 }
30 },
31 { signal },
32 );
33
34 return () => {
35 abortController.abort();
36 };
37 }, [id]);
38
39 const ref_url =
40 "https://" + "knotbin.xyz/post/" + uri.split("/").pop();
41
42 const searchParams = new URLSearchParams();
43 searchParams.set("id", id);
44 searchParams.set("ref_url", encodeURIComponent(ref_url));
45
46 return (
47 <div
48 className="mt-6 flex max-w-[600px] w-full bluesky-embed"
49 data-uri={uri}
50 >
51 <iframe
52 className="w-full block border-none grow"
53 style={{ height }}
54 data-bluesky-uri={uri}
55 src={`${EMBED_URL}/embed/${uri.slice("at://".length)}?${searchParams.toString()}`}
56 width="100%"
57 frameBorder="0"
58 scrolling="no"
59 />
60 </div>
61 );
62}