Updates to search page

Author: webstackdev

_TODO.md

@@ -217,25 +217,4 @@ All code samples in this article are licensed under the MIT License. Feel free t
 
 ## Search
 
-- How do we handle the keywords in the long form / pdf files from a search perspective? Can we return the result in the search results if the short form content is not returned in the search results, and highlight it somehow in the search results to show that it is gated content? And clicking on its link takes the user to the Download page for that item?
-
-- Search box in header should have blue outline, not highlight
-
-- going to the search page with a query appended gives a 404 error
-
-- Search box on the search page is not working
-
-```json
-[{
-  "id": "unique-id-from-crawler",
-  "score": 0.985,
-  "content": {
-    "text": "The full body content extracted from the crawled article..."
-  },
-  "metadata": {
-    "url": "https://example.com",
-    "title": "Introduction to Vector Search",
-    "description": "Learn the basics of how vector databases work."
-  }
-}]
-```
+- The modal on the search page should be different than returning results - maybe the page results should update as you type

src/components/Header/index.css

@@ -98,7 +98,11 @@
   background-color: var(--color-page-offset);
   content: '';
   display: block;
-  inset: 0;
+  height: 100%;
+  left: 50%;
   position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  width: 100vw;
   z-index: var(--z-underlay);
 }

src/components/Icon/index.astro

@@ -6,7 +6,7 @@ export type Props = {
   icon: string
   /**
    * The name of a Tailwind theme color CSS variable without the `--theme-color-` prefix.
-   * Example: 'primary', 'text-content', 'green-500'. Defaults to "inherit". Icon files
+   * Example: 'primary', 'content', 'green-500'. Defaults to "inherit". Icon files
    * apply the value to their stroke and fill attributes as appropriate for the image.
    */
   color?: string

src/components/Search/SearchBar/client/__tests__/index.spec.ts

@@ -178,7 +178,7 @@ describe('SearchBar web component', () => {
       expect(titleRow?.className).toContain('text-page-inverse')
 
       const arrow = firstLink?.querySelector('svg') as SVGElement | null
-      expect(arrow?.className.baseVal).toContain('text-gray-400')
+      expect(arrow?.getAttribute('class')).toContain('text-gray-400')
     })
 
     vi.useRealTimers()

src/components/Search/SearchBar/client/__tests__/results.spec.ts

@@ -45,4 +45,14 @@ describe('SearchBar result helpers', () => {
   it('returns plain text when there is no highlightable query term', () => {
     expect(highlightSearchText('Introduction to Vector Search', 'v')).toBe('Introduction to Vector Search')
   })
+
+  it('highlights terms containing regex metacharacters without using regex semantics', () => {
+    const highlighted = highlightSearchText('C++ patterns for teams', 'c++')
+
+    expect(Array.isArray(highlighted)).toBe(true)
+
+    const highlightedParts = highlighted as Array<string | { values?: unknown[] }>
+    expect(highlightedParts.some(part => typeof part === 'string' && part.includes(' patterns for teams'))).toBe(true)
+    expect(highlightedParts.some(part => typeof part !== 'string')).toBe(true)
+  })
 })

src/components/Search/SearchBar/client/results.ts

@@ -9,14 +9,34 @@ interface HighlightSearchTextOptions {
   highlightClassName?: string
 }
 
-const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-
 const getHighlightTerms = (query: string): string[] => {
   return [...new Set(query.trim().split(/\s+/).filter(term => term.length >= MIN_HIGHLIGHT_TERM_LENGTH))].sort(
     (left, right) => right.length - left.length
   )
 }
 
+const findNextHighlightMatch = (
+  normalizedText: string,
+  normalizedTerms: string[],
+  startIndex: number
+): { index: number; term: string } | null => {
+  let nextMatch: { index: number; term: string } | null = null
+
+  for (const term of normalizedTerms) {
+    const index = normalizedText.indexOf(term, startIndex)
+
+    if (index < 0) {
+      continue
+    }
+
+    if (!nextMatch || index < nextMatch.index || (index === nextMatch.index && term.length > nextMatch.term.length)) {
+      nextMatch = { index, term }
+    }
+  }
+
+  return nextMatch
+}
+
 export const getSearchResultDisplayPath = (url: string): string => {
   if (!url) {
     return SEARCH_RESULT_FALLBACK_PATH
@@ -46,24 +66,26 @@ export const highlightSearchText = (
     return text
   }
 
-  const pattern = new RegExp(`(${highlightTerms.map(term => escapeRegExp(term)).join('|')})`, 'gi')
   const parts: HighlightChunk[] = []
+  const normalizedText = text.toLocaleLowerCase()
+  const normalizedTerms = highlightTerms.map(term => term.toLocaleLowerCase())
   let cursor = 0
 
-  for (const match of text.matchAll(pattern)) {
-    const matchText = match[0]
-    const matchIndex = match.index ?? -1
+  while (cursor < text.length) {
+    const nextMatch = findNextHighlightMatch(normalizedText, normalizedTerms, cursor)
 
-    if (!matchText || matchIndex < 0) {
-      continue
+    if (!nextMatch) {
+      break
     }
 
-    if (matchIndex > cursor) {
-      parts.push(text.slice(cursor, matchIndex))
+    if (nextMatch.index > cursor) {
+      parts.push(text.slice(cursor, nextMatch.index))
     }
 
+    const matchText = text.slice(nextMatch.index, nextMatch.index + nextMatch.term.length)
+
     parts.push(html`<mark class=${highlightClassName}>${matchText}</mark>`)
-    cursor = matchIndex + matchText.length
+    cursor = nextMatch.index + matchText.length
   }
 
   if (parts.length === 0) {