catalog
catalog copied to clipboard
interactivethings
Search
You could achieve this with lunr. You would need to implement an indexer and set up a loading mechanism so that the frontend fetches the index when it's needed. I have related discussion here.
There are also certain external solutions like Algolia that could work.
Thanks for these suggestions, very interesting!
I have this idea in my head that the index can just be added as an additional property to the configuration and then be used in the client. This would keep Catalog free from any server-side requirements. As far as I understand a lunr index is just a static file, so that would actually be possible and we could load that file on demand.
As far as I understand a lunr index is just a static file, so that would actually be possible and we could load that file on demand.
That's correct. I do exactly this at the book chapter I linked to. You can see the technique quite a bit in the wild. For instance Gitbook relies on it if I remember right.
@StephenOTT On search in general or any particular solution (e.g. Algolia integration)?
I haven't worked on this, as the problem definition has been quite fuzzy. There's a big difference in
- quick-search on page titles only,
- building an own search mechanism for full-text search, or
- integration of a third-party service like Algolia.
If you can outline specific needs, this will help in prioritizing this feature.
Was looking at in-page search solutions (not external).
Page title would be a good start. Another one that I was looking at was index of Page titles + headers.
Okay, thanks! Doing this without up-front indexing might prove difficult, since (Markdown) pages are loaded asynchronously. The only way besides eagerly loading all content would be to have a build step which creates such an index.
The question is if Catalog should provide that out-of-the-box or if there "just" needs to be an insertion point for something like lunr.
I was thinking something like:
Option 1: On first load, index step occurs (maybe as a web worker?) Option 2: locally (or CI/or wherever), someone runs a standalone 'task' that generates a 'index file', and that index file is deployed with along with the html, js, assets, and md files.
We're also seeing a need for something like this as the "Components" folder is getting quite large. A simple "title" search/filter at the top of the sidebar would make sense in my head. This could be as simple as showing/hiding <li> elements in the sidebar as you type.
Quick and dirty example:
I'd also recommend using something like js-worker-search - something I've used for similar cases that works efficiently.
This could probably be cleaned up a little bit but here's a basic implementation that simply filters the menu items as @bnhovde suggested above.
https://github.com/MarkMurphy/catalog/tree/search
Happy to turn this into a pull request.
What do we need in order to move this along? IMO, search is a crucial feature for a style guide that's intended to be used by multiple parties.
As i can see this is not still implemented.
@herrstucki @rtessier is there a need still to implement this?
I am willing to do it.
Just chiming in also on this feature. I love this lib for design system documentation, and if feels like a lack of search is holding it back from being a top go to lib for a lot of teams. Is there any way to iterate on this idea? Start small and make page content filterable, like @bnhovde mentioned? It looks like #313 solves for this.
Maybe this is being included in version 4?
I agree, Search feels like such a foundational piece of functionality that I'm sure it would hold a lot of teams back from adopting Catalog. Any new thinking on this feature? Looks like it's gone dormant.... 😔
