Using the API to create a custom UI

[MattFM]

Hello,

I just wanted to make sure that astro-pagefind supports the use of the API to make custom search UIs.

I'm still quite new to Astro and web development, meaning so far, I've not quite understood for the make us of the API in my project. Would it be possible to share a really simple example of how I could use the API to display search results on a separate page (e.g. search.astro) from a simple form?

[shishkin]

If you want to display search results on some page (e.g. search.astro), take a look at pre-filled search results example.

If you want to use Pagefind's Search API, you can import pagefind library and use it directly. This astro-pagefind doesn't improve on or hinder that use case.

Otherwise, maybe share an example of a website, which behavior you are trying to replicate?
If you mean something else, then I didn't understand that.

[MattFM]

Thanks for your reply.

I'm basically trying to replicate a search engine like Google. Basic search form on one page, user enters their search query, user then gets directed to another page and is shown a list of results. I don't want to use the default Pagefind UI. Instead, I want to create my own UI. I've not yet been able to find an example of someone doing this that I can replicate.

Is it possible to somehow utilise the pre-filled search results example to then pull out data (e.g. page title, url, image etc.) and then create a loop?

[shishkin]

Then you won't use Astro component from this extension but build your own directly using pagefind search API.

[MattFM]

Okay, understood.

Should I install the main pagefind package or can I access the pagefind API via your extension?

[shishkin]

Depending on your package manager. pagefind is a dependency of astro-pagefind. NPM allows importing transitive dependencies, but PNPM doesn't.

[MattFM]

I'm using NPM. I think I'm going to need to seek advice from elsewhere as I really don't understand how to get this working. Thanks though for your replies.

[shishkin]

I think so too. Try to use pagefind directly and learn from their docs. This extension can help you get the index as part of your astro build. And take a look at the sources of this extension too.