Instant Search for Astro — Islands, Static & Edge Ready

---
// src/pages/search.astro
import SearchIsland from '../components/SearchIsland.tsx';
import BaseLayout from '../layouts/BaseLayout.astro';

// Pre-fetch content for SSR (optional)
const allPosts = await Astro.glob('../content/blog/*.md');
---

<BaseLayout title="Search">
  <h1>Search Our Content</h1>

  {/* SearchJet hydrates as an island — rest stays static */}
  <SearchIsland
    client:load
    indexName="blog"
    searchApiKey="your_search_api_key"
  />
</BaseLayout>

// src/components/SearchIsland.tsx
import { SearchProvider, SearchBox, Hits, Highlight } from '@searchjet/react';

export default function SearchIsland({ indexName, searchApiKey }) {
  return (
    <SearchProvider indexName={indexName} searchApiKey={searchApiKey}>
      <SearchBox placeholder="Search articles..." />
      <Hits>
        {({ hit }) => (
          <article class="p-4 border-b">
            <h3>
              <Highlight attribute="title" hit={hit} />
            </h3>
            <p>
              <Highlight attribute="description" hit={hit} />
            </p>
            <time>{hit.date}</time>
          </article>
        )}
      </Hits>
    </SearchProvider>
  );
}

// Content Collection Indexing Script
// scripts/index-content.ts
import { defineConfig } from 'astro/config';

async function indexContent() {
  const posts = await getCollection('blog');
  
  const documents = posts.map(post => ({
    objectID: post.slug,
    title: post.data.title,
    description: post.data.description,
    content: post.body,
    date: post.data.date.toISOString(),
    tags: post.data.tags || [],
  }));

  await searchjet.index(documents);
  console.log(`Indexed ${documents.length} posts`);
}