Instant search/filtering for Markdown documents and static webpages
npm install @benchristel/hypersearchInstant search/filtering for Markdown documents and static webpages.
Perhaps you've created a static site with a Markdown-to-HTML generator like Hugo, Jekyll, or mdsite.
Perhaps you've got a page with a curated list of links - essentially a public bookmarks folder.
Perhaps you'd like to set that page as your homepage, so your awesome collection of bookmarks can be your portal to the entire web.
There's just one problem, though: the page isn't conveniently searchable. You're not going to click on any of the links you've so carefully curated if you have to scroll down the page and look at each one with your eyeballs.
hypersearch solves that problem.
``markdown
- Yes
- Genesis
- Jethro Tull
...
The elements between the
and data-hypersearch-end marker elements will get filtered when you type in the search field.$3
You probably don't want to show a blank screen when there are no results for a search query.
If you create an element with the class
.hypersearch-no-results, the .hypersearch-no-results-shown class will be added to it whenever there are no results. Then you can style the element appropriately:`css
.hypersearch-no-results {
display: none;
}.hypersearch-no-results.hypersearch-no-results-shown {
display: block;
}
`html
No results.
`$3
By default, hypersearch shows elements which:
- have
matching the search term.
- OR are under a heading whose innerText matches the search term.Sometimes, though, searching by user-visible text isn't good enough. You might want
to customize the search keywords associated with an element, e.g. so users can search
for synonyms of the visible words.
To add search keywords to an element, you can add an [inert] element and make it invisible with CSS.
[inert]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
`markdown- Online Photo Editor
picture image
`css
[inert] {
position: absolute;
height: 0;
overflow: hidden;
}
`Development
You don't need to read this section unless you are working on hypersearch itself.
- Start the dev server by running
.
- Tests run in the browser.
- Types are checked by running yarn tsc -w.$3
Before you release, remember to manually update the version number referenced
in this README to the version you are about to release.
`bash
builds the code, commits it, and tags the commit with the new version number
yarn versiongit push && git push --tags
npm publish
``