[v4] search tweaks (#3852)

* search tweaks * search tweaks * search tweaks * search tweaks * search tweaks * search tweaks * upd * upd
shuding · Dec 23, 2024 · 242e0d0 · 242e0d0
1 parent 3fc12a0
commit 242e0d0
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 61 deletions.
diff --git a/.changeset/beige-owls-drum.md b/.changeset/beige-owls-drum.md
@@ -0,0 +1,7 @@
+---
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
+"nextra": patch
+---
+
+search tweaks
diff --git a/docs/package.json b/docs/package.json
@@ -24,7 +24,7 @@
     "@tailwindcss/postcss": "^4.0.0-beta.8",
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.23",
-    "pagefind": "^1.1.1",
+    "pagefind": "^1.3.0",
     "tailwindcss": "^4.0.0-beta.8"
   },
   "browserslist": [

diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -17,6 +17,6 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "pagefind": "^1.1.1"
+    "pagefind": "^1.3.0"
   }
 }
diff --git a/examples/docs/package.json b/examples/docs/package.json
@@ -16,6 +16,6 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "pagefind": "^1.1.1"
+    "pagefind": "^1.3.0"
   }
 }
diff --git a/examples/swr-site/package.json b/examples/swr-site/package.json
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@next/bundle-analyzer": "^14.2.13",
     "@tailwindcss/postcss": "^4.0.0-beta.8",
-    "pagefind": "^1.1.1",
+    "pagefind": "^1.3.0",
     "tailwindcss": "^4.0.0-beta.8"
   },
   "browserslist": [

diff --git a/packages/esbuild-react-compiler-plugin/src/index.ts b/packages/esbuild-react-compiler-plugin/src/index.ts
@@ -14,13 +14,18 @@ const DEFAULT_REACT_COMPILER_CONFIG = {
       filename: string,
       result: { kind: 'CompileError' | 'CompileSuccess' }
     ) {
+      const relativeFilePath = path.relative(process.cwd(), filename)
       if (result.kind === 'CompileSuccess') {
-        console.info('🚀 File', filename, 'was optimized with react-compiler')
+        console.info(
+          '🚀 File',
+          relativeFilePath,
+          'was optimized with react-compiler'
+        )
         return
       }
       console.error(
         '❌ File',
-        filename,
+        relativeFilePath,
         'was not optimized with react-compiler'
       )
       console.error(result)

diff --git a/packages/nextra-theme-docs/src/mdx-components/index.tsx b/packages/nextra-theme-docs/src/mdx-components/index.tsx
@@ -82,21 +82,25 @@ const DEFAULT_COMPONENTS = getNextraMDXComponents({
       {...props}
     />
   ),
-  wrapper({ toc, children, ...props }) {
+  wrapper({ toc, children, metadata, ...props }) {
     // @ts-expect-error fixme
     toc = toc.map(item => ({
       ...item,
       value: removeLinks(item.value)
     }))
     return (
-      <div className="x:mx-auto x:flex x:max-w-(--nextra-content-width)">
+      <div
+        className="x:mx-auto x:flex x:max-w-(--nextra-content-width)"
+        // Attach user-defined props to wrapper container, e.g. `data-pagefind-filter`
+        {...props}
+      >
         <Sidebar toc={toc} />
 
-        <ClientWrapper toc={toc} {...props}>
+        <ClientWrapper toc={toc} metadata={metadata}>
           <SkipNavContent />
           <main
             data-pagefind-body={
-              (props.metadata as any).searchable !== false || undefined
+              (metadata as any).searchable !== false || undefined
             }
           >
             {children}

diff --git a/packages/nextra/src/client/components/search.tsx b/packages/nextra/src/client/components/search.tsx
@@ -12,6 +12,7 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/navigation'
 import type { FC, FocusEventHandler, ReactElement, SyntheticEvent } from 'react'
 import { useDeferredValue, useEffect, useRef, useState } from 'react'
+import type { PagefindSearchOptions } from '../../types.js'
 import { useMounted } from '../hooks/use-mounted.js'
 import { InformationCircleIcon, SpinnerIcon } from '../icons/index.js'
 
@@ -46,9 +47,10 @@ type SearchProps = {
   loading?: ReactElement | string
   placeholder?: string
   className?: string
+  searchOptions?: PagefindSearchOptions
 }
 
-const INPUTS = new Set(['input', 'select', 'button', 'textarea'])
+const INPUTS = new Set(['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA'])
 
 const DEV_SEARCH_NOTICE = (
   <>
@@ -69,7 +71,8 @@ export const Search: FC<SearchProps> = ({
   emptyResult = 'No results found.',
   errorText = 'Failed to load search index.',
   loading = 'Loading…',
-  placeholder = 'Search documentation…'
+  placeholder = 'Search documentation…',
+  searchOptions
 }) => {
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<ReactElement | string>('')
@@ -105,7 +108,11 @@ export const Search: FC<SearchProps> = ({
           return
         }
       }
-      const { results } = await window.pagefind!.search<PagefindResult>(value)
+      const { results } =
+        await window.pagefind!.debouncedSearch<PagefindResult>(
+          value,
+          searchOptions
+        )
       const data = await Promise.all(results.map(o => o.data()))
 
       setResults(
@@ -121,34 +128,31 @@ export const Search: FC<SearchProps> = ({
       setIsLoading(false)
     }
     handleSearch(deferredSearch)
-  }, [deferredSearch])
+  }, [deferredSearch]) // eslint-disable-line react-hooks/exhaustive-deps -- ignore searchOptions
 
   const router = useRouter()
   const [focused, setFocused] = useState(false)
   const mounted = useMounted()
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null!)
 
   useEffect(() => {
     function handleKeyDown(event: globalThis.KeyboardEvent) {
-      const input = inputRef.current
-      const { activeElement } = document
-      const tagName = activeElement?.tagName.toLowerCase()
+      const el = document.activeElement
       if (
-        !input ||
-        !tagName ||
-        INPUTS.has(tagName) ||
-        // @ts-expect-error -- fixme
-        activeElement?.isContentEditable
-      )
+        !el ||
+        INPUTS.has(el.tagName) ||
+        (el as HTMLElement).isContentEditable
+      ) {
         return
+      }
       if (
         event.key === '/' ||
         (event.key === 'k' &&
           (event.metaKey /* for Mac */ || /* for non-Mac */ event.ctrlKey))
       ) {
         event.preventDefault()
         // prevent to scroll to top
-        input.focus({ preventScroll: true })
+        inputRef.current.focus({ preventScroll: true })
       }
     }
 
@@ -193,7 +197,7 @@ export const Search: FC<SearchProps> = ({
     if (!searchResult) return
     // Calling before navigation so selector `html:not(:has(*:focus))` in styles.css will work,
     // and we'll have padding top since input is not focused
-    inputRef.current?.blur()
+    inputRef.current.blur()
     router.push(searchResult.url)
     setSearch('')
   }
@@ -202,6 +206,7 @@ export const Search: FC<SearchProps> = ({
     <Combobox onChange={handleSelect}>
       <div
         className={cn(
+          'nextra-search',
           'x:relative x:flex x:items-center',
           'x:text-gray-900 x:dark:text-gray-300',
           'x:contrast-more:text-gray-800 x:contrast-more:dark:text-gray-300',

diff --git a/packages/nextra/src/client/components/steps.tsx b/packages/nextra/src/client/components/steps.tsx
@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import type { ComponentProps, CSSProperties, FC } from 'react'
+import type { ComponentProps, FC } from 'react'
 import { useId } from 'react'
 
 export const Steps: FC<ComponentProps<'div'>> = ({
@@ -16,12 +16,11 @@ export const Steps: FC<ComponentProps<'div'>> = ({
         'x:dark:border-neutral-800',
         className
       )}
-      style={
-        {
-          ...style,
-          '--counter-id': id
-        } as CSSProperties
-      }
+      style={{
+        ...style,
+        // @ts-expect-error -- fixme
+        '--counter-id': id
+      }}
       {...props}
     >
       {children}

diff --git a/packages/nextra/src/client/mdx-components/image.tsx b/packages/nextra/src/client/mdx-components/image.tsx
@@ -18,8 +18,14 @@ This is Turbopack bug, which will not occurs on production (since Webpack is use
     }
   }
   const ComponentToUse = typeof props.src === 'object' ? NextImage : 'img'
-  // @ts-expect-error -- fixme
-  return <ComponentToUse {...props} ref={ref} />
+  return (
+    // @ts-expect-error -- fixme
+    <ComponentToUse
+      {...props}
+      ref={ref}
+      data-pagefind-index-attrs="title,alt"
+    />
+  )
 })
 
 Image.displayName = 'Image'
diff --git a/packages/nextra/src/env.d.ts b/packages/nextra/src/env.d.ts
@@ -1,7 +1,13 @@
 declare namespace globalThis {
+  import type { PagefindSearchOptions } from './types.js'
   var pagefind:
     | {
-        search: <T>(query: string) => Promise<{
+        // https://github.com/CloudCannon/pagefind/blob/2a0aa90cfb78bb8551645ac9127a1cd49cf54add/pagefind_web_js/lib/coupled_search.ts#L600
+        debouncedSearch: <T>(
+          term: string,
+          options?: PagefindSearchOptions,
+          debounceTimeoutMs?: number
+        ) => Promise<{
           results: {
             data: () => Promise<T>
             id: string

diff --git a/packages/nextra/src/types.ts b/packages/nextra/src/types.ts
@@ -102,3 +102,16 @@ export type MDXWrapper = FC<{
 }>
 
 export type MetaRecord = Record<string, z.infer<typeof metaSchema>>
+
+// Copied from https://github.com/CloudCannon/pagefind/blob/2a0aa90cfb78bb8551645ac9127a1cd49cf54add/pagefind_web_js/types/index.d.ts#L72-L82
+/** Options that can be passed to pagefind.search() */
+export type PagefindSearchOptions = {
+  /** If set, this call will load all assets but return before searching. Prefer using pagefind.preload() instead */
+  preload?: boolean
+  /** Add more verbose console logging for this search query */
+  verbose?: boolean
+  /** The set of filters to execute with this search. Input type is extremely flexible, see the filtering docs for details */
+  filters?: object
+  /** The set of sorts to use for this search, instead of relevancy */
+  sort?: object
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml