feat(ports): add search functionality

[sgoudham]

Finally getting the ball rolling on implementing the much needed search bar 🎉

I'm a bit unhappy with how much the bundle size increases as we need to render the icons on the client, I feel there must be better approaches so I'd appreciate if anyone had any thoughts on a solid approach to import simple-icons, ph-icons and custom icons that we've created ourselves.

TODO:

• Suspense behaviour while the icons / components load on the client. (help wanted!) (no longer a big concern, improvements are still welcome)
• Refactor/tidy up of importing icons. Currently using both svelte icons and astro icon, can we deduplicate it or is it actually less performant if we decide to drop astro icons for all the static pages?
• Smooth transitions to make search experience feel good. (not planned anymore)
• Separate filters for categories. (separate PR)
• Sync search bar with URL query params
• CSS for everything
• Set the viewheight on the ports page so that few results doesn't result in the footer being brought up.

More than happy to accept PRs that are aligned with the TODO items above!

---

Closes #32

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 17, 2024 0:39am

[sgoudham]

There's some pretty big layout shifts on the initial page load but searching works as intended.

[sgoudham]

Layout shift has been fixed, basically ready to ship.

Somewhat concerned about the performance on mobile but I don't think it's too big a problem right now.