A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
1import type { BlobWithCdn } from "../hooks/useBlueskyAppview";
2
3/**
4 * Type guard to check if a blob has a CDN URL from appview.
5 */
6export function isBlobWithCdn(value: unknown): value is BlobWithCdn {
7 if (typeof value !== "object" || value === null) return false;
8 const obj = value as Record<string, unknown>;
9 return (
10 obj.$type === "blob" &&
11 typeof obj.cdnUrl === "string" &&
12 typeof obj.ref === "object" &&
13 obj.ref !== null &&
14 typeof (obj.ref as { $link?: unknown }).$link === "string"
15 );
16}
17
18/**
19 * Extracts CID from a blob reference object.
20 * Works with both legacy and modern blob formats.
21 */
22export function extractCidFromBlob(blob: unknown): string | undefined {
23 if (typeof blob !== "object" || blob === null) return undefined;
24
25 const blobObj = blob as {
26 ref?: { $link?: string };
27 cid?: string;
28 };
29
30 if (typeof blobObj.cid === "string") return blobObj.cid;
31 if (typeof blobObj.ref === "object" && blobObj.ref !== null) {
32 const link = blobObj.ref.$link;
33 if (typeof link === "string") return link;
34 }
35
36 return undefined;
37}