Easy and flexible client-side search for static sites.
InfiSearch is a client-side search solution made for static sites, depending on a pre-built index generated by a CLI tool.
.json,csv,pdf,html
) to satisfy more custom data requirements.The documentation, which uses InfiSearch for its search function, can be found here.
Some demos of InfiSearch on a much larger Gutenberg collection are also available here.
Powering static site search with InfiSearch is extremely easy, and requires just a folder of your HTML files โ titles, headings, and other text are automatically extracted. Links to your pages are automatically generated based on your folder structure, but can also be manually specified.
There are a couple of options for installing the indexer:
npm install -g @infisearch/cli
.cargo install infisearch --vers 0.10.1
.Run the executable as such, replacing <source-folder-path>
with the relative or absolute folder path of your source html files, and <output-folder-path>
with your desired index output folder.
infisearch <source-folder-path> <output-folder-path>
Add the following resources to your pages:
<!-- Search UI script -->
<script src="https://cdn.jsdelivr.net/gh/ang-zeyu/infisearch@v0.10.1/packages/search-ui/dist/search-ui.ascii.bundle.js"></script>
<!-- Search UI css, this provides some basic styling for the search dropdown, and can be omitted if desired -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ang-zeyu/infisearch@v0.10.1/packages/search-ui/dist/search-ui-light.css" />
If you wish to host the files, you can find them in the <output-folder-path>/assets
directory generated by the indexer, or in the releases page.
Give any <input>
element in your page an id
of infi-search
, then call:
infisearch.init({
searcherOptions: {
// Output folder URL specified as the second parameter in the cli command
// URLs like '/output/' will work as well
url: 'http://<your-domain>/output/',
},
uiOptions: {
// Input folder URL specified as the first parameter in the cli command
// This is where the generated result preview links will point to,
// and where you host your site.
sourceFilesUrl: 'http://<your-domain>/source/',
}
});
This project is MIT licensed.