Pagefind: the New Rust-Based Search Tool (with Astro)

[@jokerrb6040]

This is gold for documentation websites!!

[@CodinginPublic]

Seriously!

[@CookingForAlba-qh8nq]

Quickly becoming the de-facto source for everything Astro.

[@CodinginPublic]

🙏

[@charliecoppinger]

Liam Bigelow is a king 👑 great video, subscribed!

[@CodinginPublic]

Liam is 🔥 thanks for the sub!

[@jitxhere]

Wow this is awesome. Gonna try this. Thanks for the easy to follow tutorial

[@CodinginPublic]

You’re welcome 😊 glad it was a help!

[@zacharystout8573]

I can't seem to get this to work. I'm deploying with vercel and each time I get the same error: Error: Pagefind wasn't able to build an index. Most likely, the directory passed to Pagefind was empty or did not contain any html files.  ELIFECYCLE  Command failed with exit code 1. Error: Command "pnpm run build" exited with 1 Any thoughts?

[@CodinginPublic]

Hmm…I'm not sure off hand. It may be how you’re referencing the pagefind rendered directory?

[@marcogomesrd]

but how can I remove the trailingSlash when doing a search? when I click on a link from the search is giving me a not found because I had not url ending with "/" I tried using data-pagefind-meta="url[href] on my anchor tag but ditn't work.. not sure how to solve this

[@CodinginPublic]

Hmm. Do you have the trailing slash property set in your Astro config?

[@eyallampel]

I'm encountering a wierd issue on my website. I have implemented a search element, which functions correctly as demonstrated in the video. However, I'm facing a problem where the search element disappears after navigating through the site. The only way to get the search element to reappear is by refreshing the main page. No idea why .

[@CodinginPublic]

Are you using page transitions?

[@eyallampel]

@@CodinginPublic Thank you for pointing out the potential issue with page transitions. Your insight was spot on! I am indeed using the Astro framework, and it turns out that the ViewTransitions was to blame for the disappearing search element on my website. Following your hint, I experimented by removing the ViewTransitions, and the search element stopped disappearing. However, I am keen on utilizing ViewTransitions for my site. If you have any further advice on how I might be able to use ViewTransitions without causing the search element to disappear, it would be greatly appreciated.

[@nhendriks]

@@CodinginPublic same thing and yes using view transitions. Solved it this way. seems to work, not sure if it is how it should be fixed though. ```js const searchUI = { init: function () { new PagefindUI({element: "#search", showSubResults: true}); } }; // Runs on initial navigation searchUI.init(); // Runs on view transitions navigation document.addEventListener('astro:after-swap', searchUI.init); ```

[@CodinginPublic]

@@nhendriks nice work! I’m wondering if adding transition:persist to the div you place on the page would be enough? Haven’t tested it though.

[@morispasic]

Try this instead (the min-height styling is to prevent it from jumping on screen every time it loads): function initSearch() { // @ts-ignore new PagefindUI({ element: "#search", showSubResults: true }); } document.addEventListener('astro:page-load', initSearch);

[@robertostringa9254]

Great, and something like this for a headless site ... like Wordpress headless posts ?

[@unity_12]

Please say! Whats is plugin show you errors in code ts?

[@CodinginPublic]

Hmm. I think it’s the Astro extension? Mind sending me a timestamp to an example?

[@unity_12]

Already solved the problem! It's always like this with me)@@CodinginPublic

[@jjaimealeman]

Another Golden Post ⭐ Can wake this try this

[@CodinginPublic]

It’s really amazingly easy!

[@MrIberius13]

Hi chris, I've started using astro thanks to your videos, but i'm struggling with one topic, dynamic routes, for no reason i get a Promise { } undefined node:internal/deps/undici/undici:6630 throw new TypeError("Body is unusable"); ^ TypeError: Body is unusable but searching the api in any other framework/Library it returns just fine. I know its a bit of an ask but is there a way you know how i could get some help?

[@CodinginPublic]

Sounds like you’re forgetting to await? Are you able to compare your code with an example and see if they have an await in the statement?

[@MrIberius13]

@@CodinginPublic and for some context, it returns the data, in the terminal from the fetch res.json() but I think when I return it it says unusable data at position 1. And then when I log the data in the slug, it errors

[@yunhanhuang9304]

Love your video😁

[@CodinginPublic]

So glad you found it helpful!

[@funkologie]

Beautiful 🎉

[@CodinginPublic]

Glad it was a help!

[@MrDermases]

That's interesting. So, if I'm understanding correctly, this is specifically designed for SSG? Does this imply that if I wanted to use pagefind with Next.js, all the sites I want searchable would need to be statically generated? How does Incremental Static Regeneration (ISR) play into this? I know your mostly working with Astro, but pagefind looks really cool, and I am interested to see where else i could use it.

[@CodinginPublic]

They claim “any framework,” but I’m assuming you’d need to statically generate the pages you want indexed? Not sure how ISR plays into that? Sorry! Let me know if you figure out!

[@OnlyJavascript]

first

[@CodinginPublic]

😉