generateフックでブログにツイートを埋め込む

ブログにツイートを自動で埋め込みできるようにした。markdown の中にツイートへの直リンクがある場合、以下のように表示される。

うしろのこ

@ushiro_noko

ぬーん（てすと

2:48 PM · Oct 11, 2011

https://twitter.com/ushiro_noko/status/123772055698153472

通常の埋め込みツイートと少し違うが後述する API を用いていることが理由。

実装

tweetic.io というツイートを静的な HTML に変換して返してくれる API をつかった。HTML 文字列の他にツイートURLなど以下の形式の付属情報も返してくれる。

{
  html: string
  meta: {
    url: string
    author_name: string
    author_url: string
    html: string
    width: number | null
    height: number | null
    type: string
    cache_age: string
    provider_name: string
    provider_url: string
    version: string
  }
}

yarn generate 時のフックに以下のような処理を書くことで、レンダリング前の HTML に API から返却された HTML を差し込む形で実装した。

ざっくり言えば yarn generate 時に html に含まれるツイートへの直リンクを正規表現で取得して、tweetic.io の API を Promise.all する。帰ってきた HTML を page.html に対して順番に差し込んでいくようにしている。

nuxt.config.ts

generate: {
  page: async (page: { route: any; path: any; html: string }) => {
    const matchers = /"https:\/\/twitter.com\/.+?\/status\/[0-9]+?"/gi
    const matchedUrls = page.html.match(matchers)
    if (!matchedUrls) return

    const targetUrls = matchedUrls.map((url) => url.replace(/"/g, ''))

    if (!targetUrls.length) return

    await Promise.all(
      targetUrls.map(async (url) => {
        return await axios.get<TweeticResponse>(
          'https://www.tweetic.io/api/tweet',
          {
            params: {
              layout: '',
              url,
              css: '',
              enable_twemoji: true,
              show_media: true,
              show_quoted_tweet: true,
              show_info: true,
            } as TweeticParams,
          }
        )
      })
    )
      .then((res) => {
        const dom = new JSDOM(page.html)
        const aTags = dom.window.document.querySelectorAll('a')
        const replaceList: { target: string; staticHtml: string }[] = []

        aTags.forEach((aTag) => {
          if (aTag.parentElement?.tagName === 'P') {
            res.forEach(({ data }) => {
              const {
                html: staticHtml,
                meta: { url },
              } = data

              if (aTag.parentElement && aTag.href === url) {
                replaceList.push({
                  target: aTag.parentElement.outerHTML,
                  staticHtml: `${staticHtml}<p><a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a></p>`,
                })
              }
            })
          }
        })

        page.html = replaceList.reduce((acc, { target, staticHtml }) => {
          return acc.replace(target, staticHtml)
        }, dom.serialize())
      })
      .catch((err) => {
        consola.error(err)
      })
  },
},

なぜこうしたかというと API を使ってみたかったから以外ない。普通のツイート埋め込みに比べてツイートに対するアクションができなかったり、スレッドを作れなかったり、動画が再生できなかったりして不便ではある。また generate フックでやっているので yarn dev 中には結果を見ることができない。