Pagefind
A static search engine in your site
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.