Personal Site
Render the embeds
+105
+105
src/components/home/feeds/BskyPost.astro
+105
src/components/home/feeds/BskyPost.astro
···
229
229
style="clear:both;"
230
230
set:text={post.text.replace(/^\s*/g, "").replace(/\s*$/, "")}
231
231
/>
232
+
233
+
{
234
+
embed
235
+
? await (async () => {
236
+
switch (embed?.$type) {
237
+
case "app.bsky.embed.images": {
238
+
return embed.images.map((image) => (
239
+
<img src={cidSrc(image.cid, author.did)} alt={image.alt} />
240
+
));
241
+
}
242
+
243
+
case "app.bsky.embed.video": {
244
+
return (
245
+
<video
246
+
controls
247
+
src={cidSrc(embed.cid, author.did)}
248
+
crossorigin="anonymous"
249
+
>
250
+
{embed.subtitles &&
251
+
embed.subtitles.map((track, i) => {
252
+
console.log(track, cidSrc(track.cid, author.did));
253
+
return (
254
+
<track
255
+
default={i === 0}
256
+
kind="captions"
257
+
srclang={track.lang}
258
+
src={cidSrc(track.cid, author.did)}
259
+
/>
260
+
);
261
+
})}
262
+
</video>
263
+
);
264
+
}
265
+
266
+
case "app.bsky.embed.external": {
267
+
return (
268
+
<a href={embed.url}>
269
+
<pre
270
+
set:html={`${embed.title}${embed.thumb ? `\n<img src="${cidSrc(embed.thumb, author.did)}" />` : ""}`}
271
+
/>
272
+
</a>
273
+
);
274
+
}
275
+
276
+
case "app.bsky.embed.record": {
277
+
return (
278
+
<ul>
279
+
<li>
280
+
<Astro.self post={embed.record} author={embed.author} />
281
+
</li>
282
+
</ul>
283
+
);
284
+
}
285
+
286
+
case "app.bsky.embed.recordWithMedia": {
287
+
return (
288
+
<>
289
+
{embed.media.$type === "app.bsky.embed.images" ? (
290
+
embed.media.images.map((image) => (
291
+
<img
292
+
src={cidSrc(image.cid, author.did)}
293
+
alt={image.alt}
294
+
/>
295
+
))
296
+
) : embed.media.$type === "app.bsky.embed.video" ? (
297
+
<video
298
+
controls
299
+
src={cidSrc(embed.media.cid, author.did)}
300
+
crossorigin="anonymous"
301
+
>
302
+
{embed.media.subtitles &&
303
+
embed.media.subtitles.map((track, i) => {
304
+
console.log(track, cidSrc(track.cid, author.did));
305
+
return (
306
+
<track
307
+
default={i === 0}
308
+
kind="captions"
309
+
srclang={track.lang}
310
+
src={cidSrc(track.cid, author.did)}
311
+
/>
312
+
);
313
+
})}
314
+
</video>
315
+
) : (
316
+
<a href={embed.media.url}>
317
+
<pre
318
+
set:html={`${embed.media.title}${embed.media.thumb ? `\n<img src="${cidSrc(embed.media.thumb, author.did)}" />` : ""}`}
319
+
/>
320
+
</a>
321
+
)}
322
+
<ul>
323
+
<li>
324
+
<Astro.self
325
+
post={embed.record.record}
326
+
author={embed.record.author}
327
+
/>
328
+
</li>
329
+
</ul>
330
+
</>
331
+
);
332
+
}
333
+
}
334
+
})()
335
+
: null
336
+
}
232
337
</div>
233
338
234
339
<style>