enable content searching #62
Conversation
enabling this option will enable the use of the 'use server' flag to use server actions even on client components
fuse.js is a library that implements customizable fuzzy search out-of-the-box
- implement options and weighted search
this gives SearchBar initial content to parse instead of re-fetching data which would be inneficient. SearchBar should only fetch more data if: 1) there is more data to be retrieved; and b) search yields no results;
…rs/enable-content-searching
now extends to talks and roundtables and podcasts
…rs/enable-content-searching
further reset button base css
dynamically change component position based on status toggle
no longer needed as data fetching is done by the hub home page and passed to children components
category pill styling now morphs based on selection state as used in content filtering
added documentation to the different parts of the file to facilitate future changes
✅ Deploy Preview for content-sub ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| const categories = await fetchAllContentByType('categories').then((res: Category[]) => res.map((item: Category) => item.title)) | ||
|
|
There was a problem hiding this comment.
pre-fetching categories to feed searchbox and facilitate filtering instead of forcing async on SearchBox component
(also avoids conflicts between use server and use client
| const fuseOptions = { | ||
| includeScore: true, | ||
| minMatchCharLength: 3, | ||
| distance: 1000, | ||
| threshold: 0.1, | ||
| keys: [ | ||
| { name: "content.title", weight: 0.3 }, | ||
| { name: "contentType", weight: 0.3 }, | ||
| { name: "content.summary", weight: 0.3 }, | ||
| { name: "content.authors.name", weight: 0.1 }, | ||
| { name: "content.categories.title", weight: 0.8 }, | ||
| { name: "content.content.root.children.text", weight: 0.3 }, | ||
| { name: "content.content.root.children.children.text", weight: 0.3 }, | ||
| { name: "content.content.root.children.children.children.text", weight: 0.3 }, | ||
| ], | ||
| }; |
There was a problem hiding this comment.
this is a basic implementation of Fuse. i'm giving particular relevante to title and content, but this could be changed
|
@davelange i've found it somewhat difficult to break this component into smaller components given the big number of handlers, which felt it would add redundancy. I've added more extensive documentation to each bit instead. let me know if it would be better to extend the documentation further or instead break it down into smaller parts |
link generated based on contentType was not being properly converted to kebab-case
|
Great work 👏 |
@davelange thanks! |
why:
how:
For the time being Fuse.js is being used as it offers a robust out-of-the-box configurable fuzzy search + weighted search functionality.
Desktop Demo:
https://github.com/user-attachments/assets/e6635f1f-a8c0-4351-8498-c86222c2cfa4
Mobile Demo:
https://github.com/user-attachments/assets/f021fea1-01e4-4f25-b803-41752ef52577