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

Changed files
+37 -37
lib
src
+36 -29
lib/renderers/BlueskyProfileRenderer.tsx
···
{record.description}
</p>
)}
-
{record.createdAt && (
-
<div style={{ ...base.meta, color: `var(--atproto-color-text-secondary)` }}>
-
Joined {new Date(record.createdAt).toLocaleDateString()}
</div>
)}
-
<div style={base.links}>
-
{websiteHref && websiteLabel && (
<a
-
href={websiteHref}
target="_blank"
rel="noopener noreferrer"
style={{ ...base.link, color: `var(--atproto-color-link)` }}
>
-
{websiteLabel}
</a>
-
)}
-
<a
-
href={profileUrl}
-
target="_blank"
-
rel="noopener noreferrer"
-
style={{ ...base.link, color: `var(--atproto-color-link)` }}
-
>
-
View on Bluesky
-
</a>
-
</div>
-
<div style={base.iconCorner} aria-hidden>
-
<BlueskyIcon size={18} />
</div>
</div>
);
···
lineHeight: 1.4,
},
meta: {
-
marginTop: 12,
fontSize: 12,
},
pronouns: {
···
padding: "2px 8px",
marginTop: 6,
},
-
links: {
-
display: "flex",
-
flexDirection: "column",
-
gap: 8,
-
marginTop: 12,
-
},
link: {
display: "inline-flex",
alignItems: "center",
···
fontWeight: 600,
textDecoration: "none",
},
iconCorner: {
-
position: "absolute",
-
right: 12,
-
bottom: 12,
},
};
···
{record.description}
</p>
)}
+
{websiteHref && websiteLabel && (
+
<div style={{ marginTop: 12 }}>
+
<a
+
href={websiteHref}
+
target="_blank"
+
rel="noopener noreferrer"
+
style={{ ...base.link, color: `var(--atproto-color-link)` }}
+
>
+
{websiteLabel}
+
</a>
</div>
)}
+
<div style={base.bottomRow}>
+
<div style={base.bottomLeft}>
+
{record.createdAt && (
+
<div style={{ ...base.meta, color: `var(--atproto-color-text-secondary)` }}>
+
Joined {new Date(record.createdAt).toLocaleDateString()}
+
</div>
+
)}
<a
+
href={profileUrl}
target="_blank"
rel="noopener noreferrer"
style={{ ...base.link, color: `var(--atproto-color-link)` }}
>
+
View on Bluesky
</a>
+
</div>
+
<div aria-hidden>
+
<BlueskyIcon size={18} />
+
</div>
</div>
</div>
);
···
lineHeight: 1.4,
},
meta: {
+
marginTop: 0,
fontSize: 12,
},
pronouns: {
···
padding: "2px 8px",
marginTop: 6,
},
link: {
display: "inline-flex",
alignItems: "center",
···
fontWeight: 600,
textDecoration: "none",
},
+
bottomRow: {
+
display: "flex",
+
alignItems: "flex-end",
+
justifyContent: "space-between",
+
marginTop: 12,
+
},
+
bottomLeft: {
+
display: "flex",
+
flexDirection: "column",
+
gap: 8,
+
},
iconCorner: {
+
// Removed absolute positioning, now in flex layout
},
};
+1 -8
src/App.tsx
···
export const App: React.FC = () => {
return (
-
<AtProtoProvider
-
plcDirectory="https://plc.wtf/"
-
identityService="https://api.blacksky.community"
-
slingshotBaseUrl="https://slingshot.microcosm.blue"
-
blueskyAppviewService="https://api.blacksky.community"
-
blueskyAppBaseUrl="https://reddwarf.app/"
-
tangledBaseUrl="https://tangled.org"
-
>
<div
style={{
maxWidth: 860,
···
export const App: React.FC = () => {
return (
+
<AtProtoProvider>
<div
style={{
maxWidth: 860,