Implement Client-side search

[egardner]

Client-side Search needs to be added to the catalog. Right now I think the best option is Lunr.

Proper implementation of this requires the following things:

• Generation of a weighted search index file (JSON) from the site content somehow
• Creating a UI for searching that dynamically displays results

[egardner]

Some refrences for this feature

• Native Implementation: http://willschenk.com/adding-search-to-a-middleman-blog/
• This site has a pretty elegant search feature, built using this: https://github.com/256dpi/middleman-lunr
• Jekyll Plugin which could probably be adapted: https://github.com/slashdotdash/jekyll-lunr-js-search
• Another middleman extension (but without much explanation): https://github.com/jnovos/middleman-lunrjs
• An example implementation: https://github.com/joelhans/middleman-search-example
• A node module to build a Lunr index: https://www.npmjs.com/package/lunr-index-build

[egardner]

As of 2d00ed2e24b82e06b066740cd06fe7cb8ade6df9 this feature is now working.

I'll write more on the solution in the near future, but the short version is:

• contents.json.erb in the Source files is a template for the full-text JSON index of the site contents. This template is generated with a lot of custom logic to structure search results in a way that I think will be most useful. This file compiles into a root-level contents.json resource. The size is about 650KB, which is about the size of a large image.
• At runtime, a jQuery AJAX request loads this index file inside of $(document).ready(). In practice this means a delay of ~1-2 seconds after the initial page load.
• After the search index has loaded, most other JS tasks are executed inside of an anonymous callback function so that the index data is available. At this point the index file is fed to Lunr and made query-able. A contentList variable is created at the same time, which gives the Lunr index something to check against.
• Finally, when a search is actually executed by the user, a Handlebars template is used to present the results. Search results are returned immediately, as the user types. The whole experience feels very snappy.