Embed tweets in your Astro sites with zero JavaScript on the client side. This is a (slightly opinionated) port of the fantastic react-tweet library. Huge thanks to Vercel and all the contributors of react-tweet.
HTML for the tweets are generated at the build time and there is no JavaScript bundled. This uses Twitter's
npm i astro-tweet
In your Astro component:
---
import Tweet from "astro-tweet";
---
<Tweet id="1713443573168034170" />
Where id
is the tweet ID. For example, in
https://twitter.com/tsriram/status/1713443573168034170, 1713443573168034170
is
the ID.
This also works with MDX files in Astro.
This library ports almost all of the features of react-tweet except the below. These are mainly omitted since they'd require adding client side JavaScript but the features are probably not "must haves" IMO. This may change in the future.
-
Copy link
option (rendered next to likes & reply) is not available. - Video player doesn't have custom play button rendered in the center of the video element (like it does in twitter apps). Instead you get a native HTML video element.
- Clone the repo
- Run
pnpm install
from the project directory - Run
pnpm dev
from thedemo
directory