Search
BooGi comes with a content search capabilities. It takes care of indexing content during page build time and makes indexed data accessible in Search UI.
Two search engines are supported:
- Algolia - external service providing superb search capabilities
- localsearch - search in your browser, without integrating with any external service
For the best search experience we recommend using Algolia.
What is indexed?
To provide best search experience, following data is indexed:
- page title
- content excerpt (number of characters is configurable)
- page path (URL)
- page internal ID
- page category (coming soon)
Algolia vs Localsearch
Algolia (recommended)
- uses external Algolia service, so indexed data is stored externally
- outstanding search results quality
- constant, low memory usage
- very fast, minimal network overhead
- need to be enabled explicitly (
features.search.engine=algolia
) - index created only during page build
- paid, free tier for small indices and low load
LocalSearch
- uses only client device (browser) for all computation, all data is local
- low-to-medium search results quality, depending on configuration
- memory usage growing with the number and size of pages, may be significant on big pages as index and excerpts are stored on the client
- very fast, no additional network calls involved to query data
- enabled by default
- index created during page build or running development server
- free
LocalSearch
LocalSearch engine is a client-side search powered by FlexSearch. It does not need any external service to work, index is created during build time and whole searching is done on the client (browser).
To make LocalSearch work there is no additional configuration needed then setting up BooGi ๐
Tuning engine
https://github.com/nextapps-de/flexsearch#options
FlexSearch engine is customizable and you can configure to satisfy your needs (speed, accuracy / relevance, memory consumption).
Default engine configuration is tuned to provide best search results, keeping great search speed and reasonable memory consumption.
Don't change Flexsearch engine configuration if you don't know what you are doing. Default settings provide great results already.
Follow this guide to learn more how you can set up FlexSearch engine to satisfy your needs.
To configure Flexsearch engine pass proper configuration to
features.search.localSearchEngine
property in config.yml
.
Algolia
Algolia is a SaaSSaaS - Software as a Service Software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted and managed search engine, offering full-text search, capable of delivering real-time results. Algoliaโs powerful API lets you quickly and seamlessly index content and implement search within your websites.
Algolia offers great free tier, which may be sufficient for plenty of pages using BooGi. For more details on Algolia follow its documentation.
Setting up Algolia
The first step is to create and set up Algolia account. In order to make Algolia working properly with your page, you need following:
- Algolia application
- Index
- Search-only API key for given Index (or whole application), used for searching
- Admin API key for given Index (or whole application), used only for building and managing index. It is used only during page build time.
Creating Algolia application
You can create a new application in the My Account section of the dashboard. Then, in the Applications tab, select New application. You can then switch between your applications via the top-left dropdown menu.
After creating application, open it to further configure it. Go to API Keys tab in Application' dashboard and note down Application ID which will be required later on when configuring BooGiBooGi T lulzhe best documentation tool in the space! Check it here..
Creating an index
Go to Indices tab in Application' dashboard to create a new index. Click on New... then Index and provide its name.
Setting up Search and Admin API key
Go to API Keys tab in Application' dashboard to manage API keys.
You can either use Application-scoped API keys or more fine-grained Index-scoped API keys.
Application-scoped API keys
Application-scope keys have either search or admin rights to all indices within application. They may have too broad permissions than required.
They are created by default and accessible in Your API Keys tab.
Index-scoped API keys
Index-scope keys allow setting up more fine-grained permissions to API keys. You can configure them to set certain access rights to certain indices.
Go to All API Keys tab and select New API Key. Set up desired configuration and select proper ACLs:
- for Search API Key:
search
scope, - for Admin API Key:
addObject
,deleteObject
,browse
,settings
,editSettings
scopes.
Remember to select proper Indices to which API keys will have rights.
Managing environments
There are two main approaches to managing different environments:
- application per environment
- index per environment within single application
Follow this guide to decide which approach will fit you better.
Setting up BooGi
Do not hardcode values for algoliaAppId
, algoliaSearchKey
and algoliaAdminKey
as they may leak to your source control system and anyone could potentially
gain access to your Algolia account! Use environment variables instead.
For more details visit this page.
Search configuration is set in config.yaml
under features.search
key.
Property | Description | Default |
---|---|---|
search.enabled | Set to true to enable search. | true |
search.engine | Search engine to use. Allowed values: localsearch , algolia | localsearch |
search.localSearchEngine | (Localsearch only) Localsearch engine configuration. For details vising this page. Warn Only for advanced users. You can rely on default configuration, which offers best search results. | |
search.indexName | (Algolia only) Name of the search index | docs |
search.algoliaAppId | (Algolia only) Algolia Application ID. It can be found in API Keys section in Algolia dashboard. Example: AB1CDE2FGH | |
search.algoliaSearchKey | (Algolia only) Algolia Search API Key. More details about Search Key in section above. | |
search.algoliaAdminKey | (Algolia only) Algolia Search API Key. More details about Admin Key in section above. | |
search.excerptSize | A number of content excerpt characters sent to Algolia for indexing | 30000 |
search.placeholder | Placeholder text visible on search input. | Search... |
search.startComponent | Component used in header to initialize search. Allowed values: input , icon .When input is used then search input form is shown in header.When icon is used, just a search icon is shown in header (it is compact option). | icon |
search.debounceTime | Time in milliseconds between last keystroke and invoking search operation. It is used to minimize number of search operations and improve overall site performance. Reasonable values are between 250ms and 600ms. | 380 |
search.snippetLength | Number of words shown in a details of a single search result. | 22 |
search.hitsPerPage | Number of search results per page. | 10 |
search.showStats | Set to true to show search statistics (results count and search time) in a results sidebar. | true |
search.pagination.enabled | Set to true to enable search results pagination. If disabled, then only one page will be always visible. | true |
search.pagination.totalPages | Maximum number of search pages. | 10 |
search.pagination.showNext | Set to true to show next page button. | true |
search.pagination.showPrevious | Set to true to show previous page button. | true |
Full configuration example - Algolia
features:search:enabled: true,indexName: 'myindex'engine: 'algolia'excerptSize: 10000placeholder: 'Search here...'startComponent: 'input'debounceTime: 380,snippetLength: 22,hitsPerPage: 10,showStats: true,pagination:enabled: true,totalPages: 10,showNext: true,showPrevious: true
Full configuration example - LocalSearch
features:search:enabled: true,engine: 'localsearch'localSearchEngine: 'balance'excerptSize: 10000placeholder: 'Search here...'startComponent: 'input'debounceTime: 380,snippetLength: 22,hitsPerPage: 10,showStats: true,pagination:enabled: true,totalPages: 10,showNext: true,showPrevious: true