search

sindresorhus / project-ideas

Need a JavaScript module or looking for ideas? Welcome ✨
544 stars 9 forks source link

Render hover-cards for popular website-links #115

Open staabm opened 4 years ago

staabm commented 4 years ago

add popup/hover-cards for popular urls, like e.g. twitter

expected result: a url like https://twitter.com/markusstaab/status/1197832308470034433 when used in e.g. a comment on github should open a card-overlay on mouse-over. the card-overlay could/should contain the schema.org defined properties like og:title, og:image, og:description etc. like e.g. popular chat systems do (slack, mattermost)

that way people can get a impression on what the actual link will provide/contain without leaving github.com

example how mattermost renders a similar feature: grafik

this feature could be used for several services (as long as the og:* schema is supported by the website) but should not open hover-cards for all links (for security reasons) but just whitelisted domains.

examples I can think of righw now are

Transferred from https://github.com/sindresorhus/refined-github/issues/2565

surhud004 commented 4 years ago

@staabm Wrote a PHP + JS script / library which does somewhat similar work!! Not yet tested on all web URLs but works on Twitter, YouTube, some Medium links. Completed in 5 hours approx. Thanks for the mouseover and card-overlay idea. https://github.com/surhud004/hyperlink.js