Merge pull request #157 from acelaya/feature/search-improvements

Replace lunr with fuse.js for posts search

package.json

@@ -21,9 +21,8 @@
     "bootstrap": "^3.4.1",
     "date-fns": "^2.30.0",
     "disqus-react": "^1.1.5",
-    "feed": "^4.2.2",
+    "fuse.js": "^6.6.2",
     "html-entities": "^2.4.0",
-    "lunr": "^2.3.9",
     "markdown-it": "^13.0.2",
     "photoswipe": "^5.4.2",
     "react": "^18.2.0",
@@ -33,11 +32,9 @@
     "react-tweet-embed": "^2.0.0"
   },
   "devDependencies": {
-    "@types/lunr": "^2.3.5",
     "@types/markdown-it": "^13.0.2",
     "@types/node": "^20.5.8",
     "@types/react": "18.2.28",
-    "react-lunr": "^1.1.0",
     "typescript": "^5.2.2"
   }
 }

src/components/Search.tsx

@@ -1,12 +1,11 @@
 import type { FC } from 'react';
 import type { Post } from '../utils/posts.ts';
-import { useCallback, useState } from 'react';
-import { useLunr } from 'react-lunr';
+import { useCallback, useMemo, useState } from 'react';
 import { PostHint } from './post/PostHint.tsx';
+import Fuse from 'fuse.js';
 
 export interface SearchProps {
-  index: object;
-  posts: Record<string, Post>;
+  posts: Post[];
 }
 
 const loadSearchFromQueryParams = () => {
@@ -23,13 +22,15 @@ const updateSearchInQueryParams = (newSearchValue: string) => {
   window.history.replaceState(null, '', `?${params.toString()}`);
 };
 
-export const Search: FC<SearchProps> = ({ index, posts }) => {
+export const Search: FC<SearchProps> = ({ posts }) => {
   const [searchValue, setSearchValue] = useState<string>(loadSearchFromQueryParams);
   const updateSearch = useCallback((newSearchValue: string) => {
     setSearchValue(newSearchValue);
     updateSearchInQueryParams(newSearchValue);
   }, []);
-  const results = useLunr(searchValue, index, posts);
+  const fuse = useMemo(() => new Fuse(posts, { keys: ['body', 'title'],
+  }), [posts])
+  const results = useMemo(() => fuse.search(searchValue), [fuse, searchValue]);
 
   return (
     <>
@@ -54,7 +55,7 @@ export const Search: FC<SearchProps> = ({ index, posts }) => {
               {searchValue !== '' && <p className="text-center">No results found</p>}
             </>
           )}
-          {results.map((post, index) => <PostHint key={index} post={post as Post} />)}
+          {results.map((post, index) => <PostHint key={index} post={post.item} />)}
         </div>
       </section>
     </>

src/pages/search.astro

@@ -1,5 +1,4 @@
 ---
-import lunr from 'lunr';
 import { Container } from '../components/Container';
 import { SectionTitle } from '../components/SectionTitle';
 import { Search } from '../components/Search';
@@ -8,30 +7,14 @@ import { getAllPosts } from '../utils/posts';
 
 const posts = await getAllPosts().then((posts) =>
   // Get rid of the `render` function, which cannot be serialized
-  posts.map(({ render, ...post }) => ({
-    title: post.data.title,
-    ...post,
-  }))
+  (posts as any[]).map(({ render, ...post }) => post)
 );
-const index = lunr(function () {
-  // Set which of the post fields have meaningful content to index
-  this.field('title');
-  this.field('body');
-
-  // Lunr requires an `id` field, which posts already include
-  posts.forEach(post => this.add(post));
-})
-const serializedIndex = index.toJSON();
-const postMap = posts.reduce((acc, post) => {
-  acc[post.id] = post;
-  return acc;
-}, {});
 ---
 
 <Layout url="/search/">
   <Container className="search-section">
     <SectionTitle>Search</SectionTitle>
 
-    <Search index={serializedIndex} posts={postMap} client:only="react" />
+    <Search posts={posts} client:only="react" />
   </Container>
 </Layout>