A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.

fix pronouns if fetching from appview, fix borders

Changed files
+24 -4
lib
+8 -1
lib/components/BlueskyPost.tsx
··· 115 115 * Depth of this post in a thread (0 = root, 1 = first reply, etc.). 116 116 */ 117 117 threadDepth?: number; 118 + /** 119 + * Whether to show border even when in thread context. 120 + */ 121 + showThreadBorder?: boolean; 118 122 }; 119 123 120 124 export const BLUESKY_POST_COLLECTION = "app.bsky.feed.post"; ··· 126 130 width: "100%", 127 131 background: "var(--atproto-color-bg)", 128 132 position: "relative", 133 + borderRadius: "12px", 134 + overflow: "hidden" 129 135 }; 130 136 131 137 const parentPostStyle: React.CSSProperties = { ··· 249 255 iconPlacement={iconPlacement} 250 256 showIcon={showIcon} 251 257 atUri={atUri} 252 - isInThread={true} // Always true for posts rendered in this component 258 + isInThread 253 259 threadDepth={showParent ? 1 : 0} 260 + showThreadBorder={!showParent && !!props.record?.reply?.parent} 254 261 /> 255 262 ); 256 263 };
+11
lib/hooks/useBlueskyAppview.ts
··· 28 28 avatar?: string; 29 29 banner?: string; 30 30 createdAt?: string; 31 + pronouns?: string; 32 + website?: string; 31 33 [key: string]: unknown; 32 34 } 33 35 ··· 420 422 description: profile.description, 421 423 createdAt: profile.createdAt, 422 424 }; 425 + 426 + // Add pronouns and website if they exist 427 + if (profile.pronouns) { 428 + record.pronouns = profile.pronouns; 429 + } 430 + 431 + if (profile.website) { 432 + record.website = profile.website; 433 + } 423 434 424 435 if (profile.avatar && avatarCid) { 425 436 const avatarBlob: BlobWithCdn = {
+5 -3
lib/renderers/BlueskyPostRenderer.tsx
··· 26 26 isInThread?: boolean; 27 27 threadDepth?: number; 28 28 isQuotePost?: boolean; 29 + showThreadBorder?: boolean; 29 30 } 30 31 31 32 export const BlueskyPostRenderer: React.FC<BlueskyPostRendererProps> = ({ ··· 42 43 atUri, 43 44 isInThread = false, 44 45 threadDepth = 0, 45 - isQuotePost = false 46 + isQuotePost = false, 47 + showThreadBorder = false 46 48 }) => { 47 49 void threadDepth; 48 50 ··· 83 85 84 86 const cardStyle: React.CSSProperties = { 85 87 ...baseStyles.card, 86 - border: (isInThread && !isQuotePost) ? "none" : `1px solid var(--atproto-color-border)`, 88 + border: (isInThread && !isQuotePost && !showThreadBorder) ? "none" : `1px solid var(--atproto-color-border)`, 87 89 background: `var(--atproto-color-bg)`, 88 90 color: `var(--atproto-color-text)`, 89 - borderRadius: (isInThread && !isQuotePost) ? "0" : "12px", 91 + borderRadius: (isInThread && !isQuotePost && !showThreadBorder) ? "0" : "12px", 90 92 ...(iconPlacement === "cardBottomRight" && showIcon && !isInThread 91 93 ? { paddingBottom: cardPadding + 16 } 92 94 : {}),