custom element for embedding Bluesky posts and feeds
mary-ext.github.io/bluesky-embed
typescript
npm
bluesky
atcute
feat: post footer adjustments
+51
-51
+25
-35
lib/core.tsx
+25
-35
lib/core.tsx
···
181
181
</div>
182
182
) : null}
183
183
184
-
<div class="main-post__footer">
185
-
<a href={post_url} target="_blank" class="main-post__date">
186
-
<time datetime={record.createdAt}>{format_abs_date_time(record.createdAt)}</time>
187
-
</a>
184
+
<time datetime={record.createdAt} class="main-post__date">
185
+
{format_abs_date_time(record.createdAt)}
186
+
</time>
188
187
189
-
<span aria-hidden="true" class="dot">
190
-
·
188
+
<div class="main-post__stats">
189
+
<span class="main-post__stat" title={`${post.likeCount || 0} likes`}>
190
+
<svg viewBox="0 0 24 24" class="icon">
191
+
<path
192
+
fill="currentColor"
193
+
d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5C22 5.42 19.58 3 16.5 3m-4.4 15.55l-.1.1l-.1-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05"
194
+
></path>
195
+
</svg>
196
+
<span>{format_compact(post.likeCount || 0)}</span>
191
197
</span>
192
198
193
-
<span class="main-post__stats">
194
-
<span class="main-post__stat" title={`${post.replyCount || 0} replies`}>
195
-
<svg viewBox="0 0 24 24" class="icon">
196
-
<path
197
-
fill="currentColor"
198
-
d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H6l-2 2V4h16z"
199
-
></path>
200
-
</svg>
201
-
<span>{format_compact(post.replyCount || 0)}</span>
202
-
</span>
199
+
<span class="main-post__stat" title={`${post.repostCount || 0} reposts`}>
200
+
<svg viewBox="0 0 24 24" class="icon">
201
+
<path
202
+
fill="currentColor"
203
+
d="M7 7h10v3l4-4l-4-4v3H5v6h2zm10 10H7v-3l-4 4l4 4v-3h12v-6h-2z"
204
+
></path>
205
+
</svg>
206
+
<span>{format_compact(post.repostCount || 0)}</span>
207
+
</span>
203
208
204
-
<span class="main-post__stat" title={`${post.likeCount || 0} likes`}>
205
-
<svg viewBox="0 0 24 24" class="icon">
206
-
<path
207
-
fill="currentColor"
208
-
d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5C22 5.42 19.58 3 16.5 3m-4.4 15.55l-.1.1l-.1-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05"
209
-
></path>
210
-
</svg>
211
-
<span>{format_compact(post.likeCount || 0)}</span>
212
-
</span>
209
+
<div class="gap"></div>
213
210
214
-
<span class="main-post__stat" title={`${post.repostCount || 0} reposts`}>
215
-
<svg viewBox="0 0 24 24" class="icon">
216
-
<path
217
-
fill="currentColor"
218
-
d="M7 7h10v3l4-4l-4-4v3H5v6h2zm10 10H7v-3l-4 4l4 4v-3h12v-6h-2z"
219
-
></path>
220
-
</svg>
221
-
<span>{format_compact(post.repostCount || 0)}</span>
222
-
</span>
223
-
</span>
211
+
<a href={post_url} target="_blank" class="permalink">
212
+
<span>Read {format_compact(post.replyCount || 0)} replies on Bluesky</span>
213
+
</a>
224
214
</div>
225
215
</div>
226
216
);
+26
-16
lib/style.css
+26
-16
lib/style.css
···
195
195
white-space: nowrap;
196
196
}
197
197
198
-
.main-post__footer {
198
+
.main-post__date {
199
199
display: flex;
200
200
flex-wrap: wrap;
201
201
align-items: center;
202
202
gap: 8px;
203
-
margin: 12px 0 0 0;
203
+
margin: 12px 0 0;
204
+
border-bottom: 1px solid var(--divider);
205
+
padding: 0 0 12px 0;
206
+
color: var(--text-secondary);
207
+
}
208
+
.main-post__stats {
209
+
display: flex;
210
+
flex-wrap: wrap;
211
+
align-items: center;
212
+
gap: 8px 16px;
213
+
margin: 0 0 -16px 0;
214
+
padding: 12px 0;
204
215
color: var(--text-secondary);
205
216
206
-
.dot {
207
-
margin: 0;
217
+
.gap {
218
+
flex: 1 1 auto;
208
219
}
209
-
}
210
220
211
-
.main-post__date {
212
-
color: inherit;
213
-
text-decoration: none;
221
+
.permalink {
222
+
display: flex;
223
+
align-items: center;
224
+
gap: 4px;
225
+
color: var(--text-link);
226
+
font-weight: 700;
227
+
text-decoration: none;
214
228
215
-
&:hover {
216
-
text-decoration: underline;
229
+
&:hover {
230
+
text-decoration: underline;
231
+
}
217
232
}
218
233
}
219
-
.main-post__stats {
220
-
display: flex;
221
-
align-items: center;
222
-
gap: 8px;
223
-
}
224
234
.main-post__stat {
225
235
display: flex;
226
236
align-items: center;
227
-
gap: 4px;
237
+
gap: 8px;
228
238
}
229
239
230
240
/** reply-post */