Search capability for Static Site

[azure wigeon]

Hello Community :),

While researching to create "Search" capability for my static site, I have found two main libraries: Lunr (https://github.com/olivernn/lunr.js/) and Stork (https://github.com/jameslittle230/stork).

Search Functionality:
Following is how I anticipate integrating search into my static site

1. Locally, build an index (JSON) file against my blogs (mds, astro etc files). Hopefully via tooling provided by one of these libraries.
2. On the website, only load this JSON file when user clicks the search button.
3. Then in browser, leverage Lunr or Stork or any community suggested library to search against the JSON index file.

Question:
1/ Does anyone have experience with either of these? If so which one do you recommend?
2/ Any existing Astro integration or other library to check out for Search capability?

Thank you for your help and time!

[faint oasis]

These are the two search integrations I know of https://github.com/jackcarey/astro-lunr or https://github.com/LyraSearch/plugin-astro#readme

[lusty sonnet]

A community member wrote and shared this very helpful overview of how they implemented their own static, client-side search -- definitely worth a read! https://barnabas.me/articles/client-side-search/

[rotund folio]

Also this blog article from Lloyd https://www.lloydatkinson.net/posts/2022/writing-a-fuzzy-search-component-with-preact-and-fuse-for-astro/

[azure wigeon]

Thank you @faint oasis , @lusty sonnet , @rotund folio 🙂 .

I will checkout these valuable resources.

[vestal mesa]

@azure wigeon I can highly recommend Pagefind.
https://pagefind.app/

I wrote about it here (along with a brief code example for use with Astro):
https://www.brycewray.com/posts/2022/07/pagefind-quite-find-site-search/

[hushed ginkgo]

This is beautiful. Great find and nice post. I'm working on implementing this now. What a time to be working on websites, the frameworks and tooling are stupendous compared to just a few years ago when I was messing with things like statamic.

[vestal mesa]

Thank you. I think you’ll really like Pagefind.

[earnest basalt]

@vestal mesa @hushed ginkgo I'm implementing Pagefind on my site, and curious if there’s a way to integrate it with astro dev the way you did with Hugo in your write-up, Bryce. Did either of you find a way to get Pagefind working in dev mode (other than watching /dist from a recent build)?

[vestal mesa]

I haven’t tried to make an Astro version of Régis Philibert’s solution (https://www.brycewray.com/posts/2022/07/pagefind-quite-find-site-search/#update-2021-07-31); sorry I can’t be of more help on that, but perhaps you can reverse-engineer what he did. 🤷 cc: @hushed ginkgo

[hushed ginkgo]

I didn't get it to work in dev... but I don't mind. It works in preview mode (previewing /dist). Once i had it working it didn't bother me anymore. But yeah, while integrating and testing it, it's a lot of making changes, saving, then running build and preview again (once npm script, but still).

[earnest basalt]

Thanks, yeah. I don’t get why it won’t even run in dev, while indexing files from the last build in /dist, but whatever. Like you said, I can stand fussing with it by repeatedly building and previewing

[hollow tinsel]

fwiw astro-lunr isn't finished yet (I don't have time right now) so I've updated the repo to reflect this

[hollow mauve]

It seems that Lyra changed name to Orama, and the plugin is now available as @orama/plugin-astro → https://www.npmjs.com/package/@orama/plugin-astro

I'm currently using Lunr.js on my website, but I might check out the plugin from orama and see if it's any easier or better.

Lunr does work well enough, but sadly it seems that it is currently unmaintained as the last update was some time in 2020.

[formal patrol]

https://www.algolia.com/ Algolia is what they use on most of these documentation sites, including Astro's docs. It's a 3rd party service that can just index your site for you or you can supply indexes to it.

[hushed ginkgo]

btw, everyone, there's a great Astro-Pagefind integration that works in dev mode also from Sergey Shishkin https://github.com/shishkin/astro-pagefind

[earnest basalt]

Nice!

[hollow mauve]

From looking at the documentation Pagefind looks pretty incredible. I'll give this integration a try

[hushed ginkgo]

Yeah, it's great. If you need any help on how to override the styles, let me know. He has examples of the css variables, but I've found it necessary to change some more styles by class name.

[stiff lily]

@hushed ginkgo could you point to an example of these class-overrides?

Otherwise did anybody manage to write their own search component with pagefind

[hollow mauve]

I will try to write one with Solidjs I think, mainly because I would like to use Pagefind with some search UI I already have. I haven't started yet, but Pagefind docs have some information about it
https://pagefind.app/docs/api/

[hollow mauve]

I wrote my own rudimentary types for Pagefind to use in TypeScript:

interface Pagefind {
  search: (query: string) => Promise<PagefindResponse>;
}

interface PagefindResult {
  id: string;
  data: () => Promise<PagefindDocument>;
}

interface PagefindResponse {
  results: PagefindResult[];
}

interface PagefindDocument {
  url: string;
  excerpt: string;
  filters: {
    author: string;
  };
  meta: {
    title: string;
    image: string;
  };
  content: string;
  word_count: number;
}

I was able to import pagefind like this (it avoids Vite headaches)

async function loadPagefind(): Promise<Pagefind> {
  const pf = "/_pagefind/pagefind.js";
  return await import(/* @vite-ignore */ pf);
}

I use Solidjs so I load it when the component mounts:

export default function Search() {
  const [query, setQuery] = createSignal('');

  // Search
  let pagefind: Pagefind;
  const [pages] = createResource(query, async (query: string) => await pagefind.search(query));
  
  // == snip ==

  onMount(async () => {
    pagefind = await loadPagefind();
    // == snip ==
  }
  
  return (
    <div>jsx here</div>
  )
}

If someone finds a better way to use Pagefind in Vite please let me know 😅