feat: focus search input on page load

[vighnesh153]

When a user opens jsr.io, the page shows a big input element which is used to search for packages. It appears to be the primary call to action element and I believe by default, it should be focused on page load because most of the times, a user would visit jsr to search for a package.

This behaviour would also align with google.com

[CLAassistant]

All committers have signed the CLA.

[lucacasonato]

This currently affects all pages with a package search box, not just the home page (so for example https://jsr.io/packages and https://jsr.io/@std/fs). Can you change this to only apply to the home page?

Also, how does this work on mobile? I wouldn't want the keyboard to pop open automatically on mobile on page load.

[vighnesh153]

Thank you, @lucacasonato, for your feedback. I've implemented a check to ensure focus is only requested when location.pathname is equal to "/". Alternatively, I could leverage the jumbo prop for this purpose, as it seems to be exclusively set to true on the homepage. I'm open to your thoughts on which approach would be preferable.

In regards to mobile devices, I tested this on my mobile device (pixel model) and found that while focus is placed on the input box, the keyboard does not automatically appear. However, I cannot guarantee this behavior is consistent across all mobile devices. As a precaution, I've added a check to account for mobile devices as well.