Use processResult in uiOptions?

[paulrudy]

I'm trying to add PageFind's processResult UI config option, but it doesn't seem to work. Silly example changing all results and subresults to 'https://kagi.com':

<Search
  id="search"
  className="pagefind-ui"
  uiOptions={{
    showImages: false,
    showSubResults: true,
    processResult: (result) => {
      result.url = 'https://kagi.com';
      result.sub_results = result.sub_results.map((sub_result) => {
        sub_result.url = 'https://kagi.com';
        return sub_result;
      });
    },
  }}
/>

This doesn't work: no urls are changed.

My use case is to borrow this snippet from Astro Starlight to remove trailing slashes from results.

[shishkin]

That is expected because uiOptions are JSON-serialized. This is a standard limitation of Astro components and a recommended way to pass props in Astro.

Starlight example works because they use the PagafindUI directly in their client script, bypassing Astro component rendering.

I guess one way to solve for this would be to dispatch a custom DOM event that client handler could add its own callback to. But at the moment I would say you're better of just instantiating PagefindUI yourself in your client script.

[paulrudy]

Okay, that makes sense. Thanks for the explanation!

[paulrudy]

I guess one way to solve for this would be to dispatch a custom DOM event that client handler could add its own callback to. But at the moment I would say you're better of just instantiating PagefindUI yourself in your client script.

@shishkin By the way, if for whatever reason you decide to add the dispatch of a custom DOM event to this integration, I'll be following! It's a minor annoyance that Pagefind adds trailing slashes, but I'd prefer to use your excellent integration. And I don't think I can instantiate PagefindUI myself while still using astro-pagefind, can I?

[shishkin]

@paulrudy This integration consists of two parts: the vite plugin that builds pagefind index and the Astro component that renders PagefindUI. You can totally use one without the other. Just look at the source and borrow what you need.

Also, you might want to check out Astro build.format config option if you want to change URLs from /page/ to /page.html.

[paulrudy]

@shishkin Thanks for explaining, I understand how this integration works now! And I appreciate the suggestion of using build.format, but my preference is to have cleaner-looking URLs (without .html and without a trailing slash, so that they match my page routes).

In case you might think it would be useful to others, I've created a PR #95 that adds an optional prop to strip trailing slashes, using code from Starlight's Search component.