A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
version bump, update blueskyprofilerenderer to keep view on bluesky always on bottom in line with icon rather than relying on container div
+37
-37
+36
-29
lib/renderers/BlueskyProfileRenderer.tsx
+36
-29
lib/renderers/BlueskyProfileRenderer.tsx
···
71
71
{record.description}
72
72
</p>
73
73
)}
74
-
{record.createdAt && (
75
-
<div style={{ ...base.meta, color: `var(--atproto-color-text-secondary)` }}>
76
-
Joined {new Date(record.createdAt).toLocaleDateString()}
74
+
{websiteHref && websiteLabel && (
75
+
<div style={{ marginTop: 12 }}>
76
+
<a
77
+
href={websiteHref}
78
+
target="_blank"
79
+
rel="noopener noreferrer"
80
+
style={{ ...base.link, color: `var(--atproto-color-link)` }}
81
+
>
82
+
{websiteLabel}
83
+
</a>
77
84
</div>
78
85
)}
79
-
<div style={base.links}>
80
-
{websiteHref && websiteLabel && (
86
+
<div style={base.bottomRow}>
87
+
<div style={base.bottomLeft}>
88
+
{record.createdAt && (
89
+
<div style={{ ...base.meta, color: `var(--atproto-color-text-secondary)` }}>
90
+
Joined {new Date(record.createdAt).toLocaleDateString()}
91
+
</div>
92
+
)}
81
93
<a
82
-
href={websiteHref}
94
+
href={profileUrl}
83
95
target="_blank"
84
96
rel="noopener noreferrer"
85
97
style={{ ...base.link, color: `var(--atproto-color-link)` }}
86
98
>
87
-
{websiteLabel}
99
+
View on Bluesky
88
100
</a>
89
-
)}
90
-
<a
91
-
href={profileUrl}
92
-
target="_blank"
93
-
rel="noopener noreferrer"
94
-
style={{ ...base.link, color: `var(--atproto-color-link)` }}
95
-
>
96
-
View on Bluesky
97
-
</a>
98
-
</div>
99
-
<div style={base.iconCorner} aria-hidden>
100
-
<BlueskyIcon size={18} />
101
+
</div>
102
+
<div aria-hidden>
103
+
<BlueskyIcon size={18} />
104
+
</div>
101
105
</div>
102
106
</div>
103
107
);
···
142
146
lineHeight: 1.4,
143
147
},
144
148
meta: {
145
-
marginTop: 12,
149
+
marginTop: 0,
146
150
fontSize: 12,
147
151
},
148
152
pronouns: {
···
155
159
padding: "2px 8px",
156
160
marginTop: 6,
157
161
},
158
-
links: {
159
-
display: "flex",
160
-
flexDirection: "column",
161
-
gap: 8,
162
-
marginTop: 12,
163
-
},
164
162
link: {
165
163
display: "inline-flex",
166
164
alignItems: "center",
···
169
167
fontWeight: 600,
170
168
textDecoration: "none",
171
169
},
170
+
bottomRow: {
171
+
display: "flex",
172
+
alignItems: "flex-end",
173
+
justifyContent: "space-between",
174
+
marginTop: 12,
175
+
},
176
+
bottomLeft: {
177
+
display: "flex",
178
+
flexDirection: "column",
179
+
gap: 8,
180
+
},
172
181
iconCorner: {
173
-
position: "absolute",
174
-
right: 12,
175
-
bottom: 12,
182
+
// Removed absolute positioning, now in flex layout
176
183
},
177
184
};
178
185
+1
-8
src/App.tsx
+1
-8
src/App.tsx
···
524
524
525
525
export const App: React.FC = () => {
526
526
return (
527
-
<AtProtoProvider
528
-
plcDirectory="https://plc.wtf/"
529
-
identityService="https://api.blacksky.community"
530
-
slingshotBaseUrl="https://slingshot.microcosm.blue"
531
-
blueskyAppviewService="https://api.blacksky.community"
532
-
blueskyAppBaseUrl="https://reddwarf.app/"
533
-
tangledBaseUrl="https://tangled.org"
534
-
>
527
+
<AtProtoProvider>
535
528
<div
536
529
style={{
537
530
maxWidth: 860,