vectorlogozone / logosearch Goto Github PK

View Code? Open in Web Editor NEW

103.0 3.0 5.0 1.63 MB

LogoSear.ch and IconSear.ch: search through zillions of SVG logos/icons directly linked to their source repos.

Home Page: https://logosear.ch/

License: GNU Affero General Public License v3.0

Shell 1.02% TypeScript 64.16% Dockerfile 0.82% Handlebars 33.99%

svg logos brands branding image-search svg-logo logo icons svg-icons svg-images

logosearch's Introduction

LogoSear.ch & IconSear.ch

This is the source for the LogoSear.ch and IconSear.ch websites.

Using

Go to LogoSear.ch or IconSear.ch and search for something!

Click on an image to go to the original source. You will need to check the source's license before re-using.

Contributing

If you want to add another git repository with SVG logos, please submit a github issue on git-svg-icons repo.

Non-git sources can also be included, but it requires making an index file in the correct format. Let me know if you are interested & I can work on documenting how to do this.

Code contributions are welcome! Please follow the standard Github Fork & Pull Request Workflow.

See the to do list for a list of things that are already being planned.

API

While there is an internal API, it is not meant for public consumption. It is running on a low-end server and will fall down if subjected to a serious load.

But feel free to run your own copy...

Running

It is a fairly standard node.js web app:

yarn install
yarn start

See config.ts for details about configuring the environment variables.

License

GNU Affero General Public License v3.0

The images are the property of their original owners.

Credits

axios
José Solé - Noticia Text font for IconSear.ch
Omnibus Type - Sansita font for LogoSear.ch
jQuery throttle/debounce
transliteration

logosearch's People

Contributors

Stargazers

Watchers

Forkers

josephjlee iveskins dinuth-perera rusmadisk cafeltk

logosearch's Issues

Improve results jumpiness

Following up on https://news.ycombinator.com/item?id=23520829

the_duke
Looks useful.

Feedback: the result rendering is very "jumpy" due to logos loading in one at a time.

You could either render sized wrapper containers for each logo, or load them in in the background and only show them once ready (with a loading indicator somewhere).

Fileformat
I have tried various solutions, but nothing that works better than what's there now.

I only force the height for the logos, not the width, so wrapping doesn't really improve things.

Waiting to display until they are all loaded kills the "instant" tagline. I'm hotlinking the images, so some images can take awhile.

I agree that there’s a value in loading the images as they come in, rather than waiting for them all to load before displaying any. But I think there is something else you could do which would help a lot.

One source of jumpiness is the fact that images have a 6px border around them as well as a 1px border.

.logo-container img {
  box-shadow: 0 0 5px #1d1d1d;
  border: solid #ccc 1px;
  margin: 6px;
}

This means that the UI paints many intermediate frames with dozens of little rectangular boxes in it, as the images are loading in:

Here are a couple frames pulled from that sequence:

My recommendation for fixing this would be insert the images into the DOM after they are loaded.

Additionally, I’d recommend adding the images in the order they load, as this would prevent images from getting "bumped" down as new ones are loaded before them.

Something like this:

const resultsEl = document.querySelector('#search_results")
const results = [/* array of strings of `src`s of images */]

results.forEach(src => {
  const img = new Image()
  img.onload = () => resultsEl.appendChild(img)
  img.src = src
})

I hope this helps!