Float social media previews?

[astrojuanlu]

Wouldn't it be cool if we could show a modal or tooltip with these cool social media previews?

(source: https://cards-dev.twitter.com/validator)

Content:

<meta name="twitter:image:src" content="https://opengraph.githubassets.com/d0b6e212f5531e99b4deb14274afa748ddb99ff75bc5d1d8e28d1034ffa2e62d/poliastro/poliastro/pull/1184" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Move flyby computation to core by Yash-10 · Pull Request #1184 · poliastro/poliastro" /><meta name="twitter:description" content="This PR tries to move computations for threebody flybys to core.
Thanks!" />

pinging @humitos as my local sphinx-hoverxref expert, and @choldgraf because I've seen you mention this topic a few times on Twitter

[choldgraf]

I agree it would be very cool! (but I have no idea how to do it haha)

[humitos]

This looks great! The library that I used for sphinx-hoverxref is https://www.heteroclito.fr/modules/tooltipster/ and it's really simple to use. We would need to know the github image URL from that card at build time (this URL https://opengraph.githubassets.com/d0b6e212f5531e99b4deb14274afa748ddb99ff75bc5d1d8e28d1034ffa2e62d/poliastro/poliastro/pull/1184 --not sure where that hash comes from yet) and add .tooltipster class to HTML elements generated by our :github: role.

I'll try to give it a try this week, if time allows me, at leat to have a POC that you polish --now that you are better than myself with JavaScript 😉

[astrojuanlu]

We would need to know the github image URL from that card at build time

Wouldn't if be easier to grab <meta name="twitter:image:src" from the PR URL?

In any case, thanks a lot 🚀

[humitos]

@astrojuanlu

Wouldn't if be easier to grab <meta name="twitter:image:src" from the PR URL?

I'm not sure to follow. I understand that to grab it from there we would need to do a first request to get the HTML of PR's URL and a second request to the URL that it's on that meta name. If what I understood is correct, what I want to try is to reduce it to just one request to the final URL.

[astrojuanlu]

Sorry, this was actually an answer to "not sure where that hash comes from yet". I guess we only need to do 1 request, to grab the image URL from the PR metadata, and then serve that to the user. Or am I missing anything?

[humitos]

Hehe, this is getting confusing... 🙃

I guess we only need to do 1 request, to grab the image URL from the PR metadata, and then serve that to the user.

Well, those are 2 requests to me:

1. to get the URL from the PR metadata
2. to get the image file and how it to the user

My question is "isn't there a way to get the URL of the final image without doing a request to GH to get the metadata?"

[astrojuanlu]

The extension needs to do 1 request to get the image URL, then put it somewhere in the resulting HTML. Then the user needs to do 1 request to see the image, but that's not the extension job.

?

My question is "isn't there a way to get the URL of the final image without doing a request to GH to get the metadata?"

No idea, I'll have a look at the API

[humitos]

We can do it as you are describing. However, I see these "problems" (?) with that approach:

• the extension has to make one request per github role included in the documentation --which could be many
• if the hash included in the URL obtained freezes the image (number of stars, issue title, etc) we will be showing a stale image

What I'd like to have is:

• at build time, be able to generate (without doing a request to GH) a "generic URL" (no frozen image) that we can insert in the resulting HTML
• on the client side, only one ajax request to that image URL

Also, if it's simple enough to generate the "generic" URL from Javascript on the client-side, we could eliminate the first step which would be better.

I hope I'm being clear here.

[astrojuanlu]

Oh, I see. Very good point about stale images with the "static" approach. I have no idea how could we do what you propose though. Open to suggestions.