Skip to content

feat(docs): improve search with Pagefind tuning, section badges, and test coverage#482

Merged
bradygaster merged 6 commits intobradygaster:devfrom
diberry:squad/docs-search-phase1
Mar 22, 2026
Merged

feat(docs): improve search with Pagefind tuning, section badges, and test coverage#482
bradygaster merged 6 commits intobradygaster:devfrom
diberry:squad/docs-search-phase1

Conversation

@diberry
Copy link
Copy Markdown
Collaborator

@diberry diberry commented Mar 21, 2026

🔍 Docs Search Improvements ΓÇö Phase 1

Problem: The Squad docs site search (Pagefind) runs on pure defaults ΓÇö no content weighting, no metadata, no section awareness. Navigation menus, footers, and code blocks pollute results. Users can't tell which section a result comes from.

Solution: Tune Pagefind with minimal, high-impact configuration changes. No content modifications, no new dependencies beyond Playwright for testing.


Before / After

Search: "agent"

Before (live site) After (this PR)
before after

Search: "install"

Before (live site) After (this PR)
before after

Search: "ceremony"

Before (live site) After (this PR)
before after

Key difference: After screenshots show color-coded section badges on every result (Features, Guide, Reference, etc.) and a result count.


What Changed

Change Impact
pagefind.yml config Excludes nav, footer, aside, code blocks from search index
Section metadata (data-pagefind-meta) Every page tagged with its section (Features, Guide, Reference, etc.)
Heading weights (data-pagefind-weight) H2/H3 headings rank 2x higher than body text via rehype plugin
Ignore attributes (data-pagefind-ignore) Nav, footer, sidebar, and <pre> blocks excluded from indexing
Section badges in Search.astro Color-coded badges show which section each result belongs to
Result count Shows total matches (e.g., "124 results")
Blog layout Blog posts tagged with section:Blog metadata

Files Changed (13 files, +497 lines)

  • docs/pagefind.yml ΓÇö NEW: Pagefind configuration
  • docs/src/plugins/rehype-pagefind-attrs.mjs ΓÇö NEW: rehype plugin for heading weights
  • docs/src/components/Search.astro ΓÇö Section badges + result count
  • docs/src/layouts/DocsLayout.astro ΓÇö Section metadata on articles
  • docs/src/components/Footer.astro ΓÇö data-pagefind-ignore
  • docs/src/components/Header.astro ΓÇö data-pagefind-ignore
  • docs/src/components/Sidebar.astro ΓÇö data-pagefind-ignore
  • docs/src/pages/blog/[...slug].astro ΓÇö Blog section metadata
  • docs/astro.config.mjs ΓÇö rehype plugin registration
  • docs/package.json ΓÇö Playwright dev dependency + test script
  • docs/playwright.config.mjs ΓÇö NEW: Playwright config
  • docs/tests/build-output.test.mjs ΓÇö NEW: 13 build output tests
  • docs/tests/search.spec.mjs ΓÇö NEW: 10 Playwright e2e tests

Test Coverage (23 tests)

Build output tests (13): Verify HTML has correct Pagefind attributes.
Playwright e2e tests (10): Live search ΓÇö modal, badges, results, keyboard shortcuts.

Note: Tests are local-only for now. The squad repo CI doesn't build or test the docs site separately. These tests run during development via npm test and npx playwright test. A dedicated docs CI workflow can be added later.

Design Decisions

  • Kept result limit at 8 ΓÇö focus on quality, not quantity
  • Default excerpt length ΓÇö Pagefind defaults are reasonable
  • No content changes ΓÇö Phase 1 is infrastructure only
  • Minimal footprint ΓÇö rehype plugin is 21 lines; pagefind.yml is 12 lines

How to Preview

cd docs && npm run build && npm run preview
# Open http://localhost:4321/squad/ and hit Cmd+K

Copilot AI added 6 commits March 21, 2026 06:00
…ind tuning

Phase 1 of docs search improvements:

- W1.1: Add pagefind.yml with exclude_selectors and longer excerpts (200 chars)
- W1.2: Add data-pagefind-meta section attributes to DocsLayout and blog layout,
  add data-pagefind-weight=2 to h2/h3 via rehype plugin, add data-pagefind-ignore
  to nav, footer, sidebar, and pre elements
- W1.3: Increase search result limit from 8 to 25, add Previous/Next pagination,
  show result count (e.g. Showing 1-25 of 47 results)
- W1.4: Display section badges on search results sourced from Pagefind metadata,
  styled with Tailwind color-coded badges per section

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Keep metadata attributes, section badges, heading weights, and ignore
rules. Roll back pagination UI and custom excerpt length — focus on
more meaningful results with fewest changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… e2e)

Add 23 tests covering all Phase 1 search changes:

Build output tests (13 tests):
- pagefind.yml exists with correct exclude selectors
- pagefind index generated in dist/
- data-pagefind-body on article elements (docs + blog)
- data-pagefind-meta section values on all content pages
- Blog pages have section:Blog metadata
- data-pagefind-weight=2 on h2/h3 inside articles
- data-pagefind-ignore on nav, footer, pre elements

Playwright e2e tests (10 tests):
- Search modal opens via button click and Ctrl+K
- Modal closes on Escape and backdrop click
- Typing a query returns results with section badges
- Results display title and excerpt
- Result count is shown in status bar
- Clicking a result navigates to that page
- Search handles no-results gracefully

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@diberry
Copy link
Copy Markdown
Collaborator Author

diberry commented Mar 21, 2026

@bradygaster This is ready for your review. Our team has reviewed and signed off:

  • Mal (Lead): ✅ Approved — tightly scoped to search, code quality high, architecturally aligned with existing Astro patterns, no risk to existing site.
  • 23 tests (13 build output + 10 Playwright e2e) cover metadata attributes, search UI behavior, section badges, and keyboard shortcuts. Tests are local-only for now until docs gets its own CI.
  • Before/after screenshots included in the PR description showing search results with color-coded section badges.

13 files changed, +497 lines. All additive — no breaking changes.

Copy link
Copy Markdown
Owner

@bradygaster bradygaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PAO review: Search tuning and section badges look great. Rebased on dev with CI fixes from #483, #480, #486.

@bradygaster bradygaster merged commit 1c39d66 into bradygaster:dev Mar 22, 2026
3 of 6 checks passed
chrislomonico pushed a commit to clomonico/squad that referenced this pull request Mar 26, 2026
…aster#482)

* test: human journey — Power user (bradygaster#396)

Add E2E journey test covering advanced shell features:
- /help and /status slash commands
- Tab completion for /commands and @agent names
- Ctrl+C cancel during processing
- Double Ctrl+C exit
- Multiple slash commands in sequence
- @agent direct routing with complex messages

Closes bradygaster#396

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* test: human journey — My first conversation (bradygaster#384)

Add E2E journey test covering a new user's first interaction with Squad:
- Welcome banner display (title, version, agents, help hint)
- First message submission and coordinator routing
- Thinking indicator during processing
- Receiving agent responses via ShellApi
- /help command exploration
- /status agent roster check
- @agent direct message routing
- Graceful exit (exit, quit, Ctrl+C)

28 tests across 8 journey steps using createShellHarness() pattern.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants