Coder Social home page Coder Social logo

Comments (11)

deltaidea avatar deltaidea commented on May 9, 2024 7

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

from awesome-readme.

RichardLitt avatar RichardLitt commented on May 9, 2024 2

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.

from awesome-readme.

deltaidea avatar deltaidea commented on May 9, 2024 1

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

from awesome-readme.

RichardLitt avatar RichardLitt commented on May 9, 2024 1

@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!

from awesome-readme.

sindresorhus avatar sindresorhus commented on May 9, 2024

👍 I was going to suggest that.

from awesome-readme.

cheeaun avatar cheeaun commented on May 9, 2024

👍

from awesome-readme.

matiassingers avatar matiassingers commented on May 9, 2024

@sindresorhus @cheeaun how would you show the screenshots?

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

from awesome-readme.

sindresorhus avatar sindresorhus commented on May 9, 2024

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

from awesome-readme.

RichardLitt avatar RichardLitt commented on May 9, 2024

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

from awesome-readme.

deltaidea avatar deltaidea commented on May 9, 2024

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.

from awesome-readme.

rayhanadev avatar rayhanadev commented on May 9, 2024

Just to revive this, I've noticed somewhere else that they have users submit an image preview with certain dimensions in addition to a link to their repository. Perhaps we can do something like that?

from awesome-readme.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.