Site Search Powered by JSON Feed

Inspired by Craig Mods's gist for client-side site search, I adapted his concept into a React component for use on this Next.js-powered site. At the time of posting, every page of lightpohl.me is generated at build time — sites like these fall into the category called 'static site generation.' At build time, I grab all posts and photos from a CMS, tell Next.js which pages it needs to build, and generate an RSS feed. When a post is created or is updated, I generate a new build via a webhook and the process starts over again. Without a live API, where would I get the data to power the site search? RSS! Well, sort of.

I use jpmonette/feed to generate my existing rss.xml, but it also supports the JSON Feed specification as an output type. By tweaking the config, I was able to expose an rss.json as well. A simplified version of output looks like the following:

{
  "version": "https://jsonfeed.org/version/1",
  "title": "Joshua Pohl",
  "home_page_url": "https://lightpohl.me",
  "feed_url": "https://lightpohl.me/rss.json",
  "description": "Writing about programming, the Internet, and travel.",
  "author": {
    "name": "Joshua Pohl",
    "url": "https://lightpohl.me"
  },
  "items": [
    {
      "id": "https://lightpohl.me/i/waikiki-morning-sailboat",
      "url": "https://lightpohl.me/i/waikiki-morning-sailboat",
      "title": "Waikiki Morning Sailboat",
      "summary": "A small sailboat near Waikiki.",
      "date_modified": "2023-02-21T18:00:00.000Z"
    }
  ]
}

The list of items works perfectly with Fuse.js. Add a fetch() call, a couple pieces of state, a few keyboard listeners, and you have a super fast client-side search. Try it out on desktop by pressing CTRL + /.

This project served as a reminder that feeds need not only be an API for external users, but are powerful tools for sites and web apps themselves. RSS and friends are still cool.