Giters

life-itself / web3

Making sense of web3 & crypto. Introduction to key concepts and ideas. Rigorous, constructive analysis of key claims pro and con. A look at the deeper hopes and aspirations.

Home Page:https://web3.lifeitself.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tweet link shows a preview/embed

rufuspollock opened this issue · comments

commented

Like we do with youtube ... #88

Acceptance

  • Tweet component ... DONE components/TwitterEmbed.js
  • Pasting a twitter link in its own paragraph at line start results in embed e.g. pasting the following results in an embed/preview of the tweet DONE see /test page or screenshot below
Blah, blah ...

https://twitter.com/rufuspollock/status/1524012242777395201

Tasks:

  • create a tweet embed component
    • with placeholder for loading and deleted/not found tweets
  • add custom styles for proper tweet embed previews (dark mode)
  • use component in links for parsing in markdown.

Screenshot

deploy-preview-161--boring-fermat-22cb64 netlify 1

Notes:

  • Twitter embed api is fairly slow and so takes time to load. A placeholder has been added for better ux.
  • On further research during development, the embeds (youtube, twitter, etc) load iframes with large htmls which affect the page load and SEO.
  • Possible solutions to the above problems:
    • fetch tweets and render component during build time. This requires getting a twitter api key and recreating custom twitter component that matches the look of the embed. (overwork but blazing fast. see here).
    • create remark plugin for twitter embeds based on this gatsby remark plugin. Although still not sure if this would resolve tweet loading time.