Site Search Powered by JSON Feed

Inspired by Craig Mods's gist for client-side site search, I ported his work over to a React component I could use with 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 either by clicking the search button in the top right corner or by pressing CTRL + /.

It was 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.