SatisPalette

Add it to your site

Copy widget.js, create a search.json file, and add this before the widget script on each page:

<script>
  window.CommandPaletteConfig = {
    data: "./search.json",
    theme: "light"
  };
</script>
<script src="./widget.js"></script>

theme is "light" or "dark". If you leave out data, the widget looks for /search.json at the site root.

Build the index

The index is a JSON list of pages. Each page needs a url, and a title is optional.

[
  { "title": "Home", "url": "./index.html" },
  { "title": "Documentation", "url": "./docs.html" }
]

At start-up the widget fetches each page and indexes its title and visible text in the browser. Serve your site over HTTP(S) and make sure the pages can be fetched from where the widget runs.

Using it

• Ctrl+K opens and closes the palette
• Type to search page titles and text
• Up and Down move through the results, Enter opens the highlighted one
• Escape closes the palette

Good to know

• Search is a simple, case-insensitive substring match
• It shows up to ten results
• Every indexed page is fetched in the visitor's browser
• Light and dark themes are built in