SassDoc / sassdoc

Release the docs!
http://sassdoc.com
MIT License
1.41k stars 56 forks source link

Add search and filters #46

Closed KittyGiraudel closed 10 years ago

KittyGiraudel commented 10 years ago

Would be cool to be able to search and filter documented items.

KittyGiraudel commented 10 years ago

This could be done completely client-side, within the DOM, but @valeriangalliat and I wished to have something a little more focused on data rather than presentation.

FWeinb commented 10 years ago

I think exposing the whole data to the client side would be great. So injecting the data using swig

<script>window.data = {{ data | json }}</script>

is easy. Using http://lunrjs.com/ to index appropriate keys (like name, description).

FWeinb commented 10 years ago

After trying to injecting the whole data into the page I think that it is to much. Here is an DOM approach using fuse.js and injecting only item.context.type and item.context.name into the DOM.

Development is on branch add-search-fuzzy-dom Unstyled showcase can be found here: http://0da9e3a.5minfork.com/examples/dist/

KittyGiraudel commented 10 years ago

A word regarding inline-search (items get filtered and hidden/displayed as you're typing):

On paper, I like that. It does the job well since I automatically get rid of all the items I don't want as I'm typing in the search bar. That's what we have at Browserhacks and it's working pretty well.

There are 2 things I don't like with this system though:

  1. It involves some weird issues like empty sections whenever all items from a section are getting hidden.
  2. It works for single page documents, and get quickly annoying to deal with when we want to do something as simple as tabbing content (which I am planning to do).

I'd rather keep things simple: I type, I get suggestions, I pick one and get redirected to the selected item (anchor in our case).

FWeinb commented 10 years ago

Fixed by 06576f57eba413be514497070d5e90930c9ec292