Search

Tangly ships Cmd+K search with no third-party service required. The index is built when you run tangly build and served as static assets next to the rest of your site.

How it works

1. Index at build

   tangly build walks every rendered HTML file in dist/, extracts the content inside the data-pagefind-body region (set by your theme’s Layout), and writes a static index to dist/pagefind/.

2. Lazy load on first open

   The <SearchModal> component lives in every page but doesn’t fetch the index until the user presses Cmd+K. The Pagefind client is ~30 KB gzipped.

3. Highlights + slug-based result navigation

   Results show the page title (from data-pagefind-meta="title:..."), an excerpt with <mark> highlights around matches, and link to /<slug>.

Excluding pages

Both filters work the same way — the page never enters the search index.

---
title: Internal note
draft: true
---

---
title: Legal page
noindex: true
---

tangly build reports how many pages were excluded:

Pagefind: 47 pages indexed, 2 excluded

Configuration

{
  "search": {
    "prompt": "Search the docs…"
  }
}

The prompt becomes the placeholder text in the search input. More search options (fuzzy threshold, result limits) will land later.

Hosting

The dist/pagefind/ directory must be served as static assets by your host. Vercel, Cloudflare Pages, Netlify, S3+CloudFront, and any plain static host work without additional config.

Customizing the modal

The default modal is a single Astro file at @tanglydocs/theme-tang/SearchModal.astro (or theme-pith/). Drop an override at ./components/SearchModal.astro in your project to replace it; component shadowing routes the import there.