Pagefind

A static search engine in your site

Options See on deno.land

binary object

The options to download the binary file

path string: Filename of the Pagefind binary file
Default:
"./_bin/pagefind"
extended boolean: Whether download the extended version, with support for Chinese and Japanese languages
Default:
false
version string: The version of Pagefind to download
Default:
"v0.12.0"

ui object boolean

Options for the UI interface or false to disable it

Default:

{
  containerId: "search",
  showImages: false,
  showEmptyFilters: true,
  resetStyles: true
}

indexing object

Options for the indexing process

bundleDirectory string: The folder to output search files into, relative to source.
Default:
"pagefind"
rootSelector string: The element that Pagefind should treat as the root of the document.
Default:
"html"
glob string: Configures the glob used by Pagefind to discover HTML files.
Default:
"**/*.html"
forceLanguage string boolean: Ignores any detected languages and creates a single index for the entire site as the provided language.
Default:
false
verbose boolean: Prints extra logging while indexing the site.
Default:
false
excludeSelectors string[]: Extra element selectors that Pagefind should ignore when indexing

Description

This plugin uses the Pagefind library to create a fully static search engine in your site without requiring any hosting infrastructure. The process is divided in two steps:

Indexing: It's the process to scan all HTML page and build the search index.
UI rendering: A UI component that supports searching, filtering and metadata out of the box.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind(/* Options */));

export default site;

The binary file

The first time, the plugin downloads the Pagefind's binary file to the _bin directory, taking into account your platform and operating system. Make sure to add this folder to the .gitignore file.

There are some options in the plugin to configure the binary file under the key binary. The default values:

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  binary: {
    path: "./_bin/pagefind", // Binary location
    extended: false, // Set true for Chinese and Japanese support.
    version: "v0.8.1", // Pagefind version
  },
}));

export default site;

The default Pagefind version is updated every new Lume version, it's recommended to don't configure a fixed version

To add the search component in your site, just create a element with the search id. The plugin automatically generate the HTML code to import the JavaScript and CSS styles in any page containing this element.

<h1>Welcome to my site</h1>

<!-- Insert the search component here: -->
<div id="search"></div>

UI configuration

The plugin has the ui key with some configuration options. The default values:

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  ui: {
    containerId: "search",
    showImages: false,
    showEmptyFilters: true,
    resetStyles: true,
  },
}));

export default site;

Customising the styles

The generic UI component comes with some CSS custom properties that you can edit in your CSS files:

:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #eeeeee;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;
}

See the Pagefind UI docs for more customization options

Disable the UI component

If you want to use a custom search component, you can disable the automatic insertion of the generic UI component in the plugin configuration:

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  ui: false, // Don't insert the UI component
}));

export default site;

Indexing

The indexing key allows to customize the indexing process. The default values:

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  indexing: {
    bundleDirectory: "pagefind",
    rootSelector: "html",
    glob: "**/*.html",
    forceLanguage: false,
    verbose: false,
  },
}));

export default site;

See the Pagefind indexing docs for more info.