Add search

[vitaliy-bobrov]

As list of examples will grow it'll be handy to have a search field to filter list.

[samdutton]

Might be good, but how do you imagine the UI for this?

In other words, what would work better than simply searching for text in the page?

[vitaliy-bobrov]

It is more user-friendly I think. Also it will limit text search to only needed area.

[wnda]

So, I didn't realise there was discussion about this; last time I checked, #97 was just an open issue, so I thought I'd go ahead make a simple solution. Now I see that you're talking about how it should be done, so my work might be a little premature. Nevertheless, here it is:

» Demo (may need a hard-refresh if you can't see a search button)

I've tried to make it perform well. The thing I think is most useful about my approach is that it will work on any page on https://simpl.info without any changes, because it scrapes the homepage and uses it as a data source.

I originally thought to use sitemap.xml as a data source, but that is a little out of date and not really necessary for the web today.

Another idea would be to create a simpl organization, transfer this repo to it, and then separate every one of the finished examples into their own repos. After a bit of tweaking to the Github pages settings, they would still be accessible via the same URLs, but because they would be repos in their own right, we could use the Github API for exact searches. The downside of this approach is that issues would become almost impossible to manage.

The Github API can actually still be used to search the site. Using fetch for brevity, it would look like this:

function apiSearch(query) {
  return fetch('https://api.github.com/search/code?q=' + query + '+repo:samdutton/simpl', {
    mode: 'cors',
    headers: {
      'Accept': 'application/vnd.github.v3.text-match+json'
    }
  }).then(function(response) {
    if (response.ok) {
      return response.json().then(function(data) {
        return data.items.map(function(datum) {
          return datum.path
        }).filter(function(result) {
          return result.includes(query) && result.includes('/index.html')
        }).map(function(match) {
          const dir = match.replace('/index.html', '');
          return {
            'title': dir,
            'url': 'https://simpl.info/' + dir
          };
        });
      });
    }
  });
}

This also works, but it is more likely to deliver false positives and the API is rate-limited, so it didn't seem preferable to me.

[samdutton]

Thanks @wnda!

I really like what you've done here, and I really appreciate the effort, but I think it's hard to make the 'simple version' worthwhile. Problem is, it can only find stuff in link text, or whatever, and I don't use anything like searchable tags.

I do like the idea of using the GitHub repo search API, though I understand the problems you describe. One option might be simply to add a repo search at the top, which would open a page like https://github.com/samdutton/simpl/search?q=image. Not sure this adds much though.

I'd love to have an organisation for simpl.info (sadly github.com/simpl is taken, and seems to be active) but using a repo for each demo as you say could be overkill :).

[wnda]

@samdutton: I understand what you mean. On the homepage, the search thingy I made doesn't really do anything that ctrl+f / ⌘+f can't do faster.

If used in example pages, I suppose it would save the user from going to home page to navigate from one example to another — but on a fast network the cost of loading the homepage is negligible, and on a slow network the difference between loading the homepage and XHRing the homepage to get the search results is equally negligible.

And as you say, the repo search doesn't add a great deal either.

Not to worry though, I mostly just wanted to make the search widget anyway regardless of whether it would be used or not.

[samdutton]

Thanks again @wnda.