mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-04 12:51:37 -05:00
feat: docsearch integration (#2392)
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Shubham Palriwala
committed by
GitHub
GitHub
parent
95fe94fb7f
commit
18d3985e06
+3
-2
@@ -55,5 +55,6 @@ Zone.Identifier
|
||||
# uploads
|
||||
packages/lib/uploads
|
||||
|
||||
# Pino Logs
|
||||
formbricks.log
|
||||
# Vite Timestamps
|
||||
vite.config.*.timestamp-*
|
||||
|
||||
|
||||
@@ -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=
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"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";
|
||||
@@ -8,7 +9,6 @@ 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">
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
}}
|
||||
/>,
|
||||
|
||||
@@ -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",
|
||||
|
||||
Generated
+3
@@ -67,6 +67,9 @@ importers:
|
||||
'@calcom/embed-react':
|
||||
specifier: ^1.3.2
|
||||
version: 1.3.2(react-dom@18.2.0)(react@18.2.0)
|
||||
'@docsearch/css':
|
||||
specifier: '3'
|
||||
version: 3.6.0
|
||||
'@docsearch/react':
|
||||
specifier: ^3.6.0
|
||||
version: 3.6.0(@algolia/client-search@4.22.0)(@types/react@18.2.74)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0)
|
||||
|
||||
Reference in New Issue
Block a user