spike(search): add MiniSearch-backed custom docs content search

Author: thorthelegend99

packages/core/eventcatalog/src/components/Search/SearchModal.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useState, useEffect, useMemo, useRef } from 'react';
+import MiniSearch from 'minisearch';
 import { Combobox, Dialog, Transition } from '@headlessui/react';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import {
@@ -42,6 +43,7 @@ const typeIcons: any = {
   AsyncAPI: DocumentTextIcon,
   Design: Square2StackIcon,
   Container: CircleStackIcon,
+  Doc: DocumentTextIcon,
   default: DocumentTextIcon,
 };
 
@@ -61,6 +63,7 @@ const typeColors: any = {
   AsyncAPI: 'text-violet-500 dark:text-violet-400 bg-violet-50 dark:bg-violet-500/10 ring-violet-200 dark:ring-violet-500/30',
   Design: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
   Container: 'text-indigo-500 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 ring-indigo-200 dark:ring-indigo-500/30',
+  Doc: 'text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-500/10 ring-slate-200 dark:ring-slate-500/30',
   default: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
 };
 
@@ -118,6 +121,17 @@ interface SearchIndexPayload {
   items?: SearchNode[];
 }
 
+interface DocsSearchIndexItemCompact {
+  i: string;
+  t: string;
+  u: string;
+  c: string;
+}
+
+interface DocsSearchIndexPayload {
+  i?: DocsSearchIndexItemCompact[];
+}
+
 const normalizeSearchIndexPayload = (payload: SearchIndexPayload): SearchNode[] => {
   if (payload.i) {
     return payload.i.map((item) => ({
@@ -137,7 +151,9 @@ export default function SearchModal() {
   const [open, setOpen] = useState(false);
   const [activeFilter, setActiveFilter] = useState('all');
   const [searchNodes, setSearchNodes] = useState<SearchNode[]>([]);
+  const [docsIndexItems, setDocsIndexItems] = useState<DocsSearchIndexItemCompact[]>([]);
   const [isLoadingSearchIndex, setIsLoadingSearchIndex] = useState(false);
+  const [isLoadingDocsIndex, setIsLoadingDocsIndex] = useState(false);
   const [searchIndexLoadError, setSearchIndexLoadError] = useState<string | null>(null);
   const favorites = useStore(favoritesStore);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -185,6 +201,33 @@ export default function SearchModal() {
       });
   }, [open, searchNodes.length, isLoadingSearchIndex]);
 
+  useEffect(() => {
+    if (!open || query.trim().length < 2 || docsIndexItems.length > 0 || isLoadingDocsIndex) {
+      return;
+    }
+
+    setIsLoadingDocsIndex(true);
+
+    const apiUrl = buildUrl('/api/search-docs-index.json', true);
+
+    fetch(apiUrl)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch docs search index: ${response.status}`);
+        }
+        return response.json() as Promise<DocsSearchIndexPayload>;
+      })
+      .then((payload) => {
+        setDocsIndexItems(payload.i || []);
+      })
+      .catch(() => {
+        // non-blocking for regular search experience
+      })
+      .finally(() => {
+        setIsLoadingDocsIndex(false);
+      });
+  }, [open, query, docsIndexItems.length, isLoadingDocsIndex]);
+
   const closeModal = () => {
     if ((window as any).searchModalState) {
       (window as any).searchModalState.close();
@@ -295,6 +338,28 @@ export default function SearchModal() {
     return new Map(searchNodes.map((node) => [node.key, node]));
   }, [searchNodes]);
 
+  const docsMiniSearch = useMemo(() => {
+    if (docsIndexItems.length === 0) return null;
+
+    const index = new MiniSearch<DocsSearchIndexItemCompact>({
+      fields: ['t', 'c'],
+      storeFields: ['i', 't', 'u', 'c'],
+      searchOptions: {
+        fuzzy: 0.2,
+        prefix: true,
+      },
+    });
+
+    index.addAll(docsIndexItems);
+    return index;
+  }, [docsIndexItems]);
+
+  const docsSearchResults = useMemo<DocsSearchIndexItemCompact[]>(() => {
+    if (!docsMiniSearch || query.trim().length < 2) return [];
+
+    return docsMiniSearch.search(query, { fuzzy: 0.2, prefix: true, boost: { t: 3, c: 1 } }).slice(0, 20) as any;
+  }, [docsMiniSearch, query]);
+
   const filteredItems = useMemo(() => {
     if (query === '') {
       // Show favorites when search is empty
@@ -324,6 +389,17 @@ export default function SearchModal() {
     // Start with searchable items (already filtered by query)
     let result = searchableItems;
 
+    const docsItems = docsSearchResults.map((doc: DocsSearchIndexItemCompact) => ({
+      id: `doc:${doc.i}`,
+      name: doc.t,
+      url: buildUrl(doc.u),
+      type: 'Doc',
+      key: `doc:${doc.i}`,
+      rawNode: {
+        summary: doc.c.slice(0, 120),
+      },
+    }));
+
     // Apply type filter
     if (activeFilter !== 'all') {
       if (activeFilter === 'Message') {
@@ -335,8 +411,10 @@ export default function SearchModal() {
       }
     }
 
-    return result.slice(0, 50); // Limit results for performance
-  }, [searchableItems, query, activeFilter, favorites, searchNodeLookup]);
+    const merged = activeFilter === 'all' ? [...result, ...docsItems] : result;
+
+    return merged.slice(0, 50); // Limit results for performance
+  }, [searchableItems, query, activeFilter, favorites, searchNodeLookup, docsSearchResults]);
 
   return (
     <Transition.Root

packages/core/eventcatalog/src/pages/api/search-docs-index.json.ts

@@ -0,0 +1,61 @@
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+
+const isDev = import.meta.env.DEV;
+
+interface DocsSearchItemCompact {
+  i: string;
+  t: string;
+  u: string;
+  c: string;
+}
+
+const MAX_CONTENT_LENGTH = 5000;
+
+const stripMarkdown = (value: string) => {
+  return value
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/`[^`]*`/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/[>*_~#-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+};
+
+const toDocsItem = (entry: any): DocsSearchItemCompact | null => {
+  const id = entry?.id as string | undefined;
+  if (!id) return null;
+
+  const body = typeof entry?.body === 'string' ? entry.body : '';
+  const content = stripMarkdown(body).slice(0, MAX_CONTENT_LENGTH);
+  if (!content) return null;
+
+  const title = (entry?.data?.title as string | undefined) || id.split('/').pop() || id;
+
+  return {
+    i: id,
+    t: title,
+    u: `/docs/${id}`,
+    c: content,
+  };
+};
+
+export const GET: APIRoute = async () => {
+  const [customPages, pages] = await Promise.all([getCollection('customPages'), getCollection('pages')]);
+
+  const items = [...customPages, ...pages].map(toDocsItem).filter((item): item is DocsSearchItemCompact => Boolean(item));
+
+  return new Response(JSON.stringify({ i: items }), {
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': isDev
+        ? 'no-cache, no-store, must-revalidate'
+        : 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400',
+      Vary: 'Accept-Encoding',
+    },
+  });
+};
+
+export const prerender = !isDev;

packages/core/package.json

@@ -106,6 +106,7 @@
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
     "mdast-util-find-and-replace": "^3.0.2",
+    "minisearch": "^7.1.2",
     "mermaid": "^11.12.1",
     "nanostores": "^1.1.0",
     "pako": "^2.1.0",