Fix leo-buneev#2

Author: Leonid Buneev

components/SearchBox.vue

@@ -25,12 +25,18 @@
         @mouseenter="focus(i)"
       >
         <a :href="s.path + s.slug" @click.prevent>
-          <div v-if="s.parentPageTitle" class="parent-page-title" v-html="highlight(s.parentPageTitle)" />
+          <div v-if="s.parentPageTitle" class="parent-page-title" v-html="s.parentPageTitle" />
           <div class="suggestion-row">
             <div class="page-title">{{ s.title || s.path }}</div>
             <div class="suggestion-content">
-              <div v-if="s.headingStr" class="header">{{ s.headingStr }}</div>
-              <div v-if="s.contentStr">{{ s.contentStr }}</div>
+              <!-- prettier-ignore -->
+              <div v-if="s.headingStr" class="header">
+                {{ s.headingDisplay.prefix }}<span class="highlight">{{ s.headingDisplay.highlightedContent }}</span>{{ s.headingDisplay.suffix }}
+              </div>
+              <!-- prettier-ignore -->
+              <div v-if="s.contentStr">
+                {{ s.contentDisplay.prefix }}<span class="highlight">{{ s.contentDisplay.highlightedContent }}</span>{{ s.contentDisplay.suffix }}
+              </div>
             </div>
           </div>
         </a>
@@ -60,9 +66,8 @@ export default {
   computed: {
     queryTerms() {
       if (!this.query) return []
-      const result = this.query
-        .trim()
-        .toLowerCase()
+      const result = flexsearchSvc
+        .normalizeString(this.query)
         .split(/[^\p{L}\p{N}_]+/iu)
         .filter(t => t)
       return result
@@ -102,28 +107,25 @@ export default {
     document.removeEventListener('keydown', this.onHotkey)
   },
   methods: {
-    highlight(str) {
-      if (!this.queryTerms.length) return str
-      return str
-    },
     async getSuggestions() {
-      if (!this.query) return
-      if (!this.queryTerms.length) {
+      if (!this.query || !this.queryTerms.length) {
         this.suggestions = []
         return
       }
-      const suggestions = await flexsearchSvc.match(
+      let suggestions = await flexsearchSvc.match(
         this.query,
         this.queryTerms,
         this.$site.themeConfig.searchMaxSuggestions || SEARCH_MAX_SUGGESTIONS,
       )
-
-      // augment suggestions with user-provided function
       if (hooks.processSuggestions) {
-        this.suggestions = await hooks.processSuggestions(suggestions, this.query, this.queryTerms)
-      } else {
-        this.suggestions = suggestions
+        // augment suggestions with user-provided function
+        suggestions = await hooks.processSuggestions(suggestions, this.query, this.queryTerms)
       }
+      this.suggestions = suggestions.map(s => ({
+        ...s,
+        headingDisplay: highlight(s.headingStr, s.headingHighlight),
+        contentDisplay: highlight(s.contentStr, s.contentHighlight),
+      }))
     },
     getPageLocalePath(page) {
       for (const localePath in this.$site.locales || {}) {
@@ -210,6 +212,20 @@ export default {
     },
   },
 }
+
+function highlight(str, strHighlight) {
+  if (!str) return {}
+  if (!strHighlight) return { prefix: str }
+  const [start, length] = strHighlight
+  const end = start + length
+
+  const prefix = str.slice(0, start)
+  const highlightedContent = str.slice(start, end)
+  const suffix = str.slice(end)
+  return { prefix, highlightedContent, suffix }
+
+  // return `${prefix}<span class="highlight">${highlightedContent}</span>${suffix}`
+}
 </script>
 
 <style lang="stylus">
@@ -278,6 +294,8 @@ export default {
           padding 5px
           font-weight 600
         .suggestion-content
+          .highlight
+            text-decoration: underline
           border 1px solid $borderColor
           font-weight 400
           border-right none

index.js

@@ -21,12 +21,14 @@ module.exports = (options, ctx, globalCtx) => ({
 
       for (const h of $page.headers || []) {
         const titlePlaintext = $page._context.markdown.renderInline(h.title)
+        h.normalizedTitle = normalizeText(titlePlaintext)
         h.charIndex = plaintext.indexOf(titlePlaintext)
         if (h.charIndex === -1) h.charIndex = null
       }
       $page.headersStr = $page.headers ? $page.headers.map(h => h.title).join(' ') : null
       $page.content = plaintext
-      $page.contentLowercase = plaintext.toLowerCase()
+      $page.normalizedContent = normalizeText(plaintext)
+
       $page.charsets = getCharsets(plaintext)
 
       // Take title from sidebar if it's missing on the page itself
@@ -47,6 +49,13 @@ module.exports = (options, ctx, globalCtx) => ({
   },
 })
 
+function normalizeText(text) {
+  return text
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+}
+
 function getCustomTitles(globalCtx) {
   try {
     const sidebarConfig = _.get(globalCtx, '_pluginContext.themeConfig.sidebar')

services/flexsearchSvc.js

@@ -88,7 +88,7 @@ export default {
     const result = searchResult.map(page => ({
       ...page,
       parentPageTitle: getParentPageTitle(page),
-      ...getAdditionalInfo(page, queryString, queryTerms),
+      ...getAdditionalInfo(page, normalizeString(queryString), queryTerms),
     }))
 
     const resultByParent = _.groupBy(result, 'parentPageTitle')
@@ -101,6 +101,7 @@ export default {
       )
       .flat()
   },
+  normalizeString,
 }
 
 function getParentPageTitle(page) {
@@ -117,15 +118,15 @@ function getAdditionalInfo(page, queryString, queryTerms) {
   const match = getMatch(page, query, queryTerms)
   if (!match)
     return {
-      headingStr: getFullHeading(page),
+      ...getFullHeading(page),
       slug: '',
       contentStr: null,
     }
 
   if (match.headerIndex != null) {
     // header match
     return {
-      headingStr: getFullHeading(page, match.headerIndex),
+      ...getFullHeading(page, match.headerIndex, match),
       slug: '#' + page.headers[match.headerIndex].slug,
       contentStr: null,
     }
@@ -136,22 +137,27 @@ function getAdditionalInfo(page, queryString, queryTerms) {
   if (headerIndex === -1) headerIndex = null
 
   return {
-    headingStr: getFullHeading(page, headerIndex),
+    ...getFullHeading(page, headerIndex),
     slug: headerIndex == null ? '' : '#' + page.headers[headerIndex].slug,
-    contentStr: getContentStr(page, match),
+    ...getContentStr(page, match),
   }
 }
 
-function getFullHeading(page, headerIndex) {
-  if (headerIndex == null) return page.title
+function getFullHeading(page, headerIndex, match) {
+  if (headerIndex == null) return { headingStr: page.title }
   const headersPath = []
   while (headerIndex != null) {
     const header = page.headers[headerIndex]
     headersPath.unshift(header)
     headerIndex = _.findLastIndex(page.headers, h => h.level === header.level - 1, headerIndex - 1)
     if (headerIndex === -1) headerIndex = null
   }
-  return headersPath.map(h => h.title).join(' > ')
+
+  const headingStr = headersPath.map(h => h.title).join(' > ')
+  const prefixPath = headersPath.slice(0, -1)
+  const prefixLength = _.sum(prefixPath.map(p => (p.title || '').length)) + prefixPath.length * 3
+  const headingHighlight = match && match.headerIndex != null && [match.charIndex + prefixLength, match.termLength]
+  return { headingStr, headingHighlight }
 }
 
 function getMatch(page, query, terms) {
@@ -170,12 +176,10 @@ function getMatch(page, query, terms) {
 }
 
 function getHeaderMatch(page, term) {
-  // if (page.slug && page.slug.includes('versioning'))
-  console.log(page)
   if (!page.headers) return null
   for (let i = 0; i < page.headers.length; i++) {
     const h = page.headers[i]
-    const charIndex = h.title.toLowerCase().indexOf(term)
+    const charIndex = h.normalizedTitle.indexOf(term)
     if (charIndex === -1) continue
     return {
       headerIndex: i,
@@ -187,8 +191,8 @@ function getHeaderMatch(page, term) {
 }
 
 function getContentMatch(page, term) {
-  if (!page.contentLowercase) return null
-  const charIndex = page.contentLowercase.indexOf(term)
+  if (!page.normalizedContent) return null
+  const charIndex = page.normalizedContent.indexOf(term)
   if (charIndex === -1) return null
 
   return { headerIndex: null, charIndex, termLength: term.length }
@@ -205,16 +209,33 @@ function getContentStr(page, match) {
   if (lineEndIndex === -1) lineEndIndex = page.content.length
 
   const line = page.content.slice(lineStartIndex, lineEndIndex)
-
-  if (snippetLength >= line.length) return line
-
   const lineCharIndex = charIndex - lineStartIndex
+  const contentHighlight = [lineCharIndex, termLength]
 
-  const additionalCharactersFromStart = (snippetLength - termLength) / 2
+  if (snippetLength >= line.length) return { contentStr: line, contentHighlight }
+
+  const additionalCharactersFromStart = _.round((snippetLength - termLength) / 2)
   const snippetStart = Math.max(lineCharIndex - additionalCharactersFromStart, 0)
   const snippetEnd = Math.min(snippetStart + snippetLength, line.length)
-  let result = line.slice(snippetStart, snippetEnd)
-  if (snippetStart > 0) result = '...' + result
-  if (snippetEnd < line.length) result = result + '...'
-  return result
+  let contentStr = line.slice(snippetStart, snippetEnd)
+  contentHighlight[0] = contentHighlight[0] - snippetStart
+
+  if (snippetStart > 0) {
+    contentStr = '...' + contentStr
+    contentHighlight[0] = contentHighlight[0] + 3
+  }
+  if (snippetEnd < line.length) contentStr = contentStr + '...'
+  return {
+    contentStr,
+    contentHighlight,
+  }
+}
+
+function normalizeString(str) {
+  if (!str) return str
+  return str
+    .trim()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
 }