feat: suport doc search (#7)

* feat: add doc search for algolia

* build: remove file

Author: json-q

.env.example

@@ -0,0 +1,4 @@
+# https://docsearch.algolia.com/apply/
+NEXT_PUBLIC_DOC_SEARCH_APP_ID=
+NEXT_PUBLIC_DOC_SEARCH_INDEX_NAME=
+NEXT_PUBLIC_DOC_SEARCH_API_KEY=

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

components/layouts/page-header/command-menu.tsx

@@ -0,0 +1,56 @@
+'use client';
+import Link from 'next/link';
+import { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+import siteConfig from '~/config/siteConfig';
+import { Button } from '~/components/ui/button';
+import '@docsearch/css';
+
+export default function AlgoliaDocSearch() {
+  const [isOpen, setIsOpen] = useState(false);
+  const searchButtonRef = useRef<HTMLButtonElement>(null);
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    searchButtonRef,
+  });
+
+  return (
+    <>
+      <Button
+        onClick={() => setIsOpen(true)}
+        variant="outline"
+        className="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-32 lg:w-48 xl:w-56"
+      >
+        <span className="inline-flex">Try Search</span>
+        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialScrollY={window.scrollY}
+            appId={siteConfig.docSearch.appId}
+            apiKey={siteConfig.docSearch.apiKey}
+            indexName={siteConfig.docSearch.indexName}
+            onClose={onClose}
+            placeholder="搜索文章内容"
+            hitComponent={({ hit, children }) => <Link href={hit.url}>{children}</Link>}
+          />,
+          document.body,
+        )}
+    </>
+  );
+}

components/layouts/page-header/doc-search.tsx

@@ -1,10 +1,10 @@
 import { Button } from '~/components/ui/button';
-import CommandMenu from './command-menu';
 import MobileNav from './mobile-nav';
 import PCNav from './pc-nav';
 import Link from 'next/link';
 import siteConfig from '~/config/siteConfig';
 import ThemeSwitcher from './theme-switcher';
+import AlgoliaDocSearch from './doc-search';
 
 export default function PageHeader() {
   return (
@@ -15,7 +15,7 @@ export default function PageHeader() {
           <MobileNav />
           <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
             <div className="w-full flex-1 md:w-auto md:flex-none">
-              <CommandMenu />
+              <AlgoliaDocSearch />
             </div>
             <nav className="flex items-center gap-0.5">
               {siteConfig.externalLink.map((item) => (

components/layouts/page-header/index.tsx

@@ -27,6 +27,11 @@ const siteConfig = {
     //   icon: Gitee,
     // },
   ],
+  docSearch: {
+    appId: process.env.NEXT_PUBLIC_DOC_SEARCH_APP_ID || '',
+    indexName: process.env.NEXT_PUBLIC_DOC_SEARCH_INDEX_NAME || '',
+    apiKey: process.env.NEXT_PUBLIC_DOC_SEARCH_API_KEY || '',
+  },
 };
 
 export default siteConfig;

config/siteConfig.ts

@@ -2,6 +2,10 @@
   "name": "jsonq",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=18.18"
+  },
   "scripts": {
     "dev": "run-p watch generate dev:turbo ",
     "dev:turbo": "next dev --turbopack",
@@ -14,6 +18,8 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@docsearch/css": "^3.9.0",
+    "@docsearch/react": "^3.9.0",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",