Astro でTwitterの埋め込みを行うシンプルなコンポーネントの例です。

Hugo からAstroへの移行作業において、Hugoの Shortcodes と同様にショートハンドでツイートを埋め込むコードが必要になったため作成しました。

環境

- astro: ^3.4.0

コード

Astroコンポーネント

---
// src/components/Twitter.astro

interface Props {
  url: string;
}
const { url } = Astro.props;

const base = "https://publish.twitter.com/oembed";
const baseUrl = new URL(base);
baseUrl.searchParams.set("url", url);
baseUrl.searchParams.set("omit_script", "true");

const tweet = await fetch(baseUrl.toString())
  .then<{ html: string }>((res) => res.json())
  .catch((err) => null);
---

{
  tweet && (
    <>
      <div set:html={tweet.html} />
      <script
        async
        src="https://platform.twitter.com/widgets.js"
        charset="utf-8"
        crossorigin="anonymous"
      />
    </>
  )
}

使い方

---
// src/pages/hoge.astro
import Twitter from "../components/Twitter.astro";
---

<Twitter url="https://twitter.com/J_League/status/1710914053265334445" />

解説

TwitterのoEmbed API を利用し、レスポンスから得たhtml要素をAstroの set:html で<div>要素に挿入しています。不必要なラッパーの追加を避けるために<Fragment set:html={tweet.html} />という書き方も可能ですが、この方法だとクラスなどでスタイルを与えることができません。

Fetch APIのエラー処理では複雑なことを行わずnullだけを返すことで、何も描画されないようにします。お好みでエラーメッセージの追加などを行ってください。

またこの例ではwidgets.jsを読み込みTwitterのデフォルトのスタイルを適用していますが、自作のスタイルを適用したりパフォーマンスを向上させたい場合は不必要なので削除してください。

以上、Twitter埋め込みのシンプルなAstroコンポーネントの例でした。

ขอวอน 2 / SOMKIAT (2016)