fixup!

Author: avivkeller

apps/site/components/withSearch.tsx

@@ -49,38 +49,35 @@ export const addPrefixToDocs = <T extends SerializedOramaDb>(
   };
 };
 
+const loadOrama = async () => {
+  const db = create({
+    schema: {
+      title: 'string',
+      description: 'string',
+      href: 'string',
+      siteSection: 'string',
+    },
+  });
+
+  const indexes = await Promise.all(
+    Object.entries(ORAMA_DB_URLS).map(async ([key, url]) => {
+      const response = await fetch(url);
+      const fetchedDb = (await response.json()) as SerializedOramaDb;
+      return addPrefixToDocs(fetchedDb, `/${key}`);
+    })
+  );
+
+  for (const index of indexes) {
+    await insertMultiple(db, Object.values(index.docs.docs) as Array<never>);
+  }
+
+  return save(db);
+};
+
 const WithSearch: FC = () => {
   const t = useTranslations();
 
-  // `useOrama` expects an initializer that returns serialized RawData.
-  // We build a temporary DB, populate it from every configured index, then
-  // serialize it so the hook can `load()` it into its own client instance.
-  const client = useOrama(async () => {
-    const db = create({
-      schema: {
-        title: 'string',
-        description: 'string',
-        href: 'string',
-        siteSection: 'string',
-      },
-    });
-
-    // Kick off every fetch concurrently — network latency, not CPU, is the
-    // bottleneck here, so serializing these would waste ~N× round-trip time.
-    const indexes = await Promise.all(
-      Object.entries(ORAMA_DB_URLS).map(async ([key, url]) => {
-        const response = await fetch(url);
-        const fetchedDb = (await response.json()) as SerializedOramaDb;
-        return addPrefixToDocs(fetchedDb, `/${key}`);
-      })
-    );
-
-    for (const index of indexes) {
-      await insertMultiple(db, Object.values(index.docs.docs) as Array<never>);
-    }
-
-    return save(db);
-  });
+  const client = useOrama(loadOrama);
 
   return (
     <SearchBox

docs/technologies.md

@@ -11,6 +11,7 @@ This document provides an overview of the technologies used in the Node.js websi
     - [PostCSS Plugins](#postcss-plugins)
   - [Content Management](#content-management)
     - [Content Processing Plugins](#content-processing-plugins)
+  - [Search](#search)
   - [UI Components](#ui-components)
     - [Why Radix UI?](#why-radix-ui)
   - [Internationalization](#internationalization)
@@ -91,6 +92,12 @@ We chose Next.js because it is:
 - `rehype-autolink-headings`: Automatic anchor links for headings
 - `rehype-slug`: Automatic ID generation for headings
 
+### Search
+
+- **[Orama](https://orama.com/)**: Local full-text search engine used for site search
+- Prebuilt Learn and API documentation indexes are fetched client-side and merged into a single local search database
+- Search remains self-contained in the site deployment without depending on Orama Cloud at runtime
+
 ### UI Components
 
 - **[Radix UI](https://www.radix-ui.com/)**: Accessible, unstyled component primitives

packages/ui-components/src/Common/Search/index.module.css

@@ -14,62 +14,43 @@
     border-t
     border-neutral-200
     bg-neutral-100
-    p-4;
-
-  :where([data-theme='dark'], [data-theme='dark'] *) & {
-    @apply border-neutral-900
-      bg-neutral-950;
-  }
-
-  @media (min-width: 1024px) {
-    @apply justify-between
-      rounded-b-xl;
-  }
+    p-4
+    lg:justify-between
+    lg:rounded-b-xl
+    dark:border-neutral-900
+    dark:bg-neutral-950;
 }
 
 .shortcutWrapper {
   @apply hidden
     items-center
-    gap-2;
-
-  @media (min-width: 1024px) {
-    @apply flex;
-  }
+    gap-2
+    lg:flex;
 }
 
 .shortcutItem {
   @apply flex
     items-center
     gap-2
     text-xs
-    text-neutral-800;
-
-  :where([data-theme='dark'], [data-theme='dark'] *) & {
-    @apply text-neutral-600;
-  }
+    text-neutral-800
+    dark:text-neutral-600;
 }
 
 .shortcutKey {
   @apply rounded-md
     bg-neutral-200
     p-1
     font-mono
-    text-xs;
-
-  :where([data-theme='dark'], [data-theme='dark'] *) & {
-    @apply bg-neutral-900;
-  }
+    text-xs
+    dark:bg-neutral-900;
 
   svg {
-    @apply h-4
-      w-4;
+    @apply size-4;
   }
 }
 
 .shortcutLabel {
-  @apply text-neutral-800;
-
-  :where([data-theme='dark'], [data-theme='dark'] *) & {
-    @apply text-neutral-600;
-  }
+  @apply text-neutral-800
+    dark:text-neutral-600;
 }