nekomimi.pet
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
+24
-4
+8
-1
lib/components/BlueskyPost.tsx
+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
+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
+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
: {}),