feat: Smart Search Integration #162
Conversation
moonmeister
left a comment
moonmeister
left a comment
There was a problem hiding this comment.
Good start, this is super awesome. Let's get it ready for prod now! Other than the specific comments below I'd love to see some more data than just a tiltle returned for search.
- A "snippet" of hopefully the block of text in the blog/doc that contains the search result. Hopefully the search endpoint helps with this.
- A tag indicating whether it's a blog post or doc.
- A tag indication what kind of doc it is
components/SearchBar.js
Outdated
| // Function to call the custom search API | ||
| async function performSearch(query) { | ||
| try { | ||
| const res = await fetch(`/api/search?query=${encodeURIComponent(query)}`); |
There was a problem hiding this comment.
I mean I am ok with using Apollo. I have been on a raw fetch vibe lately, but I don't have anything against using Apollo.
There was a problem hiding this comment.
It probably doesn't provide any real benefits. let's just make sure we're handling errors fully
moonmeister
force-pushed
the
smart-search-nextjs-plugin
branch
from
0433966 to
8f90e84
Compare
|
I started to review this...realized you didn't request one then started to do a rebase for you...realized my eslint stuff was super broken. Fixed that. Then finished the merge....you'll have some linting issues to resolve but on it's way. One major question. You did all that work to split the search routes but didn't we explicitly decide not to do that? There's a noticable lag now between docs results and a jump when blog results return. Is there a reason we can't get both from the ElasticSearch endpoint directly? |
…ternal link styling - Created a new page to feature websites using Faust.js . - Added a responsive grid layout with Tailwind CSS: - Single-column layout for mobile devices. - Two-column layout for medium screens and above. - Implemented Next.js component for optimized image loading and handling of static assets. - Styled the showcase tiles with hover effects, box shadows, and image overlays. - Added a gradient effect at the bottom of each tile for better readability of titles and icons. - Used Heroicons v2 for the external link icon next to the showcase titles. - Added /images folder to public and placed static images there for the showcased sites. - Ensured the design is fully responsive, maintaining a stoke-filled look across different screen sizes.
…tadata extraction with the WP Engine Smart Search Plugin This commit includes updates to implement a search feature in the documentation site with custom search and indexing improvements. - Implemented a custom Webpack plugin to index MDX files located in /pages/docs. - The plugin recursively collects all .mdx files, extracts metadata such as titles, and converts file content to plain text. - Documents are sent to a smart search endpoint for indexing with GraphQL. - Error handling added for metadata extraction failures. - The search modal can now be toggled with ⌘K and closed by clicking outside or pressing ESC. - Integrated a search API function that queries the custom search endpoint. - Added logic to clean up document paths and generate clean URLs. - Implemented title fallback and updated the UI to display clickable document titles. - Improved regex to handle JSON-like metadata blocks and used safe parsing. - Created a custom API route for search queries to handle frontend requests. - Updated MDX files without metadata to ensure proper indexing.
moonmeister
force-pushed
the
smart-search-nextjs-plugin
branch
from
e93e8b2 to
9d19f19
Compare
…chBar component for improved search handling - Added to handle MDX-specific search queries, allowing targeted search for documentation content stored in MDX files. - Added to handle WP-specific search queries, enabling search for WordPress blog posts via the WPGraphQL API. - Updated component: - Integrated the new MDX and WP search APIs, prioritizing MDX documentation results over WP blog results in the search display. - Implemented query sanitization and React escape hatch for HTML snippets from WP results. - Cleaned up URL paths to remove unnecessary and extensions for MDX results, and fixed duplicate path issue for WP results. - Enhanced snippet extraction from MDX metadata and improved UI rendering logic to exclude Untitled results. These changes improve search functionality and maintain cleaner separation between MDX and WP content handling.
moonmeister
force-pushed
the
smart-search-nextjs-plugin
branch
from
9d19f19 to
cc87296
Compare
|
Thought I did something really bad there...we're back. |
…etItemProps from downshift which will act as the interactive elements in the HTML so the keyboard interactions work properly. PLEASE TEST THIS AND GIVE ME FEEDBACK ON WHAT NEEDS CLEANING
|
Make sure you merge |
|
Sounds good. I will use our custom Link component for this |
kellenmace
left a comment
kellenmace
left a comment
There was a problem hiding this comment.
Thanks Fran! This is really coming along. I left one comment in the code and here are some more things we still need to address:
If you search for something, click a result, then open the search modal again, the old search term you had entered the first time will still be there. It should be cleared out. Maybe we don’t even need to do setInputValue(newValue); in the onInputChangeValue callback function?
The placement of the Esc button needs to be adjusted. It’s currently half-on/half-off the search input. Maybe we can mimic how Next.js does their “Esc” button (https://nextjs.org/)? Not that even if the user types 100 characters or whatever the text never collides with the Esc button.
Positioning the top of the modal closer to the top of the viewport (like Next.js, Gatsby and others do) would be nice. Currently, ours shows up in the middle of the screen, then if a long list of results is shown, it suddenly gets bumped up toward the top, which is somewhat disorienting for users.
Thanks for the hard work on this! 👍🏼
package.json
Outdated
| "html-to-text": "^9.0.5", | ||
| "lodash.debounce": "^4.0.8", | ||
| "next": "^15.0.1", | ||
| "node-fetch": "^3.3.2", |
There was a problem hiding this comment.
@Fran-A-Dev We're adding node-fetch as a new dependency here, but it's not used anywhere in the codebase, so I think we can remove it.
There was a problem hiding this comment.
Stoked! I'll delete it.
There was a problem hiding this comment.
I'll add the suggested changes! Thanks @kellenmace
… esc button, and positioned modal closer to the top with a blue effect upon opening the modal
|
This looks great! Thanks for buttoning up those last few things, @Fran-A-Dev! |
moonmeister
changed the title
…tadata extraction with the WP Engine Smart Search Plugin
This commit includes updates to implement a search feature in the documentation site with custom search and indexing improvements.
1. Added smart-search-plugin.js:
Implemented a custom Webpack plugin to index MDX files located in /pages/docs.
The plugin recursively collects all .mdx files, extracts metadata such as titles, and converts file content to plain text.
Documents are sent to a smart search endpoint for indexing with GraphQL.
Error handling added for metadata extraction failures.
2. Updated SearchBar.js for enhanced search functionality:
The search modal can now be toggled with ⌘K and closed by clicking outside or pressing ESC.
Integrated a search API function that queries the custom search endpoint.
Added logic to clean up document paths and generate clean URLs.
Implemented title fallback and updated the UI to display clickable document titles.
3. Fixed metadata parsing in smart-search-plugin.js:
4. Search API endpoint (pages/api/search.js):
5. Added metadata to existing MDX files: