Add sphinxext-opengraph

[astrojuanlu]

This should improve the appearance of our links when shared in social media. Close #108.

[astrojuanlu]

The generated image link is wrong: background-image: url("https://readthedocs-blog--118.org.readthedocs.build../_images/rebuild.png"); will open an issue upstream about this.

[astrojuanlu]

https://github.com/wpilibsuite/sphinxext-opengraph/issues/43

[astrojuanlu]

• Before: https://www.opengraph.xyz/url/https%3A%2F%2Fblog.readthedocs.com%2Fnewsletter-july-2021%2F/
• After: https://www.opengraph.xyz/url/https%3A%2F%2Freadthedocs-blog--118.org.readthedocs.build%2Fnewsletter-july-2021%2F/

Some caveats:

• I used the "Dark color logo and wordmark for use on light colors" from https://docs.ops.verbthenouns.com/projects/guidelines/branding.html but it doesn't quite fit the aspect ratio of media shares
• I can't test Twitter Cards in this pull request because robots.txt disallows indexing

[humitos]

but it doesn't quite fit the aspect ratio of media shares

I don't like how it looks 😄

What about using just the logo, https://docs.ops.verbthenouns.com/projects/guidelines/_downloads/ed58d5ce6820efcfb0aa0146ee561409/logo-dark.png

Another option is to update the same image that you are using but with a bigger height (blank) so it scales properly.

[astrojuanlu]

I don't like how it looks 😄

Yeah, me neither 😂 testing your proposal

[astrojuanlu]

Better now (at least the text is not cut)

For anything more sophisticated than this, I'd need to refresh my GNU I.M.P. abilities :)

[nienn]

It's greatly improved. Although I still don't like the look of the oversized logo 😄

Based on this article the best image size should be 1200 x 630.

I'd need to refresh my GNU I.M.P. abilities :)

I can alter the image if there's an option to upload it somewhere.

[astrojuanlu]

Super insightful article, thanks @nienn !

I can alter the image if there's an option to upload it somewhere.

In the absence of a better option, I guess we can upload it to the blog itself?

[humitos]

In the absence of a better option, I guess we can upload it to the blog itself?

Sounds good to me!

[astrojuanlu]

@nienn sent me a modified version of the logo, modified from the original SVG for a more appropriate aspect ratio (thanks!). However, as I added it as part of this PR, I won't be able to test it until it's merged.

[nienn]

This is NOT a real test on opengraph.xyz. It's just a montage with a preview of what it should look like.

The logo was altered from the official version by spreading the text over 3 lines and changing it's proportion relatively to the icon.

[astrojuanlu]

It looks great! When someone submits an accepting ✔️ 🟢 review I will merge the pull request, and we can make further adjustments thereafter

[ericholscher]

@nienn Looks great -- I'll let @agjohnson chime in as current owner of the brand/logo, but I'm guessing that might shift to you here before long ✨

Our official logos are here: https://read-the-docs-guidelines.readthedocs-hosted.com/ -- but we don't have one in that aspect ratio.

[agjohnson]

Looks good! The wordmark doesn't lend great to being split up, with the italicized the dangling in the middle, but I don't think that's a huge issue given the use case here.

Two options that would preserve the wordmark/logo for this format would be logo or wordmark only, but in the correct ratio, or logo in the background (probably fade out a good deal) and the main, single line wordmark centered overlaying that.

All seem like good options.

[agjohnson]

Also, this image format would be great to include in guidelines repo.

[nienn]

Moving the logo discussion over here: readthedocs/guidelines#1

So it won't keep blocking this PR!

[astrojuanlu]

I get from the discussion that this is a good start, and that there will be possibly more iterations on https://github.com/readthedocs/guidelines/issues/1, so I'll go ahead and merge this, so we can start testing how it looks like in real life. Thanks everyone!

[astrojuanlu]

Just tested it, it works 💯