I’ve added a search page. It uses Pagefind. It turns out I’d already begun work on this with the original site. The clue was a commented-out line in my Makefile:
index:
npx -y pagefind --site ${SITE_DIR}
All I needed to do was create a search page and add a snippet:
---
layout: layouts/base.njk
title: Search
slug: /search
---
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: true, pageSize: 10, autofocus: true });
});
</script>
To manually build the index, I render the site and then index it. using npx -y pagefind --site _site
. I do this as part of the deploy recipe in the Makefile.
That was easy enough. I’ll fart around with the indexing a bit, but otherwise it works really well right out of the box.