ang-zeyu / infisearch

Easy and flexible client-side search for static sites
https://infi-search.com
MIT License
41 stars 1 forks source link
jamstack javascript rust search static-site wasm

InfiSearch

CI workflow

Easy and flexible client-side search for static sites.

Description

InfiSearch is a client-side search solution made for static sites, depending on a pre-built index generated by a CLI tool.

Features

Documentation

The documentation, which uses InfiSearch for its search function, can be found here.

Preview

Some demos of InfiSearch on a much larger Gutenberg collection are also available here.

Getting Started

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.

1. Installing the indexer

There are a couple of options for installing the indexer:

2. Running the indexer

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>

3. Installing the Search UI via CDN

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.

4. UI Initialisation

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/',
  }
});

License

This project is MIT licensed.