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

What rules should be followed in Python when it comes to using nested parentheses in functions?

Messages are not being received despite no errors occurring in the PHP form

AngularJS Interceptors for secure page management

Is it feasible to alter cookie data within a jQuery ajax call?

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

It is impossible for me to invoke a method within a function

What could be causing an error when using a straightforward pagination tag in Material UI?

Retrieve highlighted text along with its corresponding tag in ReactJS

What is the best way to invoke a controller method using jQuery within a cshtml file?

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

I'm facing a challenge with displaying data on a dynamically created table using VueJS

Exploring the world of MVC4: Enhancing user experience with client-side

Enhancing leaflet popup functionality by incorporating ng-click into the onEachFeature function

Arranging array elements by both date and alphabetical order using Javascript

Tips on avoiding a page reload following a form submission using JQuery

JavaScript's innerHTML property is failing to update

The number field is persisting with its content even after submitting, while the other fields successfully clear up

Masked input fails to accurately capture data

Obtain the URL within each promise

How to employ Math.random with multiple variables in JavaScript