Morsels

Easy, precise, and efficient client-side search for static sites.

Description

Morsels is a client-side search solution made for static sites, including a search UI and library that depends on a pre-built index generated by a command-line tool.

Features

Feature-rich, Relevant Search 🔍: spelling correction, automatic prefix search, boolean and phrase queries, BM25 scoring, proximity scoring, persistent caching, and more.
WebAssembly & WebWorker powered, enabling efficient, non-blocking query processing
Multi-threaded 🏇 CLI indexer powered by Rust
Semi-Scalable, achieved by optionally splitting the index into tiny morsels, and complete with incremental indexing.
A customisable, accessible user interface 🖥️

Use Cases

The aim is to provide an easy to set up, yet feature-rich, and efficient search solution for static sites and/or static site generators.

A few other file formats (.json, .csv, .pdf, .html) are also supported, which can help satisfy more custom data requirements (e.g. linking to another domain).

Documentation

The documentation, which also uses Morsels for its search function, is available here.

Check out the website here as well!

Getting Started

Powering static site search with Morsels is extremely easy, and requires just a folder of your HTML files! Titles, links, headings, etc. are automatically sourced, assuming your folder structure follows how your site's pages are layed out as well.

1. Installing the indexer

If you have the rust / cargo toolchains setup, simply run cargo install morsels_indexer --vers 0.5.0.

Alternatively, download the cli binaries here.

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.

morsels <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/morsels@v0.5.0/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/morsels@v0.5.0/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 morsels-search, then call:

initMorsels({
  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 / source folder url, specified as the first parameter in the cli command
    sourceFilesUrl: 'http://<your-domain>/source/',
  }
});

License

This project is MIT licensed.

morsels_common 0.5.0