custom element for embedding Bluesky posts and feeds
mary-ext.github.io/bluesky-embed
typescript
npm
bluesky
atcute
feat: dim color palette
+33
-25
+10
-10
lib/core.tsx
+10
-10
lib/core.tsx
···
108
108
);
109
109
}
110
110
111
-
const reply_icon = (
111
+
const reply_to_icon = (
112
112
<svg viewBox="0 0 24 24" class="icon">
113
113
<path fill="currentColor" d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11" />
114
114
</svg>
···
146
146
147
147
{i === 0 && record.reply ? (
148
148
<p class="main-post__context">
149
-
{reply_icon}
149
+
{reply_to_icon}
150
150
{parent ? (
151
151
<span>
152
152
Reply to{' '}
···
192
192
193
193
<span class="main-post__stats">
194
194
<span class="main-post__stat" title={`${post.replyCount || 0} replies`}>
195
-
{reply_icon}
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>
196
201
<span>{format_compact(post.replyCount || 0)}</span>
197
202
</span>
198
203
···
200
205
<svg viewBox="0 0 24 24" class="icon">
201
206
<path
202
207
fill="currentColor"
203
-
d="m11.645 20.91l-.007-.003l-.022-.012a15.247 15.247 0 0 1-.383-.218a25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25C2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052A5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25c0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17a15.247 15.247 0 0 1-.383.219l-.022.012l-.007.004l-.003.001a.752.752 0 0 1-.704 0z"
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"
204
209
></path>
205
210
</svg>
206
211
<span>{format_compact(post.likeCount || 0)}</span>
···
258
263
259
264
{i === 0 && record.reply ? (
260
265
<p class="reply-post__context">
261
-
<svg viewBox="0 0 24 24" class="icon">
262
-
<path
263
-
fill="currentColor"
264
-
d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11"
265
-
/>
266
-
</svg>
266
+
{reply_to_icon}
267
267
{parent ? (
268
268
<span>
269
269
Reply to{' '}
+23
-15
lib/style.css
+23
-15
lib/style.css
···
8
8
--text-secondary: #455668;
9
9
--text-link: #1083fe;
10
10
--background-primary: #ffffff;
11
-
--background-hover: #f0f2f5;
12
11
--background-secondary: #455668;
12
+
--divider-hover: #c0ccd6;
13
13
--divider: #c2ccd6;
14
14
}
15
15
:host([theme='dark']) {
16
16
--text-primary: #ffffff;
17
-
--text-secondary: #a3b2c2;
17
+
--text-secondary: #9aaabc;
18
18
--text-link: #1083fe;
19
-
--background-primary: #080a0c;
20
-
--background-hover: #14191f;
21
-
--background-secondary: #a3b2c2;
22
-
--divider: #252e37;
19
+
--background-primary: #161e27;
20
+
--background-secondary: #212d3b;
21
+
--divider-hover: #42566c;
22
+
--divider: #324458;
23
23
}
24
24
25
25
*,
···
70
70
cursor: pointer;
71
71
color: inherit;
72
72
text-decoration: none;
73
-
74
-
&:hover {
75
-
background: var(--background-hover);
76
-
}
77
73
}
78
74
79
75
.not-available {
···
144
140
.main-post__context {
145
141
display: flex;
146
142
align-items: center;
147
-
gap: 4px;
143
+
gap: 6px;
148
144
margin: 0 0 4px 0;
149
145
color: var(--text-secondary);
150
146
···
365
361
border: 1px solid var(--divider);
366
362
border-radius: 6px;
367
363
padding: 12px;
364
+
365
+
&:hover {
366
+
border-color: var(--divider-hover);
367
+
}
368
368
}
369
369
370
370
.embed-feed__avatar-wrapper {
···
464
464
border: 1px solid var(--divider);
465
465
border-radius: 6px;
466
466
overflow: hidden;
467
+
468
+
&:hover {
469
+
border-color: var(--divider-hover);
470
+
}
467
471
}
468
472
469
473
.embed-link__thumb {
···
473
477
aspect-ratio: 1 / 1;
474
478
width: 86px;
475
479
object-fit: cover;
476
-
477
-
@media (min-width: 640px) {
478
-
width: 120px;
479
-
}
480
480
}
481
481
482
482
.embed-link__main {
···
533
533
border: 1px solid var(--divider);
534
534
border-radius: 6px;
535
535
padding: 12px;
536
+
537
+
&:hover {
538
+
border-color: var(--divider-hover);
539
+
}
536
540
}
537
541
538
542
.embed-list__avatar-wrapper {
···
574
578
border: 1px solid var(--divider);
575
579
border-radius: 6px;
576
580
overflow: hidden;
581
+
582
+
&:hover {
583
+
border-color: var(--divider-hover);
584
+
}
577
585
}
578
586
579
587
.embed-post__header {