What steps should I follow to create a Lunr search functionality for Markdown MD files?

Question

What steps should I follow to create a Lunr search functionality for Markdown MD files?

Currently, I am in search of a suitable lunr search implementation for my MD (Markdown) documents spread throughout my React/NextJS website. Our website contains a plethora of Markdown docs within both blog and regular "docs" sections, necessitating a robust search functionality for users to easily navigate through topics. Although our MDs are dynamically rendered via NextJS, we require a server-side search capability to enhance security measures by restricting user access solely to result retrieval, rather than enabling direct client/browser side page searches.

To accommodate this requirement, our plan involves building the lunr search index during site construction (which should be relatively straightforward given the static nature of our content).
We intend to utilize API endpoint routing for executing server-side searches on the created search index.
For user interaction, we will leverage nextJS clientside capabilities to interface with the API endpoint for initiating searches and returning results.

While I possess a decent understanding of lunr operations, including index construction, API router setup, and final result rendering, my primary challenge lies in integrating the index creation process with the actual searchable text derived from MD documents. This raises concerns about omitting non-searchable meta information present in MD files or any irrelevant HTML tags within the corresponding rendered HTML versions. Consequently, I'm on the lookout for an existing NPM package that addresses these specific complexities.

Furthermore, I'm interested in exploring methods to refine the search index structure to generate visually appealing search results featuring brief previews displaying relevant sentences alongside each match, instead of just listing page titles.

javascript search next.js markdown lunrjs

Answer 1

Answer №1

If you want to achieve this, the solution is simple - just perform a double search.

Firstly, retrieve the page from the backend and make it accessible through an API.
Next, within the user interface, execute another search to highlight the necessary words.

Check out this fiddle for a demonstration.

To streamline the process, I utilized the "react-highlight-words" library.

Code:

Imports

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a687f7b796e3772737d7276737d726e376d75687e695a2a342b2b28342e20">[email protected]</a>/dist/main.min.js"></script>

Actual Logic

import React, { useState, useEffect, Component } from 'react';
import { render } from 'react-dom';
import Highlighter from 'react-highlight-words';

const App = () => {
  const [text, setText] = useState('');
  const [data, setData] = useState('');
  const HINT = 'Search any name';

  const searchName = async text => {
    const URI = `https://api.nationalize.io/?name=${text}`;
    return fetch(URI);
  };

  useEffect(() => {
    (async () => {
      if (!text) {
        setData(HINT);
        return;
      }

      const res = await searchName(text);
      const data = await res.text();
      setData(data);
    })();
  }, [text]);

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <br />
      <br />

      <Highlighter searchWords={[text]} textToHighlight={data} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

Answer 2

If you want to achieve this, the solution is simple - just perform a double search.

Firstly, retrieve the page from the backend and make it accessible through an API.
Next, within the user interface, execute another search to highlight the necessary words.

Check out this fiddle for a demonstration.

To streamline the process, I utilized the "react-highlight-words" library.

Code:

Imports

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a687f7b796e3772737d7276737d726e376d75687e695a2a342b2b28342e20">[email protected]</a>/dist/main.min.js"></script>

Actual Logic

import React, { useState, useEffect, Component } from 'react';
import { render } from 'react-dom';
import Highlighter from 'react-highlight-words';

const App = () => {
  const [text, setText] = useState('');
  const [data, setData] = useState('');
  const HINT = 'Search any name';

  const searchName = async text => {
    const URI = `https://api.nationalize.io/?name=${text}`;
    return fetch(URI);
  };

  useEffect(() => {
    (async () => {
      if (!text) {
        setData(HINT);
        return;
      }

      const res = await searchName(text);
      const data = await res.text();
      setData(data);
    })();
  }, [text]);

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <br />
      <br />

      <Highlighter searchWords={[text]} textToHighlight={data} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

What steps should I follow to create a Lunr search functionality for Markdown MD files?

Answer №1

Similar questions

I am having trouble retrieving any data when using jQuery to post JSON data

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

Best practices for using parent and child methods in Vue applications

Deleting an object with javascript in django: A step-by-step guide

Angular directive ceases to trigger

Differentiate input elements with custom styling

"The Django querydict receives extra empty brackets '[]' when using jQuery ajax post to append items to a list in the app

Utilizing Next.JS and Nodemailer to seamlessly send emails through a contact form

Error: The property 'updateOne' cannot be read because it is undefined

JavaScript is claiming that my class method is invalid, despite the fact that it is obviously a valid function

Uploading Files Using Ajax to a PHP Class

ESLint detected a promise being returned in a function argument where a void return type was expected

Can WebGL be configured to render offscreen without its canvas being directly connected to the DOM?

When attempting to perform conditional rendering in React using a stateless functional component, I encounter an error stating "Unexpected token, expected ,"

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Enhance your user interface by incorporating badges into specific elements using Bootstrap version 5.2

Utilize the return value within a .map function following the completion of a request.get call

Steps to obtain an Element binding from a Svelte component

Explore the possibilities with Intel XDK's customizable keyboard feature

Decoding user input parameters within a vue module