Log search results to the console for now

Author: dfreeman

addon/components/docs-viewer/x-nav/component.js

@@ -1,5 +1,6 @@
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { debounce } from '@ember/runloop';
 import Component from '@ember/component';
 import layout from './template';
 
@@ -19,7 +20,21 @@ export default Component.extend({
 
   init() {
     this._super();
+
+    // Start downloading the search index immediately
     this.get('docsSearch').loadSearchIndex();
+  },
+
+  search(text) {
+    if (text.trim().length) {
+      this.get('docsSearch').searchAndLog(text);
+    }
+  },
+
+  actions: {
+    search(text) {
+      debounce(this, 'search', text, 250);
+    }
   }
 
   // didInsertElement() {

addon/components/docs-viewer/x-nav/template.hbs

@@ -1,5 +1,5 @@
 <div class="docs-viewer__nav-search">
-  <input type="text" placeholder="Type to search">
+  <input type="text" placeholder="Type to search" oninput={{action 'search' value='target.value'}}>
 </div>
 
 {{#docs-viewer/x-nav-list}}

addon/components/sample-component/component.js

@@ -4,7 +4,7 @@ import layout from './template';
 /**
   Pretty cool component, right?
 
-  Here's how you'd use it:
+  To use it, you could enter the following in your template:
 
   ```handlebars
   {{sample-component foo='bar'}}

addon/services/docs-search.js

@@ -1,30 +1,80 @@
 import Service from '@ember/service';
 import { getOwner } from '@ember/application';
 import { computed } from '@ember/object';
+import { resolve } from 'rsvp';
 import $ from 'jquery';
 import lunr from 'lunr';
 
-export default Service.extend({
-  search(phrase, { exact = false } = {}) {
-    if (!exact) {
-      phrase = `*${phrase}*`;
-    }
+const { Index, Query } = lunr;
 
+export default Service.extend({
+  search(phrase) {
     return this.loadSearchIndex()
       .then(({ index, documents }) => {
-        return index.search(phrase).map(resultInfo => {
+        let words = phrase.split(/\s+/);
+        let results = index.query((query) => {
+          // In the future we could boost results based on the field they come from
+          for (let word of words) {
+            query.term(index.pipeline.runString(word)[0], {
+              wildcard: Query.wildcard.LEADING | Query.wildcard.TRAILING
+            });
+          }
+        })
+
+        return results.map(resultInfo => {
           let document = documents[resultInfo.ref];
           return { resultInfo, document };
         });
       });
   },
 
+  // temporary; just useful for tuning search config for now
+  searchAndLog(phrase) {
+    /* eslint-disable no-console */
+    this.search(phrase)
+      .then(results => {
+        console.group(`Search For '${phrase}'`);
+        for (let result of results) {
+          let doc = result.document;
+          if (doc.type === 'class') {
+            console.groupCollapsed(`Class: %c${doc.title}`, 'font-family: monospace');
+            for (let match of Object.values(result.resultInfo.matchData.metadata)) {
+              for (let [key, data] of Object.entries(match)) {
+                if (key === 'keywords') {
+                  for (let position of data.position) {
+                    console.log(`%c${extractKeyword(doc.keywords, position)} %c(field)`, 'font-family: monospace', 'font-family: inherit');
+                  }
+                } else {
+                  for (let position of data.position) {
+                    logSnippet(doc, key, position);
+                  }
+                }
+              }
+            }
+            console.groupEnd();
+          } else if (doc.type === 'template') {
+            console.groupCollapsed(`Route: %c${doc.route}`, 'font-family: monospace');
+            for (let match of Object.values(result.resultInfo.matchData.metadata)) {
+              for (let [key, data] of Object.entries(match)) {
+                for (let position of data.position) {
+                  logSnippet(doc, key, position);
+                }
+              }
+            }
+            console.groupEnd();
+          }
+        }
+        console.groupEnd();
+      });
+    /* eslint-enable */
+  },
+
   loadSearchIndex() {
     if (!this._searchIndex) {
-      this._searchIndex = $.get(this.get('_indexURL'))
+      this._searchIndex = resolve($.get(this.get('_indexURL')))
         .then(json => {
           return {
-            index: lunr.Index.load(json.index),
+            index: Index.load(json.index),
             documents: json.documents
           };
         });
@@ -38,3 +88,23 @@ export default Service.extend({
     return `${config.rootURL}ember-cli-addon-docs/search-index.json`;
   })
 });
+
+function extractKeyword(keywords, position) {
+  let start = keywords.lastIndexOf('\0', position[0]);
+  start = start === -1 ? 0 : start;
+  let end = keywords.indexOf('\0', position[0] + position[1]);
+  end = end === -1 ? keywords.length : end;
+  return keywords.slice(start, end - start);
+}
+
+function logSnippet(doc, key, position) {
+  let field = doc[key];
+  if (!field) { return; }
+
+  let start = Math.max(position[0] - 15, 0);
+  let end = Math.min(position[0] + position[1] + 15, field.length);
+  let pre = `${start === 0 ? '' : '...'}${field.slice(start, position[0])}`;
+  let snippet = field.slice(position[0], position[0] + position[1]);
+  let post = `${field.slice(position[0] + position[1], end)}${end === field.length ? '' : '...'}`;
+  console.log(`${pre}%c${snippet}%c${post} (${key})`, 'font-weight: bold', 'font-weight: regular'); // eslint-disable-line no-console
+}

lib/broccoli/search-indexer.js

@@ -3,9 +3,12 @@
 const Writer = require('broccoli-caching-writer');
 const lunr = require('lunr');
 const striptags = require('striptags');
+const Entities = require('html-entities').AllHtmlEntities;
 const fs = require('fs-extra');
 const path = require('path');
 
+const htmlEntities = new Entities();
+
 module.exports = class SearchIndexCompiler extends Writer {
   constructor(input, options) {
     super([input]);
@@ -18,14 +21,10 @@ module.exports = class SearchIndexCompiler extends Writer {
     let documents = {};
     let index = lunr(function() {
       this.ref('id');
+      this.metadataWhitelist = ['position'];
 
-      // Document title or class name
       this.field('title');
-
-      // Document contents or class/field descriptions
       this.field('text');
-
-      // Class field names or (in the future?) explicit page keywords
       this.field('keywords');
 
       for (let doc of writer.buildDocuments()) {
@@ -71,10 +70,10 @@ module.exports = class SearchIndexCompiler extends Writer {
       return {
         id: `template:${routePath}`,
         type: 'template',
-        title: contents.title,
-        text: contents.body,
-        route: routePath,
-        keywords: [], // TODO allow for specifying keywords
+        title: normalizeText(contents.title),
+        text: normalizeText(contents.body),
+        route: routePath.replace(/\//g, '.'),
+        keywords: '', // TODO allow for specifying keywords
       };
     }
   }
@@ -97,12 +96,17 @@ module.exports = class SearchIndexCompiler extends Writer {
         id: `class:${item.id}`,
         type: 'class',
         title: item.attributes.name,
-        text: striptags(item.attributes.description),
-        keywords: keywords,
+        text: htmlEntities.decode(striptags(normalizeText(item.attributes.description))),
+        keywords: keywords.join('\0'),
         class: item
       };
     }
   }
 }
 
 const POD_TEMPLATE_REGEX = /\/template\.template-contents$/;
+
+function normalizeText(text) {
+  if (!text) { return text; }
+  return text.replace(/\s+/g, ' ');
+}

package.json

@@ -40,6 +40,7 @@
     "git-repo-version": "^0.4.1",
     "highlightjs": "^9.10.0",
     "hosted-git-info": "^2.5.0",
+    "html-entities": "^1.2.1",
     "inflected": "^2.0.2",
     "lunr": "^2.1.4",
     "marked": "^0.3.6",

yarn.lock

@@ -4229,6 +4229,10 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.1.5, hosted-git-info@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
 
+html-entities@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
 htmlparser2@~3.8.1:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"