Better twitter embed

How I get tweets onto https://umaar.com/dev-tips/feedback

Create a .env file like this:

Note: To fill in TWITTER_BEARER_TOKEN, run the next step

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_BEARER_TOKEN=

Install deps:

npm i

Get your bearer token:

make get-bearer-token

Add your IDs to ids.json and run

mkdir images
make start

Sprite Generation

Generate sprites of all images in ./images. Save the output image to /assets/images/twitter-profile-pics.png.

For the class prefixes, use: dt-fb-sprite & dt-fb-pic-

The sprite generator is here: https://instantsprite.com/ / Forked at https://github.com/umaar/InstantSprite

Copy markup

Copy the markup from tmp.txt and paste it into umaar/app/dev-tips/main/tweets

Copy CSS

Take the CSS from instantsprite and paste it into dev-tips.scss. Find '*.png' and replace it with /assets/images/twitter-profile-pics.png.

Get all twitter IDs from page

[...document.querySelectorAll('blockquote')].map(b => {
  return [...b.querySelectorAll('a')].reverse()[0].href.split('status/')[1];
})

Twitter API

https://api.twitter.com/1.1/statuses/lookup.json?id=20,432656548536401920

Run tests:

make test