How to use search functionality with custom theme?

[ovflowd]

Hey there 👋 I'd like to ask how can we adopt the built-in search functionality when using custom themes. Ty!

[jonny-snippyly]

Would also like to know. At first glance, seems like we could possibly re-use the search-related code from nextra-theme-docs, but you would have to figure out how things are wired up first, and then import them into your theme/layout. I don't think that package is setup to have things modularly picked and used. Might be more worth it to just implement Flexsearch with an input + autocomplete of your choice

[cglacet]

I would also be interesed by using the integrated search, but only to have it display in the body of a given page.

[alexrabin]

Here's how I got it working so far:

1. Enable flexsearch in next.config.js

const withNextra = require("nextra")({
  theme: "./CustomNextraTheme.tsx",
  flexsearch: true,
});

2. Install flexsearch npm i flexsearch if you are using typescript run npm i @types/flexsearch -D and make sure to run this command because the flexsearch types are out of date: rm -rf node_modules/flexsearch/index.d.ts

3. Copy over these files into your project and add your styles accordingly: https://github.com/shuding/nextra/blob/main/packages/nextra-theme-docs/src/components/flexsearch.tsx https://github.com/shuding/nextra/blob/main/packages/nextra-theme-docs/src/components/search.tsx
   https://github.com/shuding/nextra/blob/main/packages/nextra-theme-docs/src/components/highlight-matches.tsx

4. Add the <FlexSearch /> component into your NavigationBar component

5. You should be good to go

[alexrabin]

@officialrajdeepsingh I was able to copy this files just fine and pick and choose what I needed. I'll write an article on how to implement flex search with a custom nextjs theme one of these days.

[ansi2u]

@alexrabin : if I'm using Nextra docs theme, do I have to still copy these files?

[alexrabin]

@ansi2u If you are using the nextra-docs-theme then this thread shouldn't have to apply to you

[devjiwonchoi]

@alexrabin Could you share your article?
I'm struggling with indexing the data since I'm importing the contents from another mdx, for example:

// pages/index.mdx
import Content from 'docs/index.mdx'

<Content />

and it seems like this is not indexed to be caught on current flexsearch configuration..

[alexrabin]

@devjiwonchoi I haven't had time to create the article and I don't know when I'll be able to prioritize it 😕

[dylanfox5]

Experiencing issues with @alexrabin 's approach...having to copy a lot of code. Perhaps i'm going about it the wrong way?

I'm using the nextra docs theme, but I've integrated Nextra with an existing NextJS app. Therefore, I have an existing Navbar that I'd like to keep, but I'd like to integrate the search functionality from Nextra into it. Ideally I could simply import a search component and drop it in my Navbar. Any thoughts?