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}