docs,api-ref: added search filters (#4830)

* initial implementation of search modal

* added hit and search suggestions

* added support for multiple indices

* updated sample env

* added close when click outside dropdown

* test for mobile

* added mobile design

* added shortcut

* dark mode fixes

* added search to docs

* added plugins filter

* added React import

* moved filters to configurations

* handled error on page load

* change suggestion text

* removed hits limit

* handle select all

* open link in current tab

* change highlight colors

* added support for shortcuts + auto focus

* change header and footer

* redesigned search ui

www/api-reference/app/api/[area]/layout.tsx

@@ -10,7 +10,10 @@ import { Roboto_Mono } from "next/font/google"
 import AnalyticsProvider from "@/providers/analytics"
 import NavbarProvider from "@/providers/navbar"
 import ModalProvider from "../../../providers/modal"
+import SearchProvider from "../../../providers/search"
 import { ScrollControllerProvider } from "../../../hooks/scroll-utils"
+import MobileProvider from "../../../providers/mobile"
+import PageLoadingProvider from "../../../providers/page-loading"
 
 export const metadata = {
   title: "Medusa API Reference",
@@ -46,23 +49,29 @@ export default function RootLayout({
         <AnalyticsProvider>
           <ModalProvider>
             <ColorModeProvider>
-              <BaseSpecsProvider>
-                <SidebarProvider>
-                  <NavbarProvider>
-                    <ScrollControllerProvider>
-                      <div className="w-full">
-                        <Navbar />
-                        <div className="max-w-xxl mx-auto flex w-full px-1.5">
-                          <Sidebar />
-                          <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
-                            {children}
-                          </main>
-                        </div>
-                      </div>
-                    </ScrollControllerProvider>
-                  </NavbarProvider>
-                </SidebarProvider>
-              </BaseSpecsProvider>
+              <PageLoadingProvider>
+                <BaseSpecsProvider>
+                  <SidebarProvider>
+                    <NavbarProvider>
+                      <ScrollControllerProvider>
+                        <SearchProvider>
+                          <MobileProvider>
+                            <div className="w-full">
+                              <Navbar />
+                              <div className="max-w-xxl mx-auto flex w-full px-1.5">
+                                <Sidebar />
+                                <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
+                                  {children}
+                                </main>
+                              </div>
+                            </div>
+                          </MobileProvider>
+                        </SearchProvider>
+                      </ScrollControllerProvider>
+                    </NavbarProvider>
+                  </SidebarProvider>
+                </BaseSpecsProvider>
+              </PageLoadingProvider>
             </ColorModeProvider>
           </ModalProvider>
         </AnalyticsProvider>

www/api-reference/app/api/algolia/route.tsx

@@ -15,7 +15,7 @@ export async function GET() {
     process.env.ALGOLIA_WRITE_API_KEY || ""
   )
   const index = algoliaClient.initIndex(
-    process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME || ""
+    process.env.NEXT_PUBLIC_API_ALGOLIA_INDEX_NAME || ""
   )
 
   // retrieve tags and their operations to index them