Add search to Dev Docs home page

[pedrosousa]

• Added Algolia config with no facetFilters value to developers.cloudflare.com/docs-config.js to enable global search.
• Created a <SiteSearch> component specific for developers.cloudflare.com, very similar to the <DocsSearch> one in the docs engine, with the following differences:
  • Had to run useStaticQuery locally due to a bug that causes issues on relative imports, just like in the <SEO> component for developers.cloudflare.com.
  • Clicking a search result is handled differently. It navigates to the correct page (full page refresh), since the destination is outside the current GatsbyJS project.
  • Copied and adapted the original CSS so that the <SiteSearch> component fits the top header in developers.cloudflare.com. Also, disabled the blur effect in the site header because it interfered with the blur effect in the search results.
• Added the new <SiteSearch> component to the page header.
• Navigation links in the page header ("Docs" / "Sponsorships" / "Open Source" / "Newsletter") are now hidden when the width is below 1024px to make room for the search component.

[jrf0110]

@gganch can you pull this branch down and test locally?

[gganch]

@pedrosousa @jrf0110 I just tested it locally and everything seems to be working perfectly. Love that there is a global search now, pretty cool!

But on mobile it is a little hard to know that there is a search option

can we put the 'search docs...' or something similar to let users know that you can search??

Pedro would you mind updating the description of this PR to give a little more context what you implemented?

[pedrosousa]

But on mobile it is a little hard to know that there is a search option

can we put the 'search docs...' or something similar to let users know that you can search??

Regarding the mobile version, I followed the current implementation for each product's documentation, which only displays the icon until you click it:

I'll see what I can do about this.

[KimJ15]

@pedrosousa I think we can iterate and improve the mobile experience as a different PR given all search experiences would need to be updated.

[pedrosousa]

Yes, I agree.
@gganch I'll create a separate ticket for addressing this improvement. It will affect all product documentation areas, since they all share the same UI issue you identified.

[pedrosousa]

@jrf0110 Since GG is OOO, can you approve this PR?

[jrf0110]

Sorry, @pedrosousa - I never submitted this review. I added some comments a while back and just let them sit in pending.

[gganch]

it looks pretty good to me! I am trying to approve but I cant it seems like...

[jrf0110]

Tested in Chrome, Firefox, and Edge. LGTM