Removes large pypi image in Slack link unfurling

[rmasters]

One of my pet peeves is that sharing a pypi link in Slack embeds a tall image - this displays at most two pypi links on my 13" screen until the expansion is deleted by the user.

This PR prevents inclusion of the og:image meta tag when the user-agent represents the Slack link unfurler. It keeps the existing images for Twitter and other social network embeds.

Slack	Twitter	Facebook

This PR also makes the following changes to the Twitter embed:

• Declares the card as a summary card, which was preventing some preview tooling from working. I believe this was previously falling back to a summary card by default.
• Adds @pypi as the site.

It's worth noting that if #2211 is implemented, this should be reverted, ideally with an image height constraint.

---

Despite it's simplicity, I'm not sure if adding to the project/release view context is the best approach for this. Would you prefer this to be a service?

I'm considering some further expansion to this - adding fields like the github repo link, downloads count and latest release date to the metadata (as seen in this example, using the twitter:label1/twitter:data1 meta properties).

[di]

This looks great! I agree these large images are annoying in Slack.

Just have one refactoring suggestion but I think the overall approach is great.

[di]

I think it probably makes more sense to pass the user agent here...

Suggested change

	"show_share_image": should_show_share_image(request),
	"user_agent": request.user_agent,

[rmasters]

Thanks - I used the request that's already in the template (lmk if that's not always present). I also added some handling for Request.user_agent is None in case the user-agent isn't supplied.

[rmasters]

Thanks for the review @di! That's made it a bit cleaner.

# Slackbot
$ http localhost/project/mkdocs-ponylang/ 'User-Agent: Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)' | grep og:image

# User-agent header not sent
$ http localhost/project/mkdocs-ponylang/ 'User-Agent:' | grep og:image
    <meta property="og:image" content="http://localhost/static/images/twitter.abaf4b19.jpg">

[di]

Thinking about this a bit more: I don't think we can actually vary the response here based on the user agent, unfortunately.

These pages will almost always be served from our CDN cache, which doesn't currently vary the cache based on the user agent, so we would end up with a mix of pages with/without this image based on who hit the stale cache first and which request made it to the backend. While we could technically vary on the user agent, I don't think we want to do this in practice because it would make our cache size grow to be extremely large.

I think we'll need to take a different approach here: either find a way to make the image more reasonable for Slack, or a way to make Slack prefer a different image without having to vary the response, or something else.

[woodruffw]

It's not perfect, but I think there are a few other OpenGraph tricks that could be used here:

• og:image:width and og:image:height could be used to constrain the size to something reasonable (64x64?), although I'm not sure if Slack respects these tags.
• Putting more metadata into the tags might cause Slack to reflow the unfurl into something more reasonable. In particular, the twitter:label* and twitter:data* tags can be used to embed additional metadata, e.g.:

<meta name="twitter:label1" content="Latest version" />
<meta name="twitter:data1" content="$LATEST_VERSION" />
<meta name="twitter:label2" content="Uploaded on" />
<meta name="twitter:data2" content="$UPLOAD_DATE" />

(I learned about these tags from this post: https://whitep4nth3r.com/blog/level-up-your-link-previews-in-slack/ -- they're technically not OGP tags but appear to be widely supported, including by Slack.)