Search #34
Merged
Search #34
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The Go template that produces the search index has been overhauled in order to handle the special case of "absract-only" pages. These are still classified as "Essay" type but they have no content, only `abstract` frontmatter data. The desired behavior for search is that on these pages, the user should be taken to the section-head page that this abstract appears in if they choose a result of this type. In Go, the different cases (normal vs abstract-only pages) are handled via conditional assignment of block-scoped variables in the local .Scratch (as opposed to the page-level $.Scratch). The additional logic comes into play if the length of a given page's .Content is 0 (i.e. empty). In that case, the abstract content is used instead, and instead of using the normal .RelPermalink for the page, the URL data is set as the relref of the page's parent section (figured out with a crude hack for now - taking the name of the $page.Section value and adding "/index.md" on the end).
This removes some of Hugo's auto-generated pages for things like "Categories", "Tags", etc. which are not being used in this project.
This needs a pass for QA as well as UI, but the basic functionality is now working. Previous projects set this feature as something available on all pages; in this book the user needs to navigate to the /search page to access this screen. This simplifies things both in terms of CSS layout, but also performance issues (the search index is 1MB, and now it doesn't need to be made available on all pages, just the search-specific page). A "search.md" page has been added to the contents folder. Any content here will not show up, but we need to tell Hugo to build a page using the search layout at this URL. The global `baseof.html` template has been modified so that the search link now appears in all of them (not the search button and results partial from before). A new search/single.html layout has been added to the base theme which handles this content instead. Finally, the main UI.js file has been re-worked a bit to accommodate the new behavior.
Rebuilds the search feature as a stand-alone Vue.js component for improved UX. The new version of this feature supports the following: * "Loading..." message until the search data is loaded * Debounced input for the search query * Getting user input, displaying results, etc. is much clearer in the code thanks to Vue's api (as opposed to doing everything manually with jQuery).
Adding the `online: false` parameter removes the page from the linear reading order of the publication. This commit also hides the previous and next arrows in the upper navigation bar, to make the search page more of a standalone.
|
Looks good @egardner. I made a couple small tweaks to add an aria role, and to take it out of the linear page navigation of the book. Other than those, I see it currently reloads the search index each time you visit the page. Is it possible (or rather, is it easy enough) to have it cached once first visited? |
|
I can build in a caching system using LocalForage similar to what we did in Lamps, but it will take some more work to get that up and running. Might be better to build that out as a separate feature branch. |
|
Cool. Added local cache as an additional enhancement (issue 35) and will go ahead and merge this PR as is. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements client-side search with Lunr.js and Vue. This feature is limited to the
/searchpage only because the full-text search index JSON file is 1MB in size.Make sure to
npm installbefore running this code the first time, becausevuehas been added as a JS dependency.