refactor(search): refactor search logic to query across distinct content sections #7

Author: danieIabel

assets/js/search.js

@@ -6,6 +6,7 @@
 const dataJSON = '{{ $searchData.RelPermalink }}'
 const input = document.getElementById('search-input')
 const results = document.getElementById('search-results')
+const currentVersion = document.getElementById('current-version')
 
 // eslint-disable-next-line no-undef
 const index = FlexSearch.Index({
@@ -16,6 +17,21 @@ const index = FlexSearch.Index({
 // Object to store documents and sections
 const documents = {}
 
+function getCurrentVersion () {
+  if (currentVersion) {
+    return currentVersion.innerText.trim()
+  }
+
+  const path = window.location.pathname.split('/')
+  const version = path[1]
+
+  if (version && version.length > 0) {
+    return version
+  }
+
+  return null
+}
+
 // Main function to initialize the search
 async function initSearch () {
   input.removeEventListener('focus', initSearch)
@@ -55,8 +71,15 @@ async function search () {
   if (!input.value) return
 
   try {
-    const hits = await index.searchAsync(input.value, 10)
-    const groupedHits = groupResultsByParent(hits)
+    const hits = await index.searchAsync(input.value, 100)
+
+    const currentVersion = getCurrentVersion()
+    const filteredHits = hits.filter(hitId => {
+      const page = documents.pages.find(doc => doc.id === hitId)
+      return page && page.parent.startsWith(`/${currentVersion}/`)
+    })
+
+    const groupedHits = groupResultsByParent(filteredHits)
 
     // Display grouped results
     displayGroupedResults(groupedHits)
@@ -157,7 +180,11 @@ function stringToHTML (str) {
 // Function to initialize search events when the input is focused or when typing
 function initSearchEvents () {
   input.addEventListener('focus', initSearch)
-  input.addEventListener('keyup', search)
+  input.addEventListener('keyup', (event) => {
+    if (event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete') {
+      search()
+    }
+  })
 }
 
 // Initialize the search events

assets/json/index.json

@@ -1,13 +1,13 @@
 {{- $.Scratch.Add "index" slice -}}
 {{- $.Scratch.Add "sections" (dict) -}}
 {{- $section := $.Site.GetPage .Section }}
-{{- $regex := "/(?:[a-z]{2}/)?[^/]+/([^/]+)/.*$" }}
+{{- $regex := "^(/[^/]+/[^/]+/)(.*)$" -}}
+{{- $langPrefix := "^/[a-z]{2}/" -}}
 
 {{- range $index, $page := .Site.Pages -}}
-  {{- if or (and (.IsDescendant $section) (and (not .Draft) (not .Params.hidden))) $section.IsHome -}}
-    {{- if .File -}}
-
-    {{- $parentSection := (replaceRE $regex "$1" $page.RelPermalink) -}}
+  {{- if .File -}}
+    {{- $cleanPath := replaceRE $langPrefix "/" $page.RelPermalink -}}
+    {{- $parentSection := (replaceRE $regex "$1" $cleanPath) -}}
     {{- $parentPage := $.Site.GetPage $parentSection -}}
     {{- $parentIcon := $parentPage.Params.icon | default "bookmark" -}}
     {{- $parentIconSVG := (resources.Get (printf "icons/%s.svg" $parentIcon)) | default "" -}}
@@ -26,12 +26,10 @@
     {{- $.Scratch.Add "index" (dict 
       "id" $index 
       "url" $page.RelPermalink 
-      "summary" (truncate 200 $page.Plain)
+      "summary" (truncate 120 $page.Plain)
       "title" $page.Title 
       "parent" $parentSection 
     ) -}}
-
-    {{- end -}}
   {{- end -}}
 {{- end -}}
 

assets/scss/components/_search.scss

@@ -11,9 +11,13 @@
     pointer-events: none;
   }
 
-  &-toggle span {
-    @include breakpoint(l, max) {
-      display: none;
+  &-toggle {
+    outline: none;
+
+    span {
+      @include breakpoint(l, max) {
+        display: none;
+      }
     }
   }
 
@@ -34,11 +38,22 @@
   &-form {
     padding: var(--search-padding);
     border-bottom: 1px solid var(--color-border);
-    display: flex;
     font-size: 1rem;
-    align-items: center;
   }
 
+  &-footer {
+    padding: var(--search-padding);
+    border-top: 1px solid var(--color-border);
+    gap: 1rem;
+
+    kbd {
+      margin-right: .25rem;
+      font-size: .75rem;
+    }
+  }
+
+  &-version {}
+
   &-icon {
     flex: none;
     margin-right: 1rem;

layouts/partials/search.html

@@ -1,6 +1,6 @@
 <div class="search" id="search-box">
   <div class="search-content">
-    <div class="search-form">
+    <div class="search-form flex items-center ">
       <label class="search-icon">{{ partial "svg" (dict "icon" "search") }}</label>
       <input class="search-input" id="search-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder='{{- i18n "search_in_doc" -}}' maxlength="64"/>
       <button data-close="" aria-label='{{ i18n "close" }}' class="search-close">
@@ -10,6 +10,12 @@
     <div class="search-results">
       <div class="search-list" id="search-results"></div>
     </div>
+    <div class="search-footer flex items-center">
+      <span class="search-keyboard">
+        <kbd>ESC</kbd>
+        {{ i18n "to_close" }}
+      </span>
+    </div>
   </div>
 </div>
 <div class="overlay"></div>