Adds search results page to the docs
- Follows https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/190 (OpenSearch)
- Closes https://gitlab.com/gitlab-com/gitlab-docs/issues/76
- Adds InstantSearch results page to docs.gitlab.com/search/index.html
Review Apps: http://docs-test-add-instantsearch-1.178.62.207.141.xip.io/search/
Pre-implementation:
-
Add search page -
Add InstantSearch library -
Figure out how to use the same index as DocSearch -
Fetch and display the results -
Style the CSS
The URL parameter is already working. We'll need it for !190 (merged):
FE implementation
-
Dismember the <head>
file to include the instant search stuff only in the instantsearch layout -
Remove the search bar from the nav on the dedicated search page -
Display the results only when the user starts typing (currently if you visit /search/, you'll see results before any search starts => needs this code snippet -
Check, review, clean up the code of this MR, and fix anything if necessary -
Make SCSS implementation (CSS is currently hardcoded in a <style>
tag) (can we use a theme or template and pick it from there?)
There's another problem: we need to try to display some content with the header in the results where the hit is in the header, e.g., http://docs-test-add-instantsearch-1.178.62.207.141.xip.io/search/?q=gitlab%20pages&idx=gitlab&p=0.
References:
- The InstantSearch library: https://community.algolia.com/instantsearch.js/
- Building an instant search result page: https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/
Complementary references:
- Integration with OpenSearch: https://community.algolia.com/instantsearch.js/v2/guides/opensearch.html
- Importing Data with the API: https://www.algolia.com/doc/tutorials/indexing/importing-data/importing-with-the-api/
- GitLab's Algolia index: https://github.com/algolia/docsearch-configs/blob/master/configs/gitlab.json
- Adding Search to a Static Website (Middleman): https://jahed.io/blog/2016/12/07/adding-search-to-a-static-website/
- DocSearch preview: https://community.algolia.com/docsearch-preview/
- DocSearch/InstantSearch Fiddle: https://jsfiddle.net/maxiloc/oemnhuv4/
Edited by Marcia Ramos