New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@markprompt/docusaurus-theme-search

Package Overview
Dependencies
Maintainers
1
Versions
141
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@markprompt/docusaurus-theme-search

A Markprompt search theme for Docusaurus

  • 0.32.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
98
decreased by-60%
Maintainers
1
Weekly downloads
 
Created
Source

Markprompt Docusaurus Plugin

A Markprompt plugin for Docusaurus.


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>
  );
}

Documentation

The full documentation for the package can be found on the Markprompt docs.

Examples

Community

Authors

This library is created by the team behind Markprompt (@markprompt).

License

MIT © Markprompt

FAQs

Package last updated on 29 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc