|
1 | 1 | 'use client'; |
2 | 2 |
|
3 | 3 | import SearchBox from '@node-core/ui-components/Common/Search'; |
| 4 | +import useOrama from '@node-core/ui-components/hooks/useOrama'; |
| 5 | +import { create, insertMultiple, save } from '@orama/orama'; |
4 | 6 | import { useTranslations } from 'next-intl'; |
5 | 7 |
|
| 8 | +import { ORAMA_DB_URLS } from '#site/next.constants.mjs'; |
| 9 | + |
6 | 10 | import type { FC } from 'react'; |
7 | 11 |
|
| 12 | +/** |
| 13 | + * Shape of a single Orama document entry. |
| 14 | + * `href` is required (we prefix it); other fields are passthrough. |
| 15 | + */ |
| 16 | +type OramaDoc = { href: string } & Record<string, unknown>; |
| 17 | + |
| 18 | +/** |
| 19 | + * Shape of a serialized Orama database snapshot (from `save()` on the server |
| 20 | + * side, fetched as JSON on the client). We only type the parts we touch. |
| 21 | + */ |
| 22 | +type SerializedOramaDb = { |
| 23 | + docs: { |
| 24 | + docs: Record<string, OramaDoc>; |
| 25 | + }; |
| 26 | +}; |
| 27 | + |
| 28 | +/** |
| 29 | + * Each locale/section of the site ships its own prebuilt Orama index, but the |
| 30 | + * hrefs inside those indexes are relative to that section's root. When we |
| 31 | + * merge multiple indexes into a single client-side DB, we need to re-scope |
| 32 | + * those hrefs so clicks route to the correct top-level path. |
| 33 | + */ |
| 34 | +export const addPrefixToDocs = <T extends SerializedOramaDb>( |
| 35 | + db: T, |
| 36 | + prefix: string |
| 37 | +): T => { |
| 38 | + const prefixedDocs: Record<string, OramaDoc> = {}; |
| 39 | + |
| 40 | + // Object.entries + Object.fromEntries would also work, but a single pass |
| 41 | + // with a plain loop avoids the intermediate array allocations |
| 42 | + for (const [id, doc] of Object.entries(db.docs.docs)) { |
| 43 | + prefixedDocs[id] = { ...doc, href: `${prefix}${doc.href}` }; |
| 44 | + } |
| 45 | + |
| 46 | + return { |
| 47 | + ...db, |
| 48 | + docs: { ...db.docs, docs: prefixedDocs }, |
| 49 | + }; |
| 50 | +}; |
| 51 | + |
8 | 52 | const WithSearch: FC = () => { |
9 | 53 | const t = useTranslations(); |
10 | 54 |
|
| 55 | + // `useOrama` expects an initializer that returns serialized RawData. |
| 56 | + // We build a temporary DB, populate it from every configured index, then |
| 57 | + // serialize it so the hook can `load()` it into its own client instance. |
| 58 | + const client = useOrama(async () => { |
| 59 | + const db = create({ |
| 60 | + schema: { |
| 61 | + title: 'string', |
| 62 | + description: 'string', |
| 63 | + href: 'string', |
| 64 | + siteSection: 'string', |
| 65 | + }, |
| 66 | + }); |
| 67 | + |
| 68 | + // Kick off every fetch concurrently — network latency, not CPU, is the |
| 69 | + // bottleneck here, so serializing these would waste ~N× round-trip time. |
| 70 | + const indexes = await Promise.all( |
| 71 | + Object.entries(ORAMA_DB_URLS).map(async ([key, url]) => { |
| 72 | + const fetchedDb = (await fetch(url).then(res => |
| 73 | + res.json() |
| 74 | + )) as SerializedOramaDb; |
| 75 | + return addPrefixToDocs(fetchedDb, `/${key}`); |
| 76 | + }) |
| 77 | + ); |
| 78 | + |
| 79 | + for (const index of indexes) { |
| 80 | + await insertMultiple(db, Object.values(index.docs.docs) as Array<never>); |
| 81 | + } |
| 82 | + |
| 83 | + return save(db); |
| 84 | + }); |
| 85 | + |
11 | 86 | return ( |
12 | 87 | <SearchBox |
| 88 | + client={client} |
13 | 89 | closeShortcutLabel={t('components.search.keyboardShortcuts.close')} |
14 | 90 | navigateShortcutLabel={t('components.search.keyboardShortcuts.navigate')} |
15 | 91 | noResultsTitle={t('components.search.noResultsFoundFor')} |
16 | | - path="/orama-db.json" |
17 | 92 | placeholder={t('components.search.searchPlaceholder')} |
18 | 93 | selectShortcutLabel={t('components.search.keyboardShortcuts.select')} |
19 | 94 | /> |
|
0 commit comments