@markprompt/docusaurus-theme-search NPM

Markprompt Docusaurus Plugin

Installation

npm install @markprompt/docusaurus-theme-search

Usage

Basic Usage

In your docusaurus.config.js, add @markprompt/docusaurus-theme-search to themes. Configure markprompt in the themeConfig.

const config = {
  // …

  themes: [
    // …
    '@markprompt/docusaurus-theme-search',
  ],

  themeConfig:
    /** @type {import('@markprompt/docusaurus-theme-search').ThemeConfig} */ ({
      markprompt: {
        projectKey: 'YOUR-PROJECT-KEY',
        trigger: { floating: true },
      },
    }),
};

Now a search button will appear on your Docusaurus page.

Usage with another search plugin

If your Docusaurus project already has a search plugin, such as theme-search-algolia, you need to swizzle the current search plugin, and add Markprompt as a standalone component.

To swizzle your current search plugin, run:

npx docusaurus swizzle

Choose Wrap, and confirm. This will create a SearchBar wrapper component in /src/theme/SearchBar. Next, install the standalone Markprompt component and CSS:

npm install @markprompt/react @markprompt/css

Edit /src/theme/SearchBar/index.tsx to include Markprompt next to your existing search bar. Here is an example:

import type { WrapperProps } from '@docusaurus/types';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { type MarkpromptConfig } from '@markprompt/docusaurus-theme-search';
import type SearchBarType from '@theme/SearchBar';
import SearchBar from '@theme-original/SearchBar';
import { lazy, Suspense } from 'react';

// import Markprompt lazily as Docusaurus does not currently support ESM
const Markprompt = lazy(() =>
  import('@markprompt/react').then((mod) => ({ default: mod.Markprompt })),
);

import '@markprompt/css';

type Props = WrapperProps<typeof SearchBarType>;

export default function SearchBarWrapper(props: Props): JSX.Element {
  const { siteConfig } = useDocusaurusContext();

  const { projectKey, ...config } = siteConfig.themeConfig
    .markprompt as MarkpromptConfig;

  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      {/* Docusaurus' version of `ReactDOMServer` doesn't support Suspense yet, so we can only render the component on the client. */}
      {typeof window !== 'undefined' && (
        <Suspense fallback={null}>
          <Markprompt projectKey={projectKey} {...config} />
        </Suspense>
      )}
      <SearchBar {...props} />
    </div>
  );
}