Add Lunr search UI components
What does this MR do and why?
Adds user interfaces for Lunr.js search, which can run in air-gapped (offline), self-hosted Docs site instances.
The main production site will continue to use Algolia search; this will only be used for self-hosted Docs installs and eventually, the docs archives site (technical-writing#523 (closed)). More info here: technical-writing#617 (comment 1042747789)
Lunr does not have all the features of Algolia (e.g, autocomplete search forms), but we should at least have an MVC of an offline-capable search with this.
This MR adds:
- Conditional build step in frontend.rb to copy the Lunr library into content/assets/javascripts
- Conditionals in page templates to load either Algolia or Lunr assets
- Vue component: homepage/interior search form
- Vue component: search form and result list on the
/search
page
Closes #672 (closed)
Screenshots, screen recordings, or links to review app
Search components
Homepage | Interior page | /search page |
---|---|---|
Links:
- http://sarahg-672-lunr-frontend.35.193.151.162.nip.io/ (homepage search)
- http://sarahg-672-lunr-frontend.35.193.151.162.nip.io/ee/ci/ci_cd_for_external_repos/bitbucket_integration.html (an interior page w/ navbar search)
- http://sarahg-672-lunr-frontend.35.193.151.162.nip.io/search (standalone search page)
- http://sarahg-672-lunr-frontend.35.193.151.162.nip.io/search/?query=bitbucket (query that has results)
- http://sarahg-672-lunr-frontend.35.193.151.162.nip.io/search/?query=spongebob+squarepants (query that has no results)
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Set an environment variable to opt-in for Lunr: export ALGOLIA_SEARCH="false"
-
Compile the site: bundle exec nanoc compile
-
Build the Lunr search index: make build-lunr-index
(if you recompile, you'll need to re-index) -
Try out searches from the homepage, the nav bar on interior pages, and the standalone /search
page
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.