feat: Implement Lunr-based search for Markdown documentation and rend… #150
Conversation
…er results with markdown
SearchBar Component:
Added react-markdown for rendering markdown content in search result excerpts.
Enhanced the search bar to allow user queries and display results dynamically.
Fixed the search result paths to link correctly to markdown pages, removing unnecessary path redundancies.
Ensured the modal can be opened/closed via buttons and keyboard events, with better accessibility features.
lib/search.js:
Created a recursive function to fetch markdown files, including nested ones.
Extracted metadata from markdown files (using eval) and removed the metadata block from content before indexing.
Corrected the file paths for Next.js routing by removing pages and cleaning up paths like /index.
Added markdown content and metadata indexing using Lunr.js for efficient full-text search capabilities.
pages/api/search.js:
Set up a search API using Lunr.js for client-side requests.
Utilized the createIndex() function to generate and store an index for markdown documentation.
Optimized the API response to return document titles, excerpts, and cleaned URLs for rendering search results on the client-side.
Dependencies:
Installed lodash for utility functions (though not directly referenced in the code provided).
Installed react-markdown for rendering markdown in search result excerpts.
moonmeister
left a comment
moonmeister
left a comment
There was a problem hiding this comment.
good work. needs some fine tuning but looks like it'll work well
components/SearchBar.js
Outdated
| import { gql, useQuery } from "@apollo/client"; | ||
| import React, { useState, useEffect, useRef } from "react"; | ||
| import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; | ||
| import ReactMarkdown from "react-markdown"; // For rendering markdown excerpts |
There was a problem hiding this comment.
Is it possible to do this conversion on the api or at build time?
There was a problem hiding this comment.
Good question, let me find out.
| import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; | ||
| import ReactMarkdown from "react-markdown"; // For rendering markdown excerpts | ||
|
|
||
| const DOC_SEARCH_QUERY = gql` |
There was a problem hiding this comment.
We will still need out search to cover blog posts, yeah? Should we setup search to do both?
There was a problem hiding this comment.
Hmmm, we could or should we setup Smart Search for the WP side of things?
There was a problem hiding this comment.
can decide this after our meeting tomorrow.
|
|
||
| export default function handler(req, res) { | ||
| if (!indexData) { | ||
| indexData = createIndex(); // Get both index and documents |
There was a problem hiding this comment.
I'm not entirely against this being done at run time, and if we want to directly integrate WP data into this it makes sense. That said I'm not seeing any kind of cache purging or cache tags to put this in a CDN
There was a problem hiding this comment.
To clarify, if this can just be a static json file or at least that can be the case for the MDX data.
There was a problem hiding this comment.
Yup that sounds good to me.
moonmeister
left a comment
moonmeister
left a comment
There was a problem hiding this comment.
oops, needs changes, hit the wrong button
|
Closing in favor of #162 |
…er results with markdown