Add screenshots of awesome readmes

[matiassingers]

Not sure about this, but could be interesting to do.

---

What do you guys think?

[sindresorhus]

👍 I was going to suggest that.

[cheeaun]

👍

[matiassingers]

@sindresorhus @cheeaun how would you show the screenshots?

Was thinking about a table, and then maybe a cropped screenshot - but looks a little clunky.

[sindresorhus]

Nah, tables are ugly. Just resize it to a retina thumbnail.

[RichardLitt]

This would confer the benefit of freezing the README in a point of time. At the moment, it is easy for the README to change such that it might not be awesome anymore.

[deltaidea]

You could use the <details> tag to hide the screenshots.

Example

• Example without a screenshot - foo
• Example with a screenshot - bar

  
• Example without a screenshot - qux

Code

* Example without a screenshot - foo
* <details>
    <summary>Example with a screenshot - bar</summary>
    <img src="https://imgs.xkcd.com/comics/random_number.png">
  </details>
* Example without a screenshot - qux

[RichardLitt]

@deltaidea that sounds like a great idea. Any chance you'd like to submit a PR?

[deltaidea]

Sure, maybe later today. Not with all screenshots at once, though, as that's a lot of work. 😄

[deltaidea]

Wait, I just realized that if we want to preserve a particular version of a readme, we could just link to it with current commit in the URL, like this:
https://github.com/sindresorhus/pageres/blob/7576249b66accd3fb832dc7b65925aa95978ed2a/readme.md
This would be considerably easier to do, and the markdown in our list would remain simple and contributor-friendly.

There're two issues with this approach that are solved by screenshots:

• Badges and other external images may become unreachable and break the visual style.
• Repos can be deleted, in which case the links will still be dead.

[RichardLitt]

@deltaidea Hmm. How about we link to the commit, and show the image as a screenshot? I think that would solve both of the issues, and allow us to content address it.

Thank you for helping with this!