Site search

A search box over your own site, for docs, a help center, or a blog: when you publish, Mockly makes an index of your pages, and siteSearch finds the ones a visitor's words are in, as they type. You design the box and the results, as any part of an island.

import { For, Show, siteSearch, state } from "mockly"; export function DocSearch() {  const query = state("");  const hits = siteSearch(() => query.value, { limit: 8, under: "/docs" });  return (    <div class="relative">      <input        type="search"        aria-label="Search the docs"        placeholder="Search the docs"        class="w-full rounded-lg border px-3 py-2"        onInput={(e) => { query.value = e.currentTarget.value; }}      />      <Show when={query.value !== ""}>        <ul class="mt-2 divide-y rounded-lg border">          <For each={hits.value}>            {(hit) => (              <li>                <a href={hit.url} class="block px-3 py-2 hover:bg-gray-50">                  <span class="font-medium">{hit.title}</span>                  <span class="block text-sm text-gray-600">{hit.excerpt}</span>                </a>              </li>            )}          </For>        </ul>      </Show>    </div>  );}

hits.value is a list of the pages found, best first, each with its url, its title, and an excerpt: a line of its words around what was found.

What's found#

• Every word of the query is somewhere in the page, in any case. A word in its title counts most, then its headings, its description, and the rest of its words.
• What a visitor reads: each page's title and description, its h1 to h3, and the words of its <main>, or of the whole page without one. Navigation, headers, footers, dialogs, and what's hidden are left out, and so are pages with noindex. Experiments are indexed as their control shows.
• When you publish: the index is made with your pages, so a new page or a changed one is found after the next publish. In the studio, the preview searches what you've saved.

Good to know#

• It needs JavaScript. The page is sent with nothing found, and the index loads with the first word typed, once.
• Results are yours to style. Show them in a list, a dropdown, or a dialog that ⌘K opens; see Interactive parts.
• Only a site that searches gets an index, so other sites publish exactly as before.