feat: DocSearch

components/DocSearch/docSearch.css

@@ -0,0 +1,84 @@
+.docSearch-btn {
+  --search-size: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--search-size);
+  white-space: nowrap;
+  background: var(--ds-gray-100);
+  border-radius: 6px;
+  padding: 0 6px 0 8px;
+  font-size: 14px;
+  font-family: var(--font-sans-fallback);
+  color: var(--ds-gray-700);
+  transition-property: background, color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+  box-sizing: border-box;
+}
+.docSearch-btn[data-variant="large"] {
+  width: 180px;
+  @apply border border-gray-600 focus:border-0 rounded-full
+}
+.docSearch-btn[data-variant="medium"] {
+  display: none;
+  @apply border border-gray-600 focus:border-0 rounded-full
+}
+.docSearch-btn[data-variant="small"] {
+  padding: 0;
+  justify-content: center;
+  width: var(--search-size);
+  background: none;
+  color: var(--ds-gray-1000);
+  display: none;
+}
+.docSearch-btn[data-variant="small"]:hover {
+  color: var(--ds-gray-1000);
+}
+.docSearch-btn[data-variant="small"] svg {
+  width: 24px;
+  height: 24px;
+}
+.docSearch-btn:hover {
+  color: var(--ds-gray-800);
+  background: var(--ds-gray-200);
+}
+.docSearch-btn kbd {
+  height: 20px;
+  line-height: 20px;
+  border-radius: 6px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: var(--ds-gray-1000);
+  background: var(--ds-background-100);
+  font-weight: 500;
+  font-family: inherit;
+  box-shadow: var(--ds-shadow-border);
+  border: none;
+  margin-left: 16px;
+}
+.DocSearch-Commands {
+  display: none;
+}
+
+.DocSearch-Container {
+  z-index: 2000;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+@media (max-width: 1250px) {
+  .docSearch-btn[data-variant="large"] {
+    display: none;
+  }
+  .docSearch-btn[data-variant="medium"] {
+    display: flex;
+  }
+}
+@media (max-width: 1100px) {
+  .docSearch-btn[data-variant="medium"] {
+    display: none;
+  }
+  .docSearch-btn[data-variant="small"] {
+    display: flex;
+  }
+}

components/DocSearch/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { docSearchConfig } from "@/config/docSearch";
+import "@docsearch/css";
+import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
+import Link from "next/link";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { IoIosSearch } from "react-icons/io";
+import "./docSearch.css";
+
+export default function CustomDocSearch() {
+  const { appId, indexName, apiKey } = docSearchConfig.docSearch;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMac, setIsMac] = useState(false);
+  const searchButtonRef = useRef<HTMLButtonElement>(null);
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    searchButtonRef,
+  });
+
+  // 添加检测操作系统的效果
+  useEffect(() => {
+    setIsMac(navigator.platform.toUpperCase().indexOf("MAC") >= 0);
+  }, []);
+
+  return (
+    <>
+      <button className="docSearch-btn" data-variant="large" onClick={onOpen}>
+        搜索文档<kbd>{isMac ? "⌘K" : "Ctrl+K"}</kbd>
+      </button>
+      <button className="docSearch-btn" data-variant="medium" onClick={onOpen}>
+        搜索<kbd>{isMac ? "⌘K" : "Ctrl+K"}</kbd>
+      </button>
+      <button
+        className="docSearch-btn mr-2 hover:bg-accent border border-gray-300"
+        data-variant="small"
+        onClick={onOpen}
+      >
+        <IoIosSearch />
+      </button>
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialScrollY={window.scrollY}
+            appId={appId}
+            apiKey={apiKey}
+            indexName={indexName}
+            onClose={onClose}
+            placeholder="搜索文档"
+            hitComponent={({ hit, children }) => (
+              <Link href={hit.url}>{children}</Link>
+            )}
+          />,
+          document.body
+        )}
+    </>
+  );
+}

components/header/Header.tsx

@@ -1,4 +1,5 @@
 "use client";
+import DocSearch from "@/components/DocSearch";
 import HeaderLinks from "@/components/header/HeaderLinks";
 import HeaderMenu from "@/components/header/HeaderMenu";
 import LogoLink from "@/components/header/LogoLink";
@@ -22,6 +23,7 @@ const Header = () => {
 
         <div className="hidden md:flex items-center h-12 w-full max-w-fit rounded-full px-2 bg-content1">
           {/* <SearchBar /> */}
+          <DocSearch />
           <HeaderLinks />
         </div>
 
@@ -57,6 +59,7 @@ const Header = () => {
                 </div>
                 {/* <SearchBar /> */}
                 <div className="flex items-center gap-x-5 justify-between">
+                  <DocSearch />
                   <HeaderLinks />
                 </div>
               </div>

config/docSearch.ts

@@ -0,0 +1,14 @@
+interface DocSearchSiteConfig {
+  docSearch: {
+    appId: string;
+    indexName: string;
+    apiKey: string;
+  };
+}
+export const docSearchConfig: DocSearchSiteConfig = {
+  docSearch: {
+    appId: "SVTB5NEGPE",
+    indexName: "gapis",
+    apiKey: "3000ab916ffc4a9b600d5f7b69778da5",
+  },
+}

package.json

@@ -10,6 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@docsearch/css": "^3.7.0",
+    "@docsearch/react": "^3.7.0",
     "@giscus/react": "^3.0.0",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.1.1",