Originally inspired by astro-static-tweet. Until I got to this part:

Now all that's left is for you to get some Twitter credentials, since this plugin uses the Twitter API to fetch the Tweet.

So I explored caching tweets in some way for the use inside an Astro site.

• Explore Astro further using TypeScript and external SCSS while creating some POC tooling for caching tweets for use with the site.

• Twitter Publish generates HTML/script for including a tweet in a simple HTML page. The script actually rebuilds that area of the DOM from the ground up after accessing a syndication endpoint for fresh data. This can be slow and jarring.
• $ npm run fetchById TweetID uses that syndication endpoint to grab the data and store it under src/data/tweets/TweetID.YYYYMMDD.json (YYYYMMDD being the capture date; fetchById.ts).
  • Caveat: This is potentially fragile as Twitter controls both the the endpoint and the script which uses it. So the endpoint and it's data format can change without any advance notice. This risk is mitigated by the fact that old tweets are cached until the situation can be remedied in some way.
• $ npm run harvest then aggregates all the tweet data into src/data/tweet-info.json normalizing it to the TweetInfo format (harvest.ts).
• tweetInfo(id: string): TweetInfo | undefined can then be used to access the data for an individual tweet.
• QuoteTweet.astro is purely presentational to render a tweet quote from the supplied props.
  • The component's SCSS can be found here. Once it's clear what stylng is structure and skin it makes sense to move the structure styling back into the Astro component while keeping the skin styling external.
  • Keeping the SCSS entirely external was a simple matter of only including the top SCSS file in the layout.
  • The organizaton of the SCSS files is largely informed by ITCSS (video; slides).
• QuoteTweetFallback.astro is a minimal fallback component which only renders a link to the tweet of the passed id.
• InfoTweet.astro grabs the tweet data from tweetInfo(id) and renders either QuoteTweet or QuoteTweetFallback.
• $ npm run lint:types type checks the components supporting functionality as Vite (esbuild) won't.
• $ npm run lint:es lints the TypeScript code.
• $ npm run scripts:types type checks the data handling scripts fetchById.ts and harvest.ts.
• $ npm run scripts:build builds the .mjs data handling scripts from the TypeScript sources.
  • esb-script.mjs uses esbuild (already present on account of Vite) to transpile the data handling scripts (it's much faster that tsc). Tools like esbuild-runner and typescript-run are available but adding another dependency seemed unnecessary.

Clone the repo:

$ cd astro-quote-tweet-a
$ npm i
$ npm run dev