Fix search path in browser during deployment

Author: amrit110

catalog/components/search-bar.tsx

@@ -22,7 +22,11 @@ export default function SearchBar() {
   useEffect(() => {
     // Find the hero-search container and render Pagefind there
     const heroSearchContainer = document.getElementById("hero-search");
-    const basePath = getBasePath();
+
+    // Detect base path from the current page URL
+    // If we're on GitHub Pages, the path will be /implementation-catalog/...
+    const currentPath = window.location.pathname;
+    const basePath = currentPath.startsWith('/implementation-catalog') ? '/implementation-catalog' : '';
 
     if (typeof window !== "undefined" && heroSearchContainer) {
       // Load Pagefind CSS dynamically

catalog/lib/utils.ts

@@ -2,9 +2,15 @@
  * Get the base path for the application
  * Returns '/implementation-catalog' in production (GitHub Pages)
  * Returns '' in development
+ *
+ * Note: This checks for the environment variable at build time.
+ * Next.js replaces process.env.NEXT_PUBLIC_* at build time.
  */
 export function getBasePath(): string {
-  return process.env.NEXT_PUBLIC_BASE_PATH === 'true' ? '/implementation-catalog' : '';
+  // Check if we're in production mode (GitHub Pages)
+  // The NEXT_PUBLIC_BASE_PATH env var is set during build
+  const isProduction = process.env.NEXT_PUBLIC_BASE_PATH === 'true';
+  return isProduction ? '/implementation-catalog' : '';
 }
 
 /**