Add CSS for embedded Bluesky posts

[seanthegeek]

Type of change

• Improvement (refactoring and improving code)

Description

Add CSS for the bluesky-embed class used in HTML generated by the "Embed post" feature in Bluesky.

• Center the post
• Add 1rem the bottom margin to match the bottom margin for p in Chirpy

Additional context

The content of the embed HTML changes greatly for each individual Bluesky post, so Bluesky is not a good candidate for a Chirpy embed include. Here is an example of embed HTML for a Bluesky post, with the code deminified and beautified to make it easier to read for this example.

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:flfa7b6kgjqp3bbh223tmpjk/app.bsky.feed.post/3lbvtx4qei222" data-bluesky-cid="bafyreiakgrpjfo5yn7zytxeyaqcpplg6umt4siahmparnkat3l35yfjmhe">
  <p lang="en">Blue Sky team, you&#x27;re building something special and great here. Keep at it. Stick with it. And please don&#x27;t sell it to an evil billionaire who&#x27;s going to come around waving a lot of money to gobble it up. Sincerely, a Happy Blue Sky user.</p>&mdash; Wajahat Ali ( <a href="https://bsky.app/profile/did:plc:flfa7b6kgjqp3bbh223tmpjk?ref_src=embed">@wajali.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:flfa7b6kgjqp3bbh223tmpjk/post/3lbvtx4qei222?ref_src=embed">November 27, 2024 at 12:45 AM</a>
</blockquote>
<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

Which looks like this when rendered with this CSS included.

[cotes2020]

Thank you for your contribution! Unless you can design Bluesky as a general component similar to embedded videos, I will not consider merging this standalone CSS.

[seanthegeek]

After a little research, they do have an oEmbed endpoint which can generate the needed HTML. for example, the HTML of the above post can be found in the html key of the JSON object returned by querying https://embed.bsky.app/oembed?url=https://bsky.app/profile/wajali.bsky.social/post/3lbvtx4qei222

I'm just not sure how to get that html value in a Jekyll component.