Improve Twitter integration

[rogermparent]

With the most recent example being #3864, our current Twitter-embedding solution of gatsby-remark-embedder+gatsby-plugin-twitter has some downsides:

• Builds break if a tweet is deleted or protected, and they persist unstyled in cache
• Loads a whole extra external JS embed bundle from Twitter
• Just looks kinda ugly

(it might just be me, but it really just dumps text like if you copy-pasted it while adding a couple links in. We're downloading a library for this?)

As far as an alternative implementation, I can think of two main routes off the top of my head:

Use a custom component with pasted content

Pros:

• simplest implementation code-wise
• doesn't break regardless of what happens to the tweet
• pretty easy to do overall
• Would need a custom component to add boilerplate that keeps us in line with Twitter's Tweet display guidelines

Cons:

• doesn't update if tweet changes, is updated, or deleted.
• Slightly more difficult on editors than other options

gatsby-source-twitter

Pros:

• can maintain the slightly easier workflow of pasting a link instead of pasting a tweet
• can be heavily customized
• (can be) fully static

Cons:

• a significant amount of dev work that could balloon depending on requirements

[shcheklein]

Just looks kinda ugly

Yep, It should not be looking like this (it was not like this for sure)- it's a bug somewhere. It should be like this:

Builds break if a tweet is embedded or protected

it's expected, right? in this case we should be removing tweet from the blogs post most likely. What do you mean by embedded btw?

Just paste the tweet in as a blockquote

we can't do this, Twitter has certain rules about embedding their tweets (put a logo, etc).

---

Can we first see if the current plugin embeds properly public tweets (not ugly, doesn't break, etc). For tweets that are protected - we need to remove this, or ask people for a quote separately. In this case I would just keep a quote and link to person's name.

[rogermparent]

What do you mean by embedded btw?

I meant "deleted" and just typed the completely wrong word, probably while thinking about embedded tweets, oops!

we can't do this, Twitter has certain rules about embedding their tweets (put a logo, etc).

Ah, I didn't know that! I should revert #3864 then, sorry I did so before seeing this

[rogermparent]

Can we first see if the current plugin embeds properly public tweets (not ugly, doesn't break, etc). For tweets that are protected - we need to remove this, or ask people for a quote separately. In this case I would just keep a quote and link to person's name.

Good call, the first public tweet I see is fine:

Must be the Twitter API kicking in that styles it, and the protected tweet is just what gatsby-remark-embedder pops out.

[shcheklein]

@rogermparent so, what are the action points here?

[rogermparent]

That's a good question, this has been in the back of my mind but I don't know of any decisive action yet.

I'm thinking one of the only alternate implementations we have available to us is a custom component, that way we can ensure we're in compliance with twitter even with removed tweets. The exact way the component is used (url, copy/paste content, allow for anonymizing?) will depend on what requirements we set for that component.

If we're not on board with a component, the only other solution I can think of is just keeping on with deleting tweets that become unavailable. Maybe we could try contributing to gatsby-remark-embedder, but I don't see there being a whole lot we can do there.

[shcheklein]

I would go with deleting them for now for simplicity. Let's not spend time on building our own stuff here.

[shcheklein]

Closing for now, we can come back to it later.