Introduce twitter_timeline liquid tag (#7605)

[rafaltrojanowski]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

This PR introduces a new twitter_timeline liquid tag. See #7605

Related Tickets & Documents

Closes #7605

QA Instructions, Screenshots, Recordings

1. Go to /new
2. Create article with following content:
   {% twitter_timeline https://twitter.com/FreyaHolmer/timelines/1215413954505297922 %}
3. Click 'Preview'
4. Click 'Save'.

Added tests?

• yes
• no, because they aren't needed
• no, because I need help

Added to documentation?

• docs.forem.com
• readme
• no documentation needed

[rhymes]

Hi @rafaltrojanowski thanks for kickstarting this.

A few notes:

1. I can't see it in Firefox 82, mostly because the browser's builtin content blocking blocks it:

The resource at “https://platform.twitter.com/widgets.js” was blocked because content blocking is enabled

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Privacy/Tracking_Protection

I tried to disable the "Enhance tracking protection" feature for the website, and it worked, but we have to be aware that Firefox users may never see the timeline and not know they aren't seeing it. Is there an option B to render the timeline?

1. The timeline widget is too long, this is as long as the timeline on Twitter, we might need to add scrollbars otherwise the vertical size of the article can go on forever. An example:

cc @ludwiczakpawel

[ludwiczakpawel]

Hey @rafaltrojanowski (cześć! 🇵🇱)

It does seem like we need to limit the height of this liquid tag to avoid situations thatx @rhymes mentioned. I think the most sensible way to do it is to go with either overflow-y: auto OR some fadeout effect similar to what we have in github liquid tag or long comments in feed:

Github liquid tag fadeout (source):

Comments fadeout:

It would be also good to wrap this entire block with .crayons-card container so it looks more... umm.. wrapped..? :)

[rafaltrojanowski]

Cześć @ludwiczakpawel

I've added styling updates based on Github liquid tag, please have a look:

[ludwiczakpawel]

Cheers, looking good from my perspective!

[nickytonline]

Tested this out locally and it works great! Thanks so much for the pull request @rafaltrojanowski! 🚀

[rafaltrojanowski]

Hey @rhymes

Unfortunately, I didn't have a chance to look into the problem on Firefox yet, maybe it could be tacked in a separate PR?
Currently, I don't have an alternative solution in mind.