feat: integrates Orama for search

[micheleriva]

As discussed with @brookslybrand, we're offering free search with Orama on the React Router website :)

This PR still includes development URLs and API keys, which are commit-safe. We can move them to the .env file if you prefer, but I don't personally think it's necessary.

We're still fixing a couple of small things, but you can test this locally already.

[brookslybrand]

Hey @micheleriva, I'm not able to push changes because your branch is main as well

Just wanted to say that I notice we're getting hydration errors. Not a big deal, we have the same problem on remix.run and we use just useHydrated to handle them.

// app/ui/utils.ts

import { useEffect, useState } from "react";

let hydrating = true;
export function useHydrated() {
  let [hydrated, setHydrated] = useState(() => !hydrating);
  useEffect(() => {
    hydrating = false;
    setHydrated(true);
  }, []);
  return hydrated;
}

// app/routes/$lang.$ref.tsx

{hydrated ? (
  <SearchButton {...SearchButtonParams} colorScheme={colorScheme} />
) : (
  <div className="h-[42px]" />
)}

I went ahead and deployed to staging with this change. It doesn't seem like the class names passed into className really effect the styles of the button much. For example, the margins are still 0.

Overall I really like what y'all have, it's just a little tough to sell without being able to adjust the styles and make it look nice. I wonder if it's easier to just create our own button and wire it up instead of importing SearchButton. Also, I'm noticing an occasional weird flashing of the styles. It was worse before the hydration fix, but still not super sure why sometimes it seems to go fullWidth and dark mode after briefly showing the wrong styles

flash.mov

[micheleriva]

@brookslybrand I tried adding a rounded-full class to the button to make it match other button styles and yes, I confirm it's not working. Let me double-check that with @g-francesca!

I fixed the hydration errors following your suggestion. I also believe you can create a custom button, the SearchBox is a web component that listens to a very specific custom event or signals to open.

You can trigger it by using React props like:

<SearchBox {...SearchBoxParams} show={myBooleanOpenState} />