Blueskyの埋め込みコード対応

2024/05/10

はじめに

Blueskyの公式ブログからポストをWebページに埋め込む方法が公開されました。
How to embed a Bluesky post on your website or blog

Hugoのブログにも投稿できるようにしていきます。

課題と対策

Webページに投稿を埋め込むためのコードは以下のようなものになります。
TwitterやYouTubeの埋込みコードと比較するとだいぶ長いですね…

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:at2c4dlmd7mmt4hjgdm5buxe/app.bsky.feed.post/3ks54rjnhak2q" data-bluesky-cid="bafyreickomsuhsy6e3wmmguav57eqfeupqncwx4efd5hnsraldani777qe">
  <p lang="ja">祝・金曜</p>&mdash; ふぉれすけ (<a href="https://bsky.app/profile/did:plc:at2c4dlmd7mmt4hjgdm5buxe?ref_src=embed">@foresuke.com</a>) 
  <a href="https://bsky.app/profile/did:plc:at2c4dlmd7mmt4hjgdm5buxe/post/3ks54rjnhak2q?ref_src=embed">May 10, 2024 at 21:29</a>
</blockquote>
<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

このコードをそのままHugoの記事に貼り付けても投稿は表示されません。なのでHugo用のショートコードを作成しました。
しかしショートコードのパラメータが多いため、手作業で埋込みコードからショートコード呼出し用コードを作るのは大変です。