Add search capabilities to documentation (#522)

this pr adds the following:

1. non "api-reference" or "sdk-reference" documentation files are
indexed on build time and made full text searchable via `flexsearch`
2. `<Search />` component is added to the docs navigation on desktop &
mobile accordingly
3. preview snippets are visualised for each `SearchResult`

apps/web/src/components/Header.tsx

@@ -61,7 +61,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
   const bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
 
   const pathname = usePathname()
-  // const isDocs = pathname?.startsWith('/docs')
   const isAuth = pathname?.startsWith('/auth')
 
   useEffect(() => {
@@ -91,10 +90,9 @@ export const Header = forwardRef(function Header({ className }, ref) {
         className={clsx(
           'absolute inset-x-0 top-full h-px transition',
           (isInsideMobileNavigation || !mobileNavIsOpen) &&
-          'bg-zinc-900/7.5 dark:bg-white/7.5'
+            'bg-zinc-900/7.5 dark:bg-white/7.5'
         )}
       />
-
       {/* Desktop logo */}
       <div className="relative top-1 hidden items-center justify-start lg:flex gap-4">
         <Link href="/" aria-label="Home">
@@ -113,7 +111,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
           />
         </div>
       </div>
-      {/* {isDocs && <Search />} */}
 
       {/* Mobile logo + burger menu */}
       <div className="flex items-center gap-5 lg:hidden">
@@ -134,7 +131,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
           />
         </div>
       </div>
-
       {!isAuth && (
         <div className="flex items-center gap-4">
           <nav className="hidden md:block">

apps/web/src/components/Layout.tsx

@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation'
 import { Footer } from '@/components/Footer'
 import { DocsNavigation, SdkRefNavigation } from '@/components/Navigation'
 import { Section, SectionProvider } from '@/components/SectionProvider'
+import { Search } from './Search'
 
 export function Layout({
   children,
@@ -52,7 +53,8 @@ export function Layout({
                 lg:pb-4
               "
               >
-                <div className="hidden lg:block lg:mt-4">
+                <div className="hidden space-y-4 lg:block lg:mt-4">
+                  <Search />
                   {isApiRef ? <SdkRefNavigation /> : <DocsNavigation />}
                 </div>
               </div>

apps/web/src/components/MobileBurgerMenu.tsx

@@ -15,6 +15,7 @@ import { create } from 'zustand'
 
 import { Header } from '@/components/Header'
 import { DocsNavigation, SdkRefNavigation } from '@/components/Navigation'
+import { Search } from './Search'
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -58,6 +59,7 @@ function MobileNavigationDialog({
   const initialPathname = useRef(pathname).current
   const initialSearchParams = useRef(searchParams).current
   const isApiRef = pathname?.startsWith('/docs/sdk-reference')
+  const isDocs = pathname?.startsWith('/docs')
 
   useEffect(() => {
     if (pathname !== initialPathname || searchParams !== initialSearchParams) {
@@ -123,8 +125,9 @@ function MobileNavigationDialog({
           >
             <motion.div
               layoutScroll
-              className="fixed bottom-0 left-0 top-14 w-full overflow-y-auto overflow-x-hidden bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 dark:bg-zinc-900 dark:ring-zinc-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10"
+              className="fixed bottom-0 left-0 top-14 space-y-4 w-full overflow-y-auto overflow-x-hidden bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 dark:bg-zinc-900 dark:ring-zinc-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10"
             >
+              {isDocs && <Search />}
               {isApiRef ? <SdkRefNavigation /> : <DocsNavigation />}
             </motion.div>
           </Transition.Child>