The search is configured in the flexsearch section of the website configuration.

Indexed sections

The indexed sections are listed under flexsearch.sections, in the order of the result groups. By default, every root section of the website is indexed.

Limit

The limit option sets the maximum number of results displayed in a group.

Split pages

By default, each page is split into one record per <h2> and <h3> heading, linked to its anchor. Set split: false to index a single record per page, as for blog posts.

Date

Set date: true to display the date of the page in the results, instead of the breadcrumb.

Search options

The tokenize option sets how words are matched (strict, forward, reverse or full), and encoder sets how characters are normalized, for example to ignore accents.

Fields weight

Each indexed field (title, page, description and content) has a resolution, from 1 to 9: the higher, the more relevant a match in this field.

Fuzzy matching

With suggest: true, the search falls back to fuzzy matching when nothing matches strictly, so a typo still returns results.

Recent searches

The last selected results are stored in the browser (localStorage, one list per language) and displayed in a "Recent" group when the search box is opened. The recent option sets their maximum number (5 by default), or disables them with 0.

The FlexSearch component theme adds a client side full-text search to a Cecil website: the search index is generated at build time, and searched in the browser with the FlexSearch library. No server, no external service.

Installation

Install the theme with Composer:

composer require cecil/theme-flexsearch

Or download the latest archive and uncompress its contents in the themes/flexsearch directory.

Enable the theme

Add flexsearch in the theme section of the configuration:

theme:
  - flexsearch

Add the search box

Add the stylesheet in the <head> of the main template, then include the search box where the trigger button should be displayed, for example in the header:

{{ html(asset('flexsearch/flexsearch.css')) }}
{{ include('partials/flexsearch.html.twig') }}

Custom trigger

Any element with a data-flexsearch-open attribute opens the modal, for example a link in the navigation menu.

Colors and sizes of the search box are defined as CSS custom properties, with light and dark defaults.

Dark mode

The dark mode follows the system preference, unless the root element has a data-theme attribute, as set by the theme selector of this demo: try it with the button next to the search box.

Custom properties

Override the custom properties in your own stylesheet, for example to use the accent color of your website:

:root {
  --flexsearch-accent: #163c56;
  --flexsearch-selected-bg: #f2d07f;
}

All elements have a flexsearch-* class, so the styles can also be fully replaced.

The search box is translated in English and French, and an index is generated for each language of the website: switch to French with the link in the footer, the search only returns French pages.

Add a language

Extract the strings to translate in another language with the following command, then translate the generated file:

cecil util:translations:extract --locale=<locale> --save --theme=flexsearch

The theme now comes with a live demo: this website, built with Cecil and deployed to GitHub Pages on every change of the theme. Try the search box above!

Search results are now grouped by section: documentation pages and blog posts no longer compete for the first places. Each group has its own limit, and blog posts can display their date instead of a breadcrumb.

We are happy to announce the first release of the FlexSearch component theme for Cecil. It brings a client side full-text search to any Cecil website, with a keyboard friendly modal inspired by DocSearch.

What's inside

The index is a static JSON file generated at build time, and the FlexSearch library is loaded lazily, on the first search only.