Pagefind

Options See on deno.land

outputPath string

The path to the pagefind bundle directory

Default:

"/pagefind"

ui object boolean

Options for the UI interface or false to disable it

Default:

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

indexing object

Options for the indexing process

Default:

{ rootSelector: "html", verbose: false, excludeSelectors: [] }

customRecords object[]

Other custom records

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;

UI Component

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: {
    rootSelector: "html",
    glob: "**/*.html",
    forceLanguage: false,
    verbose: false,
  },
}));

export default site;

See the Pagefind indexing docs for more info.