Skip to content

Redesign navbar + footer, add ⌘K command menu with full-text search#24

Merged
karngyan merged 1 commit into
mainfrom
feat/nav-footer-command-menu
Jul 17, 2026
Merged

Redesign navbar + footer, add ⌘K command menu with full-text search#24
karngyan merged 1 commit into
mainfrom
feat/nav-footer-command-menu

Conversation

@karngyan

Copy link
Copy Markdown
Contributor

Revamps the site chrome and README.

Navbar

  • Product-style bar: search pill (⌘K), live GitHub star chip (fetched from the GitHub API, localStorage-cached, no layout shift), theme toggle, Get started.
  • Collapses on small screens to a search icon + hamburger sheet — mobile finally has real nav (search, full link list, CTA, socials).
  • Opens the command menu on ⌘K / Ctrl+K / /.

Footer

  • Oversized reins wordmark signature, brand block + Product/Docs/Project columns.
  • X / GitHub / npm social icons and "Built by Karn and AI agents."

⌘K command menu (cmdk + Pagefind)

  • Curated Pages / Actions / Links, filtered client-side.
  • Full-text docs search via Pagefind — indexed at build from data-pagefind-body, lazy-loaded /pagefind/ bundle, real excerpts with match highlighting. Static, works on Cloudflare; dev gracefully falls back to curated items only (no index).
  • Build now runs pagefind --site dist/client after vite build.

Hero mock polish

  • Dark browser background → true near-black, brighter (less brown) amber "controlling this browser" banner, softer outer border.

README

  • Slimmed to a quick-start; the deep material (commands, comparison, security) now links to reins.tech/docs.
  • Regenerated hero-light/hero-dark with no background frame (transparent rounded corners).

New deps

  • cmdk (command menu), pagefind (dev, build-time index).

Verify

  • pnpm --filter @reins/web typecheck ✓ · pnpm lint ✓ · pnpm --filter @reins/web build ✓ (Pagefind indexes 8 docs pages)
  • Manually verified light/dark, the ⌘K palette, full-text results, and the mobile sheet in a real browser.

🤖 Generated with Claude Code

…xt search

Navbar (site-header):
- product-style bar: search pill (⌘K), live GitHub star chip, theme, CTA
- responsive collapse to a search icon + hamburger sheet mobile nav
- ⌘K / Ctrl+K / "/" open the command menu

Footer (site-footer):
- oversized "reins" wordmark signature, brand block + link columns
- X / GitHub / npm social icons, "Built by Karn and AI agents."

Command menu (cmdk + Pagefind):
- curated Pages / Actions / Links, filtered client-side
- full-text docs search via Pagefind, indexed at build (data-pagefind-body)
  and lazy-loaded; dev falls back to curated items only
- build script runs `pagefind --site dist/client` after `vite build`

Hero mock polish:
- dark browser background to true near-black, brighter (less brown) amber
  "controlling this browser" banner, softer outer border

README:
- slimmed to a quick-start; deep content now links to reins.tech/docs
- regenerated hero-light/hero-dark with no background frame (transparent
  rounded corners)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@karngyan
karngyan merged commit fbaa286 into main Jul 17, 2026
2 checks passed
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.

1 participant