A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
1export interface ParsedAtUri { 2 did: string; 3 collection: string; 4 rkey: string; 5} 6 7export function parseAtUri(uri?: string): ParsedAtUri | undefined { 8 if (!uri || !uri.startsWith("at://")) return undefined; 9 const withoutScheme = uri.slice("at://".length); 10 const [did, collection, rkey] = withoutScheme.split("/"); 11 if (!did || !collection || !rkey) return undefined; 12 return { did, collection, rkey }; 13} 14 15export function toBlueskyPostUrl(target: ParsedAtUri): string | undefined { 16 if (target.collection !== "app.bsky.feed.post") return undefined; 17 return `https://bsky.app/profile/${target.did}/post/${target.rkey}`; 18} 19 20export function formatDidForLabel(did: string): string { 21 return did.replace(/^did:(plc:)?/, ""); 22} 23 24const ABSOLUTE_URL_PATTERN = /^[a-zA-Z][a-zA-Z\d+\-.]*:/; 25 26export function normalizeLeafletBasePath( 27 basePath?: string, 28): string | undefined { 29 if (!basePath) return undefined; 30 const trimmed = basePath.trim(); 31 if (!trimmed) return undefined; 32 const withScheme = ABSOLUTE_URL_PATTERN.test(trimmed) 33 ? trimmed 34 : `https://${trimmed}`; 35 try { 36 const url = new URL(withScheme); 37 url.hash = ""; 38 return url.href.replace(/\/?$/, ""); 39 } catch { 40 return undefined; 41 } 42} 43 44export function leafletRkeyUrl( 45 basePath: string | undefined, 46 rkey: string, 47): string | undefined { 48 const normalized = normalizeLeafletBasePath(basePath); 49 if (!normalized) return undefined; 50 return `${normalized}/${encodeURIComponent(rkey)}`; 51}