fix(orama): use relative path (#746)

* fix(orama): use relative path

* fixup!

* Update index.jsx

* Fix formatting in NavBar component

Author: avivkeller

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@node-core/doc-kit",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nodejs/doc-kit.git"

package.json

@@ -17,7 +17,7 @@ import SideBar from '#theme/Sidebar';
  */
 export default ({ metadata, headings, readingTime, children }) => (
   <>
-    <NavBar />
+    <NavBar metadata={metadata} />
     <Article>
       <SideBar metadata={metadata} />
       <div>

src/generators/web/ui/components/Layout/index.jsx

@@ -12,7 +12,7 @@ import Logo from '#theme/Logo';
 /**
  * NavBar component that displays the headings, search, etc.
  */
-export default () => {
+export default ({ metadata }) => {
   const [themePreference, setThemePreference] = useTheme();
 
   return (
@@ -21,7 +21,7 @@ export default () => {
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
       navItems={[]}
     >
-      <SearchBox />
+      <SearchBox pathname={metadata.path} />
       <ThemeToggle
         onChange={setThemePreference}
         currentTheme={themePreference}

src/generators/web/ui/components/NavBar.jsx

@@ -10,8 +10,8 @@ import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
 import styles from './index.module.css';
 import useOrama from '../../hooks/useOrama.mjs';
 
-const SearchBox = () => {
-  const client = useOrama();
+const SearchBox = ({ pathname }) => {
+  const client = useOrama(pathname);
 
   return (
     <SearchModal client={client} placeholder="Start typing...">

src/generators/web/ui/components/SearchBox/index.jsx

@@ -1,10 +1,14 @@
 import { create, search, load } from '@orama/orama';
 import { useState, useEffect } from 'react';
 
+import { relative } from '../../../../utils/url.mjs';
+
 /**
  * Hook for initializing and managing Orama search database
+ *
+ * @param {string} pathname - The current page's path (e.g., '/api/fs')
  */
-export default () => {
+export default pathname => {
   const [client, setClient] = useState(null);
 
   useEffect(() => {
@@ -22,7 +26,7 @@ export default () => {
     setClient(db);
 
     // Load the search data
-    fetch('orama-db.json')
+    fetch(relative('/orama-db.json', pathname))
       .then(response => response.ok && response.json())
       .then(data => load(db, data));
   }, []);