Enhance search (#75)

* Updated JSON feed:

- Moved JSON feed file to `packages.json`
- Added `json_path` to Jekyll configuration for new JSON feed
- Added `search_path` to Jekyll configuration for search page
- Updated JavaScript search to point to new JSON feed
- Updated default template to utilize configured variables for navigation links

* Modularize JavaScript search:

- Modified JavaScript search into module
- Moved JavaScript to module directory
- Updated search page to import JavaScript module and provide configuration object

* Updated search with templates:

- Updated search JavaScript with templates for results, zero results, and no query
- Updated search page with templates configuration and templates
- Updated custom style sheet to modify search view

* Updated search with fuzzy search:

- Updated search JavaScript with Fuse fuzzy search module and associated code
- Updated search page results template to include additional details
- Updated custom style sheet to add highlight rules
- Updated JSON feed to simplify package URLs

* Update search with hotkeys:

- Updated search JavaScript with HotKeys keybindings module and associated code
- Updated search page keybinding configuration
- Updated custom style sheet to add selection rule

* Applied @Potherca suggestions:

- Correcting strict-type comparison
- Moved ternary operators to beginning of lines
- Added braces to all if flow blocks

* Applied @jwerle suggestion:

- Added `catch` in `_fetchFeed` function

Author: samlikins

_config.yml

@@ -104,11 +104,14 @@ JB :
   # These paths are to the main pages Jekyll-Bootstrap ships with.
   # Some JB helpers refer to these paths; change them here if needed.
   #
-  archive_path    : /archive/index.html
+  archive_path    : /archive
+  packages_path   : /packages/name
+  tags_path       : /packages/tag
   categories_path : /packages/category
-  tags_path       : /packages/tag/
+  search_path     : /search
   atom_path       : /feed/atom.xml
   rss_path        : /feed/rss.xml
+  json_path       : /feed/packages.json
 
   # Settings for comments helper
   # Set 'provider' to the comment provider you want to use.

_includes/themes/the-program/default.html

@@ -27,12 +27,12 @@
               <ul>
                 <li class="logo"><a href="/">{{ site.title }}</a></li>
 
-                <li class="archive"><a href="/packages/name">Packages by Name</a></li>
-                <li class="archive"><a href="/packages/tag">Packages by Tag</a></li>
-                <li class="archive"><a href="/packages/category">Packages by Category</a></li>
+                <li class="archive"><a href="{{ site.JB.packages_path }}">Packages by Name</a></li>
+                <li class="archive"><a href="{{ site.JB.tags_path }}">Packages by Tag</a></li>
+                <li class="archive"><a href="{{ site.JB.categories_path }}">Packages by Category</a></li>
 
                 <li class="archive">&nbsp;</li>
-                <li class="archive"><a href="/search">Search Packages</a></li>
+                <li class="archive"><a href="{{ site.JB.search_path }}">Search Packages</a></li>
 
                 <!-- github buttons -->
                 <li class="forkme">

assets/custom.css

@@ -99,3 +99,60 @@ tr:hover td {
   column-span: all;
   margin-bottom: 0.25em;
 }
+
+#search + #results {
+  margin-top: 1em;
+}
+#search + #results .noResults img {
+  margin: 0 auto;
+  width: 10vw;
+}
+#search + #results li {
+  border-left: 3px solid rgba(0, 0, 0, 0);
+  list-style-type: none;
+}
+#search + #results li.selected {
+  border-left-color: rgba(254, 121, 49, 0.5);
+}
+#search + #results li .result {
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+}
+#search + #results li:first-child .result {
+  border-top: 0;
+}
+#search + #results .result {
+  font-size: 0.85em;
+  line-height: 1.5em;
+  margin-left: 0.5em;
+  padding-left: 0.5em;
+}
+#search + #results .result a {
+  text-decoration: none;
+}
+#search + #results .result p {
+  margin: 0;
+}
+#search + #results .result .result-title {
+  font-size: 1.15em;
+  line-height: 2em;
+}
+#search + #results .result label {
+  font-weight: bolder;
+}
+#search + #results .result .result-repository {
+  font-size: 0.9em;
+}
+.highlight.match-group-0  { background-color: #d5ebff; }
+.highlight.match-group-1  { background-color: #c4e8ac; }
+.highlight.match-group-2  { background-color: #f6d7a6; }
+.highlight.match-group-3  { background-color: #c8c8ff; }
+.highlight.match-group-4  { background-color: #f2cfff; }
+.highlight.match-group-5  { background-color: #ffc5bf; }
+.highlight.match-group-6  { background-color: #c8e7d6; }
+.highlight.match-group-7  { background-color: #9fcfff; }
+.highlight.match-group-8  { background-color: #9fcba1; }
+.highlight.match-group-9  { background-color: #e0bf8b; }
+.highlight.match-group-10 { background-color: #acadfc; }
+.highlight.match-group-11 { background-color: #e1abf5; }
+.highlight.match-group-12 { background-color: #ef9b95; }
+.highlight.match-group-13 { background-color: #abe2d0; }