commit dd2e8af357f32bcc7f9359f93d7a0fb9c047eaef · nekomimi.pet/atproto-ui

+3 -1

README.md

···

       1
       1
        
       # atproto-ui

     

       2
       2
        
       

     

       3
       3
       -
       A React component library for rendering AT Protocol records (Bluesky, Leaflet, Tangled, and more). Handles DID resolution, PDS discovery, and record fetching automatically. [Live demo](https://atproto-ui.wisp.place).

     

       3
       3
       +
       A React component library for rendering AT Protocol records (Bluesky, Leaflet, Tangled, and more). Handles DID resolution, PDS discovery, and record fetching automatically. [Live demo](https://atproto-ui.netlify.app).

     

       4
       4
       +
       

     

       5
       5
       +
       This project is mostly a wrapper on the extremely amazing work [Mary](https://mary.my.id/) has done with [atcute](https://tangled.org/@mary.my.id/atcute), please support it. I have to give thanks to [phil](https://bsky.app/profile/bad-example.com) for microcosm and slingshot. Incredible services being given for free that is responsible for why the components fetch data so quickly.

     

       4
       6
        
       

     

       5
       7
        
       ## Screenshots

     

       6
       8

+3 -1

lib/components/BlueskyPostList.tsx

···

       8
       8
        
       import { useDidResolution } from "../hooks/useDidResolution";

     

       9
       9
        
       import { BlueskyIcon } from "./BlueskyIcon";

     

       10
       10
        
       import { parseAtUri } from "../utils/at-uri";

     

       11
       11
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       11
       12
        
       

     

       12
       13
        
       /**

     

       13
       14
        
        * Options for rendering a paginated list of Bluesky posts.

     
···

       215
       216
        
       	replyParent,

     

       216
       217
        
       	hasDivider,

     

       217
       218
        
       }) => {

     

       219
       219
       +
       	const { blueskyAppBaseUrl } = useAtProto();

     

       218
       220
        
       	const text = record.text?.trim() ?? "";

     

       219
       221
        
       	const relative = record.createdAt

     

       220
       222
        
       		? formatRelativeTime(record.createdAt)

     
···

       222
       224
        
       	const absolute = record.createdAt

     

       223
       225
        
       		? new Date(record.createdAt).toLocaleString()

     

       224
       226
        
       		: undefined;

     

       225
       225
       -
       	const href = `https://bsky.app/profile/${did}/post/${rkey}`;

     

       227
       227
       +
       	const href = `${blueskyAppBaseUrl}/profile/${did}/post/${rkey}`;

     

       226
       228
        
       	const repostLabel =

     

       227
       229
        
       		reason?.$type === "app.bsky.feed.defs#reasonRepost"

     

       228
       230
        
       			? `${formatActor(reason.by) ?? "Someone"} reposted`

+7 -4

lib/components/RichText.tsx

···

       1
       1
        
       import React from "react";

     

       2
       2
        
       import type { AppBskyRichtextFacet } from "@atcute/bluesky";

     

       3
       3
        
       import { createTextSegments, type TextSegment } from "../utils/richtext";

     

       4
       4
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       4
       5
        
       

     

       5
       6
        
       export interface RichTextProps {

     

       6
       7
        
       	text: string;

     
···

       13
       14
        
        * Properly handles byte offsets and multi-byte characters.

     

       14
       15
        
        */

     

       15
       16
        
       export const RichText: React.FC<RichTextProps> = ({ text, facets, style }) => {

     

       17
       17
       +
       	const { blueskyAppBaseUrl } = useAtProto();

     

       16
       18
        
       	const segments = createTextSegments(text, facets);

     

       17
       19
        
       

     

       18
       20
        
       	return (

     

       19
       21
        
       		<span style={style}>

     

       20
       22
        
       			{segments.map((segment, idx) => (

     

       21
       21
       -
       				<RichTextSegment key={idx} segment={segment} />

     

       23
       23
       +
       				<RichTextSegment key={idx} segment={segment} blueskyAppBaseUrl={blueskyAppBaseUrl} />

     

       22
       24
        
       			))}

     

       23
       25
        
       		</span>

     

       24
       26
        
       	);

     
···

       26
       28
        
       

     

       27
       29
        
       interface RichTextSegmentProps {

     

       28
       30
        
       	segment: TextSegment;

     

       31
       31
       +
       	blueskyAppBaseUrl: string;

     

       29
       32
        
       }

     

       30
       33
        
       

     

       31
       31
       -
       const RichTextSegment: React.FC<RichTextSegmentProps> = ({ segment }) => {

     

       34
       34
       +
       const RichTextSegment: React.FC<RichTextSegmentProps> = ({ segment, blueskyAppBaseUrl }) => {

     

       32
       35
        
       	if (!segment.facet) {

     

       33
       36
        
       		return <>{segment.text}</>;

     

       34
       37
        
       	}

     
···

       68
       71
        
       

     

       69
       72
        
       		case "app.bsky.richtext.facet#mention": {

     

       70
       73
        
       			const mentionFeature = feature as AppBskyRichtextFacet.Mention;

     

       71
       71
       -
       			const profileUrl = `https://bsky.app/profile/${mentionFeature.did}`;

     

       74
       74
       +
       			const profileUrl = `${blueskyAppBaseUrl}/profile/${mentionFeature.did}`;

     

       72
       75
        
       			return (

     

       73
       76
        
       				<a

     

       74
       77
        
       					href={profileUrl}

     
···

       92
       95
        
       

     

       93
       96
        
       		case "app.bsky.richtext.facet#tag": {

     

       94
       97
        
       			const tagFeature = feature as AppBskyRichtextFacet.Tag;

     

       95
       95
       -
       			const tagUrl = `https://bsky.app/hashtag/${encodeURIComponent(tagFeature.tag)}`;

     

       98
       98
       +
       			const tagUrl = `${blueskyAppBaseUrl}/hashtag/${encodeURIComponent(tagFeature.tag)}`;

     

       96
       99
        
       			return (

     

       97
       100
        
       				<a

     

       98
       101
        
       					href={tagUrl}

+3 -1

lib/components/TangledString.tsx

···

       2
       2
        
       import { AtProtoRecord } from "../core/AtProtoRecord";

     

       3
       3
        
       import { TangledStringRenderer } from "../renderers/TangledStringRenderer";

     

       4
       4
        
       import type { TangledStringRecord } from "../renderers/TangledStringRenderer";

     

       5
       5
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       5
       6
        
       

     

       6
       7
        
       /**

     

       7
       8
        
        * Props for rendering Tangled String records.

     
···

       66
       67
        
       	loadingIndicator,

     

       67
       68
        
       	colorScheme,

     

       68
       69
        
       }) => {

     

       70
       70
       +
       	const { tangledBaseUrl } = useAtProto();

     

       69
       71
        
       	const Comp: React.ComponentType<TangledStringRendererInjectedProps> =

     

       70
       72
        
       		renderer ?? ((props) => <TangledStringRenderer {...props} />);

     

       71
       73
        
       	const Wrapped: React.FC<{

     
···

       78
       80
        
       			colorScheme={colorScheme}

     

       79
       81
        
       			did={did}

     

       80
       82
        
       			rkey={rkey}

     

       81
       81
       -
       			canonicalUrl={`https://tangled.org/strings/${did}/${encodeURIComponent(rkey)}`}

     

       83
       83
       +
       			canonicalUrl={`${tangledBaseUrl}/strings/${did}/${encodeURIComponent(rkey)}`}

     

       82
       84
        
       		/>

     

       83
       85
        
       	);

     

       84
       86

+10 -8

lib/hooks/useBlueskyAppview.ts

···

       1
       1
        
       import { useEffect, useReducer, useRef } from "react";

     

       2
       2
        
       import { useDidResolution } from "./useDidResolution";

     

       3
       3
        
       import { usePdsEndpoint } from "./usePdsEndpoint";

     

       4
       4
       -
       import { createAtprotoClient, SLINGSHOT_BASE_URL } from "../utils/atproto-client";

     

       4
       4
       +
       import { createAtprotoClient } from "../utils/atproto-client";

     

       5
       5
        
       import { useAtProto } from "../providers/AtProtoProvider";

     

       6
       6
        
       

     

       7
       7
        
       /**

     
···

       91
       91
        
       	/** Source from which the record was successfully fetched. */

     

       92
       92
        
       	source?: "appview" | "slingshot" | "pds";

     

       93
       93
        
       }

     

       94
       94
       -
       

     

       95
       95
       -
       export const DEFAULT_APPVIEW_SERVICE = "https://public.api.bsky.app";

     

       96
       94
        
       

     

       97
       95
        
       /**

     

       98
       96
        
        * Maps Bluesky collection NSIDs to their corresponding appview API endpoints.

     
···

       236
       234
        
       	appviewService,

     

       237
       235
        
       	skipAppview = false,

     

       238
       236
        
       }: UseBlueskyAppviewOptions): UseBlueskyAppviewResult<T> {

     

       239
       239
       -
       	const { recordCache } = useAtProto();

     

       237
       237
       +
       	const { recordCache, blueskyAppviewService, resolver } = useAtProto();

     

       238
       238
       +
       	const effectiveAppviewService = appviewService ?? blueskyAppviewService;

     

       240
       239
        
       	const {

     

       241
       240
        
       		did,

     

       242
       241
        
       		error: didError,

     
···

       326
       325
        
       								did,

     

       327
       326
        
       								collection,

     

       328
       327
        
       								rkey,

     

       329
       329
       -
       								appviewService ?? DEFAULT_APPVIEW_SERVICE,

     

       328
       328
       +
       								effectiveAppviewService,

     

       330
       329
        
       							);

     

       331
       330
        
       							if (result) {

     

       332
       331
        
       								return result;

     
···

       339
       338
        
       

     

       340
       339
        
       					// Tier 2: Try Slingshot getRecord

     

       341
       340
        
       					try {

     

       342
       342
       -
       						const result = await fetchFromSlingshot<T>(did, collection, rkey);

     

       341
       341
       +
       						const slingshotUrl = resolver.getSlingshotUrl();

     

       342
       342
       +
       						const result = await fetchFromSlingshot<T>(did, collection, rkey, slingshotUrl);

     

       343
       343
        
       						if (result) {

     

       344
       344
        
       							return result;

     

       345
       345
        
       						}

     
···

       408
       408
        
       		collection,

     

       409
       409
        
       		rkey,

     

       410
       410
        
       		pdsEndpoint,

     

       411
       411
       -
       		appviewService,

     

       411
       411
       +
       		effectiveAppviewService,

     

       412
       412
        
       		skipAppview,

     

       413
       413
        
       		resolvingDid,

     

       414
       414
        
       		resolvingEndpoint,

     

       415
       415
        
       		didError,

     

       416
       416
        
       		endpointError,

     

       417
       417
        
       		recordCache,

     

       418
       418
       +
       		resolver,

     

       418
       419
        
       	]);

     

       419
       420
        
       

     

       420
       421
        
       	return state;

     
···

       575
       576
        
       	did: string,

     

       576
       577
        
       	collection: string,

     

       577
       578
        
       	rkey: string,

     

       579
       579
       +
       	slingshotBaseUrl: string,

     

       578
       580
        
       ): Promise<T | undefined> {

     

       579
       579
       -
       	const res = await callGetRecord<T>(SLINGSHOT_BASE_URL, did, collection, rkey);

     

       581
       581
       +
       	const res = await callGetRecord<T>(slingshotBaseUrl, did, collection, rkey);

     

       580
       582
        
       	if (!res.ok) throw new Error(`Slingshot getRecord failed for ${did}/${collection}/${rkey}`);

     

       581
       583
        
       	return res.data.value;

     

       582
       584
        
       }

+4 -6

lib/hooks/usePaginatedRecords.ts

···

       1
       1
        
       import { useCallback, useEffect, useMemo, useRef, useState } from "react";

     

       2
       2
        
       import { useDidResolution } from "./useDidResolution";

     

       3
       3
        
       import { usePdsEndpoint } from "./usePdsEndpoint";

     

       4
       4
       -
       import { 

     

       5
       5
       -
       	DEFAULT_APPVIEW_SERVICE, 

     

       6
       6
       -
       	callAppviewRpc, 

     

       7
       7
       -
       	callListRecords 

     

       8
       8
       -
       } from "./useBlueskyAppview";

     

       4
       4
       +
       import { callAppviewRpc, callListRecords } from "./useBlueskyAppview";

     

       5
       5
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       9
       6
        
       

     

       10
       7
        
       /**

     

       11
       8
        
        * Record envelope returned by paginated AT Protocol queries.

     
···

       118
       115
        
       	authorFeedService,

     

       119
       116
        
       	authorFeedActor,

     

       120
       117
        
       }: UsePaginatedRecordsOptions): UsePaginatedRecordsResult<T> {

     

       118
       118
       +
       	const { blueskyAppviewService } = useAtProto();

     

       121
       119
        
       	const {

     

       122
       120
        
       		did,

     

       123
       121
        
       		handle,

     
···

       213
       211
        
       						}

     

       214
       212
        
       						

     

       215
       213
        
       						const res = await callAppviewRpc<AuthorFeedResponse>(

     

       216
       216
       -
       							authorFeedService ?? DEFAULT_APPVIEW_SERVICE,

     

       214
       214
       +
       							authorFeedService ?? blueskyAppviewService,

     

       217
       215
        
       							"app.bsky.feed.getAuthorFeed",

     

       218
       216
        
       							{

     

       219
       217
        
       								actor: actorIdentifier,

+78 -5

lib/providers/AtProtoProvider.tsx

···

       5
       5
        
       	useMemo,

     

       6
       6
        
       	useRef,

     

       7
       7
        
       } from "react";

     

       8
       8
       -
       import { ServiceResolver, normalizeBaseUrl } from "../utils/atproto-client";

     

       8
       8
       +
       import { ServiceResolver, normalizeBaseUrl, DEFAULT_CONFIG } from "../utils/atproto-client";

     

       9
       9
        
       import { BlobCache, DidCache, RecordCache } from "../utils/cache";

     

       10
       10
        
       

     

       11
       11
        
       /**

     
···

       16
       16
        
       	children: React.ReactNode;

     

       17
       17
        
       	/** Optional custom PLC directory URL. Defaults to https://plc.directory */

     

       18
       18
        
       	plcDirectory?: string;

     

       19
       19
       +
       	/** Optional custom identity service URL. Defaults to https://public.api.bsky.app */

     

       20
       20
       +
       	identityService?: string;

     

       21
       21
       +
       	/** Optional custom Slingshot service URL. Defaults to https://slingshot.microcosm.blue */

     

       22
       22
       +
       	slingshotBaseUrl?: string;

     

       23
       23
       +
       	/** Optional custom Bluesky appview service URL. Defaults to https://public.api.bsky.app */

     

       24
       24
       +
       	blueskyAppviewService?: string;

     

       25
       25
       +
       	/** Optional custom Bluesky app base URL for links. Defaults to https://bsky.app */

     

       26
       26
       +
       	blueskyAppBaseUrl?: string;

     

       27
       27
       +
       	/** Optional custom Tangled base URL for links. Defaults to https://tangled.org */

     

       28
       28
       +
       	tangledBaseUrl?: string;

     

       19
       29
        
       }

     

       20
       30
        
       

     

       21
       31
        
       /**

     
···

       26
       36
        
       	resolver: ServiceResolver;

     

       27
       37
        
       	/** Normalized PLC directory base URL. */

     

       28
       38
        
       	plcDirectory: string;

     

       39
       39
       +
       	/** Normalized Bluesky appview service URL. */

     

       40
       40
       +
       	blueskyAppviewService: string;

     

       41
       41
       +
       	/** Normalized Bluesky app base URL for links. */

     

       42
       42
       +
       	blueskyAppBaseUrl: string;

     

       43
       43
       +
       	/** Normalized Tangled base URL for links. */

     

       44
       44
       +
       	tangledBaseUrl: string;

     

       29
       45
        
       	/** Cache for DID documents and handle mappings. */

     

       30
       46
        
       	didCache: DidCache;

     

       31
       47
        
       	/** Cache for fetched blob data. */

     
···

       77
       93
        
       export function AtProtoProvider({

     

       78
       94
        
       	children,

     

       79
       95
        
       	plcDirectory,

     

       96
       96
       +
       	identityService,

     

       97
       97
       +
       	slingshotBaseUrl,

     

       98
       98
       +
       	blueskyAppviewService,

     

       99
       99
       +
       	blueskyAppBaseUrl,

     

       100
       100
       +
       	tangledBaseUrl,

     

       80
       101
        
       }: AtProtoProviderProps) {

     

       81
       102
        
       	const normalizedPlc = useMemo(

     

       82
       103
        
       		() =>

     

       83
       104
        
       			normalizeBaseUrl(

     

       84
       105
        
       				plcDirectory && plcDirectory.trim()

     

       85
       106
        
       					? plcDirectory

     

       86
       86
       -
       					: "https://plc.directory",

     

       107
       107
       +
       					: DEFAULT_CONFIG.plcDirectory,

     

       87
       108
        
       			),

     

       88
       109
        
       		[plcDirectory],

     

       89
       110
        
       	);

     

       111
       111
       +
       	const normalizedIdentity = useMemo(

     

       112
       112
       +
       		() =>

     

       113
       113
       +
       			normalizeBaseUrl(

     

       114
       114
       +
       				identityService && identityService.trim()

     

       115
       115
       +
       					? identityService

     

       116
       116
       +
       					: DEFAULT_CONFIG.identityService,

     

       117
       117
       +
       			),

     

       118
       118
       +
       		[identityService],

     

       119
       119
       +
       	);

     

       120
       120
       +
       	const normalizedSlingshot = useMemo(

     

       121
       121
       +
       		() =>

     

       122
       122
       +
       			normalizeBaseUrl(

     

       123
       123
       +
       				slingshotBaseUrl && slingshotBaseUrl.trim()

     

       124
       124
       +
       					? slingshotBaseUrl

     

       125
       125
       +
       					: DEFAULT_CONFIG.slingshotBaseUrl,

     

       126
       126
       +
       			),

     

       127
       127
       +
       		[slingshotBaseUrl],

     

       128
       128
       +
       	);

     

       129
       129
       +
       	const normalizedAppview = useMemo(

     

       130
       130
       +
       		() =>

     

       131
       131
       +
       			normalizeBaseUrl(

     

       132
       132
       +
       				blueskyAppviewService && blueskyAppviewService.trim()

     

       133
       133
       +
       					? blueskyAppviewService

     

       134
       134
       +
       					: DEFAULT_CONFIG.blueskyAppviewService,

     

       135
       135
       +
       			),

     

       136
       136
       +
       		[blueskyAppviewService],

     

       137
       137
       +
       	);

     

       138
       138
       +
       	const normalizedBlueskyApp = useMemo(

     

       139
       139
       +
       		() =>

     

       140
       140
       +
       			normalizeBaseUrl(

     

       141
       141
       +
       				blueskyAppBaseUrl && blueskyAppBaseUrl.trim()

     

       142
       142
       +
       					? blueskyAppBaseUrl

     

       143
       143
       +
       					: DEFAULT_CONFIG.blueskyAppBaseUrl,

     

       144
       144
       +
       			),

     

       145
       145
       +
       		[blueskyAppBaseUrl],

     

       146
       146
       +
       	);

     

       147
       147
       +
       	const normalizedTangled = useMemo(

     

       148
       148
       +
       		() =>

     

       149
       149
       +
       			normalizeBaseUrl(

     

       150
       150
       +
       				tangledBaseUrl && tangledBaseUrl.trim()

     

       151
       151
       +
       					? tangledBaseUrl

     

       152
       152
       +
       					: DEFAULT_CONFIG.tangledBaseUrl,

     

       153
       153
       +
       			),

     

       154
       154
       +
       		[tangledBaseUrl],

     

       155
       155
       +
       	);

     

       90
       156
        
       	const resolver = useMemo(

     

       91
       91
       -
       		() => new ServiceResolver({ plcDirectory: normalizedPlc }),

     

       92
       92
       -
       		[normalizedPlc],

     

       157
       157
       +
       		() => new ServiceResolver({

     

       158
       158
       +
       			plcDirectory: normalizedPlc,

     

       159
       159
       +
       			identityService: normalizedIdentity,

     

       160
       160
       +
       			slingshotBaseUrl: normalizedSlingshot,

     

       161
       161
       +
       		}),

     

       162
       162
       +
       		[normalizedPlc, normalizedIdentity, normalizedSlingshot],

     

       93
       163
        
       	);

     

       94
       164
        
       	const cachesRef = useRef<{

     

       95
       165
        
       		didCache: DidCache;

     
···

       108
       178
        
       		() => ({

     

       109
       179
        
       			resolver,

     

       110
       180
        
       			plcDirectory: normalizedPlc,

     

       181
       181
       +
       			blueskyAppviewService: normalizedAppview,

     

       182
       182
       +
       			blueskyAppBaseUrl: normalizedBlueskyApp,

     

       183
       183
       +
       			tangledBaseUrl: normalizedTangled,

     

       111
       184
        
       			didCache: cachesRef.current!.didCache,

     

       112
       185
        
       			blobCache: cachesRef.current!.blobCache,

     

       113
       186
        
       			recordCache: cachesRef.current!.recordCache,

     

       114
       187
        
       		}),

     

       115
       115
       -
       		[resolver, normalizedPlc],

     

       188
       188
       +
       		[resolver, normalizedPlc, normalizedAppview, normalizedBlueskyApp, normalizedTangled],

     

       116
       189
        
       	);

     

       117
       190
        
       

     

       118
       191
        
       	return (

+3 -1

lib/renderers/BlueskyProfileRenderer.tsx

···

       1
       1
        
       import React from "react";

     

       2
       2
        
       import type { ProfileRecord } from "../types/bluesky";

     

       3
       3
        
       import { BlueskyIcon } from "../components/BlueskyIcon";

     

       4
       4
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       4
       5
        
       

     

       5
       6
        
       export interface BlueskyProfileRendererProps {

     

       6
       7
        
       	record: ProfileRecord;

     
···

       19
       20
        
       	handle,

     

       20
       21
        
       	avatarUrl,

     

       21
       22
        
       }) => {

     

       23
       23
       +
       	const { blueskyAppBaseUrl } = useAtProto();

     

       22
       24
        
       

     

       23
       25
        
       	if (error)

     

       24
       26
        
       		return (

     
···

       28
       30
        
       		);

     

       29
       31
        
       	if (loading && !record) return <div style={{ padding: 8 }}>Loading…</div>;

     

       30
       32
        
       

     

       31
       31
       -
       	const profileUrl = `https://bsky.app/profile/${did}`;

     

       33
       33
       +
       	const profileUrl = `${blueskyAppBaseUrl}/profile/${did}`;

     

       32
       34
        
       	const rawWebsite = record.website?.trim();

     

       33
       35
        
       	const websiteHref = rawWebsite

     

       34
       36
        
       		? rawWebsite.match(/^https?:\/\//i)

+5 -3

lib/renderers/LeafletDocumentRenderer.tsx

···

       1
       1
        
       import React, { useMemo, useRef } from "react";

     

       2
       2
        
       import { useDidResolution } from "../hooks/useDidResolution";

     

       3
       3
        
       import { useBlob } from "../hooks/useBlob";

     

       4
       4
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       4
       5
        
       import {

     

       5
       6
        
       	parseAtUri,

     

       6
       7
        
       	formatDidForLabel,

     
···

       54
       55
        
       	publicationBaseUrl,

     

       55
       56
        
       	publicationRecord,

     

       56
       57
        
       }) => {

     

       58
       58
       +
       	const { blueskyAppBaseUrl } = useAtProto();

     

       57
       59
        
       	const authorDid = record.author?.startsWith("did:")

     

       58
       60
        
       		? record.author

     

       59
       61
        
       		: undefined;

     
···

       78
       80
        
       				: undefined);

     

       79
       81
        
       	const authorLabel = resolvedPublicationLabel ?? fallbackAuthorLabel;

     

       80
       82
        
       	const authorHref = publicationUri

     

       81
       81
       -
       		? `https://bsky.app/profile/${publicationUri.did}`

     

       83
       83
       +
       		? `${blueskyAppBaseUrl}/profile/${publicationUri.did}`

     

       82
       84
        
       		: undefined;

     

       83
       85
        
       

     

       84
       86
        
       	if (error)

     
···

       105
       107
        
       				timeStyle: "short",

     

       106
       108
        
       			})

     

       107
       109
        
       		: undefined;

     

       108
       108
       -
       	const fallbackLeafletUrl = `https://bsky.app/leaflet/${encodeURIComponent(did)}/${encodeURIComponent(rkey)}`;

     

       110
       110
       +
       	const fallbackLeafletUrl = `${blueskyAppBaseUrl}/leaflet/${encodeURIComponent(did)}/${encodeURIComponent(rkey)}`;

     

       109
       111
        
       	const publicationRoot =

     

       110
       112
        
       		publicationBaseUrl ?? publicationRecord?.base_path ?? undefined;

     

       111
       113
        
       	const resolvedPublicationRoot = publicationRoot

     
···

       117
       119
        
       		publicationLeafletUrl ??

     

       118
       120
        
       		postUrl ??

     

       119
       121
        
       		(publicationUri

     

       120
       120
       -
       			? `https://bsky.app/profile/${publicationUri.did}`

     

       122
       122
       +
       			? `${blueskyAppBaseUrl}/profile/${publicationUri.did}`

     

       121
       123
        
       			: undefined) ??

     

       122
       124
        
       		fallbackLeafletUrl;

     

       123
       125

+3 -1

lib/renderers/TangledStringRenderer.tsx

···

       1
       1
        
       import React from "react";

     

       2
       2
        
       import type { ShTangledString } from "@atcute/tangled";

     

       3
       3
       +
       import { useAtProto } from "../providers/AtProtoProvider";

     

       3
       4
        
       

     

       4
       5
        
       export type TangledStringRecord = ShTangledString.Main;

     

       5
       6
        
       

     
···

       20
       21
        
       	rkey,

     

       21
       22
        
       	canonicalUrl,

     

       22
       23
        
       }) => {

     

       24
       24
       +
       	const { tangledBaseUrl } = useAtProto();

     

       23
       25
        
       

     

       24
       26
        
       	if (error)

     

       25
       27
        
       		return (

     
···

       31
       33
        
       

     

       32
       34
        
       	const viewUrl =

     

       33
       35
        
       		canonicalUrl ??

     

       34
       34
       -
       		`https://tangled.org/strings/${did}/${encodeURIComponent(rkey)}`;

     

       36
       36
       +
       		`${tangledBaseUrl}/strings/${did}/${encodeURIComponent(rkey)}`;

     

       35
       37
        
       	const timestamp = new Date(record.createdAt).toLocaleString(undefined, {

     

       36
       38
        
       		dateStyle: "medium",

     

       37
       39
        
       		timeStyle: "short",

+35 -4

lib/utils/atproto-client.ts

···

       13
       13
        
       export interface ServiceResolverOptions {

     

       14
       14
        
       	plcDirectory?: string;

     

       15
       15
        
       	identityService?: string;

     

       16
       16
       +
       	slingshotBaseUrl?: string;

     

       16
       17
        
       	fetch?: typeof fetch;

     

       17
       18
        
       }

     

       18
       19
        
       

     

       19
       20
        
       const DEFAULT_PLC = "https://plc.directory";

     

       20
       21
        
       const DEFAULT_IDENTITY_SERVICE = "https://public.api.bsky.app";

     

       22
       22
       +
       const DEFAULT_SLINGSHOT = "https://slingshot.microcosm.blue";

     

       23
       23
       +
       const DEFAULT_APPVIEW = "https://public.api.bsky.app";

     

       24
       24
       +
       const DEFAULT_BLUESKY_APP = "https://bsky.app";

     

       25
       25
       +
       const DEFAULT_TANGLED = "https://tangled.org";

     

       26
       26
       +
       

     

       21
       27
        
       const ABSOLUTE_URL_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;

     

       22
       28
        
       const SUPPORTED_DID_METHODS = ["plc", "web"] as const;

     

       23
       29
        
       type SupportedDidMethod = (typeof SUPPORTED_DID_METHODS)[number];

     

       24
       30
        
       type SupportedDid = Did<SupportedDidMethod>;

     

       25
       31
        
       

     

       26
       26
       -
       export const SLINGSHOT_BASE_URL = "https://slingshot.microcosm.blue";

     

       32
       32
       +
       /**

     

       33
       33
       +
        * Default configuration values for AT Protocol services.

     

       34
       34
       +
        * These can be overridden via AtProtoProvider props.

     

       35
       35
       +
        */

     

       36
       36
       +
       export const DEFAULT_CONFIG = {

     

       37
       37
       +
       	plcDirectory: DEFAULT_PLC,

     

       38
       38
       +
       	identityService: DEFAULT_IDENTITY_SERVICE,

     

       39
       39
       +
       	slingshotBaseUrl: DEFAULT_SLINGSHOT,

     

       40
       40
       +
       	blueskyAppviewService: DEFAULT_APPVIEW,

     

       41
       41
       +
       	blueskyAppBaseUrl: DEFAULT_BLUESKY_APP,

     

       42
       42
       +
       	tangledBaseUrl: DEFAULT_TANGLED,

     

       43
       43
       +
       } as const;

     

       44
       44
       +
       

     

       45
       45
       +
       export const SLINGSHOT_BASE_URL = DEFAULT_SLINGSHOT;

     

       27
       46
        
       

     

       28
       47
        
       export const normalizeBaseUrl = (input: string): string => {

     

       29
       48
        
       	const trimmed = input.trim();

     
···

       38
       57
        
       

     

       39
       58
        
       export class ServiceResolver {

     

       40
       59
        
       	private plc: string;

     

       60
       60
       +
       	private slingshot: string;

     

       41
       61
        
       	private didResolver: CompositeDidDocumentResolver<SupportedDidMethod>;

     

       42
       62
        
       	private handleResolver: XrpcHandleResolver;

     

       43
       63
        
       	private fetchImpl: typeof fetch;

     
···

       50
       70
        
       			opts.identityService && opts.identityService.trim()

     

       51
       71
        
       				? opts.identityService

     

       52
       72
        
       				: DEFAULT_IDENTITY_SERVICE;

     

       73
       73
       +
       		const slingshotSource =

     

       74
       74
       +
       			opts.slingshotBaseUrl && opts.slingshotBaseUrl.trim()

     

       75
       75
       +
       				? opts.slingshotBaseUrl

     

       76
       76
       +
       				: DEFAULT_SLINGSHOT;

     

       53
       77
        
       		this.plc = normalizeBaseUrl(plcSource);

     

       54
       78
        
       		const identityBase = normalizeBaseUrl(identitySource);

     

       79
       79
       +
       		this.slingshot = normalizeBaseUrl(slingshotSource);

     

       55
       80
        
       		this.fetchImpl = bindFetch(opts.fetch);

     

       56
       81
        
       		const plcResolver = new PlcDidDocumentResolver({

     

       57
       82
        
       			apiUrl: this.plc,

     
···

       97
       122
        
       		return svc.serviceEndpoint.replace(/\/$/, "");

     

       98
       123
        
       	}

     

       99
       124
        
       

     

       125
       125
       +
       	getSlingshotUrl(): string {

     

       126
       126
       +
       		return this.slingshot;

     

       127
       127
       +
       	}

     

       128
       128
       +
       

     

       100
       129
        
       	async resolveHandle(handle: string): Promise<string> {

     

       101
       130
        
       		const normalized = handle.trim().toLowerCase();

     

       102
       131
        
       		if (!normalized) throw new Error("Handle cannot be empty");

     
···

       104
       133
        
       		try {

     

       105
       134
        
       			const url = new URL(

     

       106
       135
        
       				"/xrpc/com.atproto.identity.resolveHandle",

     

       107
       107
       -
       				SLINGSHOT_BASE_URL,

     

       136
       136
       +
       				this.slingshot,

     

       108
       137
        
       			);

     

       109
       138
        
       			url.searchParams.set("handle", normalized);

     

       110
       139
        
       			const response = await this.fetchImpl(url);

     
···

       161
       190
        
       	}

     

       162
       191
        
       	if (!service) throw new Error("service or did required");

     

       163
       192
        
       	const normalizedService = normalizeBaseUrl(service);

     

       164
       164
       -
       	const handler = createSlingshotAwareHandler(normalizedService, fetchImpl);

     

       193
       193
       +
       	const slingshotUrl = resolver.getSlingshotUrl();

     

       194
       194
       +
       	const handler = createSlingshotAwareHandler(normalizedService, slingshotUrl, fetchImpl);

     

       165
       195
        
       	const rpc = new Client({ handler });

     

       166
       196
        
       	return { rpc, service: normalizedService, resolver };

     

       167
       197
        
       }

     
···

       177
       207
        
       

     

       178
       208
        
       function createSlingshotAwareHandler(

     

       179
       209
        
       	service: string,

     

       210
       210
       +
       	slingshotBaseUrl: string,

     

       180
       211
        
       	fetchImpl: typeof fetch,

     

       181
       212
        
       ): FetchHandler {

     

       182
       213
        
       	const primary = simpleFetchHandler({ service, fetch: fetchImpl });

     

       183
       214
        
       	const slingshot = simpleFetchHandler({

     

       184
       184
       -
       		service: SLINGSHOT_BASE_URL,

     

       215
       215
       +
       		service: slingshotBaseUrl,

     

       185
       216
        
       		fetch: fetchImpl,

     

       186
       217
        
       	});

     

       187
       218
        
       	return async (pathname, init) => {

+8 -1

src/App.tsx

···

       524
       524
        
       

     

       525
       525
        
       export const App: React.FC = () => {

     

       526
       526
        
       	return (

     

       527
       527
       -
       		<AtProtoProvider>

     

       527
       527
       +
       		<AtProtoProvider

     

       528
       528
       +
           		plcDirectory="https://plc.wtf/"

     

       529
       529
       +
             		identityService="https://api.blacksky.community"

     

       530
       530
       +
               	slingshotBaseUrl="https://slingshot.microcosm.blue"

     

       531
       531
       +
               	blueskyAppviewService="https://api.blacksky.community"

     

       532
       532
       +
                	blueskyAppBaseUrl="https://reddwarf.app/"

     

       533
       533
       +
                 	tangledBaseUrl="https://tangled.org"

     

       534
       534
       +
       		>

     

       528
       535
        
       			<div

     

       529
       536
        
       				style={{

     

       530
       537
        
       					maxWidth: 860,