SvelteKitで twitter公式 widget を使う

かつて Ractive.js に夢中だった私は今、生みの親が同じであるところの Svelte と SvelteKit に夢中です。個人開発でちょっと凝ったデザインのランディングページ的なものを作るのには最適です。

twitter公式のウィジェットをただ埋め込みたかった

SvelteKitの通常の +page.svelte ファイルのコンポーネントの中に https://publish.twitter.com/ で生成される twitterウィジェットを埋め込みたかったのですが色々やってもうまくいかず、探していたところ

こんな最適な記事が見つかりました。あまりにシンプルなのでこの作者自身「これだけでいいの？」的に驚きが隠せない様子です。
この記法であれはtwitterウィジェットは非常に簡単に埋め込むことができたので久々の投稿としてここに共有します。

SvekteKitでの書き方

https://publish.twitter.com/ で生成されたタグが

<a class="twitter-timeline" href="https://twitter.com/account_name">Tweets by account_name</a><script async src="https://platform.twitter.com/widgets.js"></script>

とします。

.svelte

<script>
 import { browser } from '$app/env';
 ...
</script>

{#if browser}
  <script async src="https://platform.twitter.com/widgets.js"></script>
{/if}

<main>
　　{@html `<a class="twitter-timeline" href="https://twitter.com/account_name">Tweets by account_name</a>`}
</main>

これだけです。
参考記事にもあるように <svelte:head>だとうまく動かないです。
また、検索して出てくる

はSvelteKitでは使えませんでした。