@nera-static/plugin-search 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.3] - 2025-07-25
+
+### Change
+- Enhance search.js to show parts of the results text
+
 ## [1.0.2] - 2025-07-25
 
 ### Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nera-static/plugin-search",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A plugin for the Nera static site generator that builds a JSON search index and provides a client-side search script.",
   "main": "index.js",
   "scripts": {

package/views/search.js

@@ -12,21 +12,46 @@ document.addEventListener('DOMContentLoaded', () => {
                 input.addEventListener('input', () => {
                     const query = input.value.toLowerCase()
 
+                    if (!query) {
+                        resultList.innerHTML = ''
+                        return
+                    }
+
                     const results = data.filter((item) => {
-                        return Object.values(item).some(val =>
-                            typeof val === 'string' && val.toLowerCase().includes(query)
-                        )
+                        return Object.values(item).some(val => {
+                            if (typeof val === 'string') {
+                                const lowerVal = val.toLowerCase()
+                                const matchIndex = lowerVal.indexOf(query)
+                                if (matchIndex !== -1) {
+                                    const words = val.split(/\s+/)
+                                    const matchWordIndex = words.findIndex(word => word.toLowerCase().includes(query))
+
+                                    const snippetStart = Math.max(0, matchWordIndex - 5)
+                                    const snippetEnd = Math.min(words.length, matchWordIndex + 6)
+                                    const snippet = words.slice(snippetStart, snippetEnd).join(' ')
+
+                                    const highlighted = snippet.replace(
+                                        new RegExp(`(${query})`, 'ig'),
+                                        '<span class="bg-yellow-100">$1</span>'
+                                    )
+                                    item.resultText = `...${highlighted}...`
+                                    return true
+                                }
+                            }
+
+                            return false
+                        })
                     })
 
                     resultList.innerHTML = results.map((item) => {
                         const title = item.title || item.href || 'Untitled'
-                        const desc = item.excerpt || item.description || ''
+                        const desc = item.excerpt || item.description || item.resultText
                         return `
-                <li class="search__item">
-                    <a class="search__link" href="${item.href}">${title}</a>
-                    ${desc ? `<p class="search__description">${desc}</p>` : ''}
-                </li>
-            `
+                            <li class="list-none">
+                                <a class="" href="${item.href}">${title}</a>
+                                ${desc ? `<p class="">${desc}</p>` : ''}
+                            </li>
+                    `
                     }).join('')
                 })
             })