react-native-community / directory

A searchable and filterable directory of React Native libraries.

Home Page:https://reactnative.directory

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add thumbnail feature

jonsamp opened this issue · comments

Feature Request

Why it is needed

It's great to see a thumbnail of images from the repo inline. The directory used to have this feature, but it was removed when refactoring/redesigning. This tweet also requested it.

Possible implementation

  • Add icons that are clickable/hoverable that display a thumbnail from the repo.
  • There's a fetchReadmeImages in build-and-score-data.js that can be used to fetch images again.

Design

Here's a mock up of what this could look like:

Screen Shot 2020-05-06 at 8 47 57 PM

And here's an svg for the icon:

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H2v12h12V2zM0 0v16h16V0H0z" fill="#82889E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 7.586l3 3 2-2 3.707 3.707-1.414 1.414L12 11.414l-.586.586 2.293 2.293-1.414 1.414L7 10.414l-5.293 5.293-1.414-1.414L7 7.586z" fill="#82889E"/><path d="M12 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="#82889E"/></svg>

hi @jonsamp, thanks for your fast respond and opening up an issue for it.

i was thinking of adding a new field in the json schema thumbnails < an array of image urls, the reason why not scraping images from the readme, because that not all the time readme will include a previews of the library itself, there might be a tutorial , logo and sponsors images.

let me know what do you think ?

I think that's a great idea, and would really make the thumbnails valuable! When we had them before many of them were sponsor logos etc. Sounds like this would fix that!