Skip to content

Add Lunr search UI components

Sarah German requested to merge sarahg/672-lunr-frontend into main

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
image image image

Links:

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Set an environment variable to opt-in for Lunr: export ALGOLIA_SEARCH="false"
  3. Compile the site: bundle exec nanoc compile
  4. Build the Lunr search index: make build-lunr-index (if you recompile, you'll need to re-index)
  5. 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.

Edited by Sarah German

Merge request reports