Fix search index output location (#1337)

* add error state to search

* fix search index output

* add changeset and update docs

* fix lint error

* fix lint error

.changeset/gold-tools-deliver.md

@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+fix search index output location

docs/pages/docs/docs-theme/theme-configuration.mdx

@@ -250,6 +250,7 @@ Check out [Page Configuration](/docs/docs-theme/page-configuration#navbar-items)
 }>`, ''],
   ['search.emptyResult', 'React.ReactNode | React.FC', 'Not found text'],
   ['search.loading', 'string | (() => string)', 'Loading text'],
+  ['search.error', 'string | (() => string)', 'Error text'],
   ['search.placeholder', 'string | (() => string)', 'Placeholder text'],
 ]}/>
 

packages/nextra-theme-docs/src/components/flexsearch.tsx

@@ -153,6 +153,7 @@ export function Flexsearch({
 }): ReactElement {
   const { locale = DEFAULT_LOCALE, basePath } = useRouter()
   const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
   const [results, setResults] = useState<SearchResult[]>([])
   const [search, setSearch] = useState('')
 
@@ -251,7 +252,11 @@ export function Flexsearch({
     async (active: boolean) => {
       if (active && !indexes[locale]) {
         setLoading(true)
-        await loadIndexes(basePath, locale)
+        try {
+          await loadIndexes(basePath, locale)
+        } catch (e) {
+          setError(true)
+        }
         setLoading(false)
       }
     },
@@ -265,7 +270,11 @@ export function Flexsearch({
     }
     if (!indexes[locale]) {
       setLoading(true)
-      await loadIndexes(basePath, locale)
+      try {
+        await loadIndexes(basePath, locale)
+      } catch (e) {
+        setError(true)
+      }
       setLoading(false)
     }
     doSearch(value)
@@ -274,6 +283,7 @@ export function Flexsearch({
   return (
     <Search
       loading={loading}
+      error={error}
       value={search}
       onChange={handleChange}
       onActive={preload}

packages/nextra-theme-docs/src/components/search.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react'
 import cn from 'clsx'
 import { Transition } from '@headlessui/react'
-import { SpinnerIcon } from 'nextra/icons'
+import { InformationCircleIcon, SpinnerIcon } from 'nextra/icons'
 import { useMounted } from 'nextra/hooks'
 import { Input } from './input'
 import { Anchor } from './anchor'
@@ -25,6 +25,7 @@ type SearchProps = {
   onChange: (newValue: string) => void
   onActive?: (active: boolean) => void
   loading?: boolean
+  error?: boolean
   results: SearchResult[]
 }
 
@@ -37,6 +38,7 @@ export function Search({
   onChange,
   onActive,
   loading,
+  error,
   results
 }: SearchProps): ReactElement {
   const [show, setShow] = useState(false)
@@ -51,10 +53,6 @@ export function Search({
     setActive(0)
   }, [value])
 
-  useEffect(() => {
-    onActive?.(show)
-  }, [show, onActive])
-
   useEffect(() => {
     const down = (e: globalThis.KeyboardEvent): void => {
       const tagName = document.activeElement?.tagName.toLowerCase()
@@ -201,6 +199,9 @@ export function Search({
           onChange(value)
           setShow(Boolean(value))
         }}
+        onFocus={() => {
+          onActive?.(true)
+        }}
         type="search"
         placeholder={renderString(config.search.placeholder)}
         onKeyDown={handleKeyDown}
@@ -232,7 +233,12 @@ export function Search({
             transition: 'max-height .2s ease' // don't work with tailwindcss
           }}
         >
-          {loading ? (
+          {error ? (
+            <span className="nx-flex nx-select-none nx-justify-center nx-gap-2 nx-p-8 nx-text-center nx-text-sm nx-text-red-500">
+              <InformationCircleIcon className="nx-h-5 nx-w-5" />
+              {renderString(config.search.error)}
+            </span>
+          ) : loading ? (
             <span className="nx-flex nx-select-none nx-justify-center nx-gap-2 nx-p-8 nx-text-center nx-text-sm nx-text-gray-400">
               <SpinnerIcon className="nx-h-5 nx-w-5 nx-animate-spin" />
               {renderString(config.search.loading)}

packages/nextra-theme-docs/src/constants.tsx

@@ -122,6 +122,7 @@ export const themeSchema = z
         ReactNode | FC<{ className?: string; directories: Item[] }>
       >(...reactNode),
       emptyResult: z.custom<ReactNode | FC>(...reactNode),
+      error: z.string().or(z.function().returns(z.string())),
       loading: z.string().or(z.function().returns(z.string())),
       // Can't be React component
       placeholder: z.string().or(z.function().returns(z.string()))
@@ -276,6 +277,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
         No results found.
       </span>
     ),
+    error: 'Failed to load search index.',
     loading: function useLoading() {
       const { locale } = useRouter()
       if (locale === 'zh-CN') return '正在加载…'

packages/nextra/src/search/plugin.ts

@@ -2,7 +2,7 @@ import type { Compiler } from 'webpack'
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 
 const PLUGIN_NAME = 'NextraSearchPlugin'
-
+const isDev = process.env.NODE_ENV !== 'production'
 export class NextraSearchPlugin {
   apply(compiler: Compiler) {
     compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
@@ -39,9 +39,9 @@ export class NextraSearchPlugin {
           }
 
           for (const [file, content] of Object.entries(indexFiles)) {
-            assets['../static/chunks/' + file] = new sources.RawSource(
-              content + '}'
-            )
+            assets[
+              (isDev ? '../static/chunks/' : '../../static/chunks/') + file
+            ] = new sources.RawSource(content + '}')
           }
         }
       )