Flexsearch

Adalt supports searching document based on Flexsearch.

As the built-in search of Adalt, It is the default but also recommended option since it's easier to setup and totally free.

Simple Search

Index with the raw content of document.

import { allDocs } from 'content-collections';
import { createSearchAPI } from 'styledsea-docs-core/search/server';
 
export const { GET } = createSearchAPI('simple', {
  indexes: allDocs.map((docs) => ({
    title: docs.title,
    content: docs.content // Raw Content
    url: docs.url,
  })),
});

import { useDocsSearch } from 'styledsea-docs-core/search/client';
 
export function Dialog() {
  const { search, setSearch, query } = useDocsSearch();
 
  return <div>...</div>;
}

Advanced Search

Returns a more detailed result with matching headings and contents.

It accepts structured data processed from a markdown/MDX document, and index it with Flexsearch. You can extract the structured data using the Structure remark plugin.

It cannot extract content from rehype plugin generated content (remark plugins are supported).

Usage

Same as simple search, but requires the structuredData property instead of raw content.

import { source } from '@/lib/source';
import { createFromSource } from 'styledsea-docs-core/search/server';
 
export const { GET } = createFromSource(source);

Tag Filter

It's useful for implementing versioned docs, or multi-docs similar to this documentation.

import { source } from '@/lib/source';
import { createSearchAPI } from 'styledsea-docs-core/search/server';
 
export const { GET } = createSearchAPI('advanced', {
  indexes: source.getPages().map((page) => ({
    tag: 'your value here',
    // other props
  })),
  tag: true,
});

On your search client, pass a tag to the hook.

import { useDocsSearch } from 'styledsea-docs-core/search/client';
 
// Pass `tag` in your custom search dialog
const client = useDocsSearch('locale', 'tag');

Custom Algorithm

You can port your own search algorithm by returning a list of SortedResult from your custom /api/search/route.ts api endpoint, and you can integrate it with Adalt UI later.

Internationalization

Use createI18nSearchAPI for i18n functionality.

import { source } from '@/lib/source';
import { createFromSource } from 'styledsea-docs-core/search/server';
 
export const { GET } = createFromSource(source);

function Dialog() {
  const { search, setSearch, query } = useDocsSearch(locale);
 
  //...
}

Search Client

useDocsSearch is a hook that combines debounce value and useSWR.

Return Type

Response Data

Headless

You can also host the search server on Express or Elysia, without Next.js.

import { initAdvancedSearch } from 'styledsea-docs-core/search/server';
 
const server = initAdvancedSearch({
  // options
});
 
server.search('query', {
  // you can specify `locale` and `tag` here
});