feat: docsearch integration (formbricks#2392)

Co-authored-by: Matthias Nannt <[email protected]>

.gitignore

@@ -55,5 +55,6 @@ Zone.Identifier
 # uploads
 packages/lib/uploads
 
-# Pino Logs
-formbricks.log
+# Vite Timestamps
+vite.config.*.timestamp-*
+

apps/formbricks-com/.env.example

@@ -4,3 +4,7 @@ NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID=
 
 # Strapi API Key
 STRAPI_API_KEY=
+
+NEXT_PUBLIC_DOCSEARCH_APP_ID=
+NEXT_PUBLIC_DOCSEARCH_API_KEY=
+NEXT_PUBLIC_DOCSEARCH_INDEX_NAME=

apps/formbricks-com/components/docs/Header.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { FooterLogo } from "@/components/shared/Logo";
+import { Search } from "@/components/shared/Search";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";
 
 import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
-import { MobileSearch, Search } from "./Search";
 import { ThemeToggle } from "./ThemeToggle";
 
 function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
@@ -57,7 +57,9 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
           (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-slate-900/7.5 dark:bg-white/7.5"
         )}
       />
-      <Search />
+      <div className="hidden md:block">
+        <Search />
+      </div>
       <div className="flex items-center gap-5 lg:hidden">
         <MobileNavigation />
         <Link href="/" aria-label="Home">
@@ -75,7 +77,9 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
         </nav>
         <div className="hidden md:block md:h-5 md:w-px md:bg-slate-900/10 md:dark:bg-white/15" />
         <div className="flex gap-4">
-          <MobileSearch />
+          <div className="block md:hidden">
+            <Search />
+          </div>
           <ThemeToggle />
         </div>
         <div className="hidden min-[416px]:contents">

apps/formbricks-com/components/shared/Search.tsx

@@ -1,6 +1,7 @@
+import "@docsearch/css";
 import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
+import { useTheme } from "next-themes";
 import Link from "next/link";
-import Router from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
@@ -28,6 +29,9 @@ function SearchIcon(props: any) {
 }
 
 export function Search() {
+  let { resolvedTheme } = useTheme();
+  let isLightMode = resolvedTheme === "light";
+
   let [isOpen, setIsOpen] = useState(false);
   let [modifierKey, setModifierKey] = useState<string>();
 
@@ -45,11 +49,53 @@ export function Search() {
     setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ");
   }, []);
 
+  useEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = ` 
+      :root {
+        --docsearch-primary-color: ${isLightMode ? "#029E94" : "#1F7066"};
+        --docsearch-modal-background: ${isLightMode ? "#FFFFFF" : "#121212"};
+        --docsearch-text-color: ${isLightMode ? "#121212" : "#FFFFFF"};
+        --docsearch-hit-background: ${isLightMode ? "#FFFFFF" : "#111111"};
+        --docsearch-footer-background: ${isLightMode ? "#EEEEEE" : "#121212"};
+        --docsearch-searchbox-focus-background: ${isLightMode ? "#D8F6F4" : "#121212"};
+        --docsearch-modal-shadow: ${isLightMode ? "inset 1px 1px 0 0 hsla(0,0%,100%,0.5), 0 3px 8px 0 #D8F6F4" : "inset 1px 1px 0 0 hsla(0,0%,100%,0.5), 0 3px 8px 0 #808080"};
+      }
+      .DocSearch-Hit-title {
+        color: ${isLightMode ? "#000000" : "#FFFFFF"};
+      }
+      .DocSearch-Modal {
+        margin: 16rem auto auto;
+      }
+      [type='search']:focus {
+        --tw-ring-color: none;
+      }
+      .DocSearch-Button-Container {
+        width: 200px !important;
+      }
+      .DocSearch-Hit-Container {
+        color: var(--color-text-primary);
+      }
+      .DocSearch-Input {
+        outline: none;
+      }
+      .DocSearch-Screen-Icon {
+        visibility: hidden;
+      }
+      
+    `;
+    document.head.appendChild(style);
+
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, [isLightMode]);
+
   return (
     <>
       <button
         type="button"
-        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-60 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 xl:w-80 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500"
+        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-60 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 xl:w-80 dark:text-slate-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
         onClick={onOpen}>
         <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 md:group-hover:fill-slate-400 dark:fill-slate-500" />
         <span className="sr-only md:not-sr-only md:pl-2 md:text-slate-500 md:dark:text-slate-400">
@@ -71,7 +117,7 @@ export function Search() {
             hitComponent={Hit}
             navigator={{
               navigate({ itemUrl }) {
-                Router.push(itemUrl);
+                window.location.href = itemUrl;
               },
             }}
           />,

apps/formbricks-com/package.json

@@ -14,13 +14,13 @@
   "dependencies": {
     "@algolia/autocomplete-core": "^1.17.0",
     "@calcom/embed-react": "^1.3.2",
+    "@docsearch/css": "3",
     "@docsearch/react": "^3.6.0",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@formbricks/ui": "workspace:*",
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
-    "lucide-react": "^0.356.0",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
@@ -36,6 +36,7 @@
     "framer-motion": "11.0.13",
     "lottie-web": "^5.12.2",
     "lucide": "^0.350.0",
+    "lucide-react": "^0.356.0",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
     "next": "14.1.3",