Docusaurus

Docusaurus

Asktro provides an integration with Docusaurus (opens in a new tab). Follow this guide to get started integrating Asktro search with your Docusaurus documentation.

API key

Sign up (opens in a new tab) for an Asktro account and create a project.

  • Include the name of your project. This can be anything and is only used to help you identify your project in Asktro.
  • Include the URL of your documentation site. This is used to restrict search results to your documentation site. Note: you can also test from localhost.
  • View your project and copy the upload API key and client API key for use below.

Docusaurus

If you haven't already, follow the Docusaurus guide to get started (opens in a new tab).

Install

Then, install the Asktro plugin and search.

npm i @asktro/docusaurus @asktro/ui

Docusaurus configuration

Once installed, configure Docusaurus to use the Asktro plugin and search.

Upgrade to v3

Asktro relies on packages that require React 18. Docusaurus v3 adds React 18 support but is alpha.

package.json

Upgrade the Docusaurus packages to the latest v3 version and React packages to v18.

The following packages need to have their versions updated.

{
  "dependencies": {
    "@docusaurus/core": "3.0.0-alpha.0",
    "@docusaurus/preset-classic": "3.0.0-alpha.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "3.0.0-alpha.0",
    "@docusaurus/tsconfig": "3.0.0-alpha.0"
  }
}

tsconfig.json

If using TypeScript, replace the tsconfig.json extension to the renamed package.

{
  "extends": "@docusaurus/tsconfig/tsconfig.json"
  // Other configuration...
}

docusaurus.config.js

Update the docusaurus.config.js file in the root of the project to use the Asktro plugin. This will ingest data during production builds.

const config = {
  plugins: [
    // Import the Asktro Docusaurus plugin and configure the API key.
    [
      require("@asktro/docusaurus/dist/plugin").default,
      {
        apiKey: "replace_with_your_UPLOAD_api_key",
      },
    ],
  ],
 
  // Other Docusaurus configuration...
};

src/theme/SearchBar.js

Add the Asktro search UI by swizzling the SearchBar (opens in a new tab) to override the SearchBar with a custom component.

npm run swizzle @docusaurus/theme-classic SearchBar
# Select "Eject"

Then, update the SearchBar component at src/theme/SearchBar.js to use the Asktro search.

Also, import the styles for the Asktro UI search component.

import { Search } from "@asktro/docusaurus";
import "@asktro/ui/dist/index.css";
 
export default () => <Search apiKey="replace_with_your_CLIENT_api_key" />;
Nextra