[WIP] implement-start-of-search

.eleventy.js

@@ -2,6 +2,7 @@ const definitionPermalink = require('./11ty/helpers/definitionPermalink');
 const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
 const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
+const removeMd = require('remove-markdown');
 
 module.exports = function(config) {
   // Add a filter using the Config API
@@ -187,6 +188,27 @@ module.exports = function(config) {
       });
   });
 
+  config.addCollection('search', (collection) => {
+    return collection
+      .getFilteredByGlob('./11ty/definitions/*.md')
+      .sort((a, b) => {
+        // `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+        return a.data.title
+          .toLowerCase()
+          .localeCompare(b.data.title.toLowerCase());
+      });
+  });
+
+  // add filter to strip Markdown formatting from search text
+  config.addFilter('removeMarkdownFormatting', (value) => {
+    return removeMd(value).replace(/[\s\s+,\n]/g, ' ');
+  });
+
+  // add filter to extract text from sub_terms in search template
+  config.addFilter('extractSubTermText', (value) => {
+    return value ? value.map((subterm) => subterm.text).join(',') : '';
+  });
+
   const mdIt = require('markdown-it')({
     html: true
   });

11ty/_includes/components/search.njk

@@ -0,0 +1,71 @@
+<section class="search">
+  <label for="search">Search</label>
+  <input type="search" id="search" class="search" name="search" />
+    <ul id="search-results-list" class="u-no-padding-left list" aria-labelledby="search" />
+</section>
+
+{% block pageScript%}
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+<script>
+  // don't use es6+ here because it will not be transpiled
+  window.addEventListener('DOMContentLoaded', async function() {
+    function buildResultListItem(result) {
+      return `<h4>${result.title}</h4><p>${result.content.substr(0, 100)}</p>`
+    }
+
+    try {
+      // load definitions in as JSON
+      const result = await fetch('/search.json')
+      const definitions = await result.json()
+
+      // create a map based on title for faster retrieval in search results
+      const definitionMap = definitions.reduce((map, definition) => {
+        map[definition.title] = definition
+        return map
+      }, [])
+
+      // create the full text search
+      const idx = lunr(function() {
+        const self = this
+        this.ref('title')
+        this.field('title')
+        this.field('subterms')
+        this.field('content')
+
+        // load definitions into lunr index
+        for (definition in definitions) {
+          self.add(definitions[definition])
+        }
+      })
+
+      const $search = document.querySelector('#search')
+      const $resultsContainer = document.querySelector('#search-results-list')
+
+      $search.addEventListener('change', event => {
+        const value = event.target.value
+
+        if (!event.target.value) {
+          $resultsContainer.innerHTML = ''
+          return
+        }
+
+        const matches = idx.search(`*${event.target.value}*`)
+        const results = matches.map(match => definitionMap[match.ref])
+        console.log({matches, results })
+
+        $resultsContainer.innerHTML = ''
+        results.forEach((result) => {
+          let $childElement = document.createElement('li')
+          $childElement.innerHTML = buildResultListItem(result)
+          $resultsContainer.appendChild($childElement)
+        })
+
+      })
+    } catch (error) {
+      console.log('error in search!', error)
+    }
+
+
+  })
+</script>
+{% endblock %}

11ty/_includes/layouts/index.njk

@@ -5,7 +5,6 @@
   <main>
     {{ content | safe }}
     {% include 'components/table-of-content.njk' %}
-
   </main>
 
 {% endblock %}

11ty/index.njk

@@ -23,4 +23,5 @@ layout: layouts/index.njk
       <li>Follow us on Twitter <a href="https://www.twitter.com/selfdefinedapp">@SelfDefinedApp</a>.</li>
     </ol>
   </div>
+    {% include 'components/search.njk' %}
 </header>

11ty/search.njk

@@ -0,0 +1,13 @@
+---
+permalink: search.json
+---
+[
+{%- for item in collections.search -%}
+  {
+    "url" : "{{ item.url }}",
+    "title" : "{{ item.data.title }}",
+    "subterms": "{{item.data.sub_terms | extractSubTermText }}",
+    "content" : "{{ item.templateContent | removeMarkdownFormatting }}"
+  }{% if not loop.last %},{% else %}{%- endif -%}
+{%- endfor -%}
+]

assets/css/base.scss

@@ -19,7 +19,7 @@
 
 // 5. Components
 @import 'components/word', 'components/lists', 'components/definitions',
-  'components/flag';
+  'components/flag', 'components/search';
 
 // 6. Page-specific styles
 @import './layouts/pages';

assets/css/components/_search.scss

@@ -0,0 +1,4 @@
+.search {
+  background-color: #000000;
+  color: #ffffff;
+}

package.json

@@ -8,7 +8,6 @@
     "build": "concurrently npm:build:*",
     "build:css": "parcel build assets/css/base.scss --out-dir dist/assets/css/",
     "build:site": "eleventy",
-    "create-definitions": "bin/create-definitions",
     "lint": "concurrently npm:lint:*",
     "lint:css": "stylelint \"assets/css/**/*.scss\" --fix",
     "lint:js": "eslint \"**/*.js\" --fix",
@@ -19,9 +18,6 @@
     "watch": "eleventy --watch",
     "watch:css": "parcel watch assets/css/base.scss --out-dir dist/assets/css/"
   },
-  "bin": {
-    "create-definitions": "bin/create-definitions"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tatianamac/selfdefined.git"
@@ -71,6 +67,7 @@
     "markdownlint-cli": "^0.23.1",
     "parcel-bundler": "^1.12.4",
     "prettier": "^1.19.1",
+    "remove-markdown": "^0.3.0",
     "sass": "^1.26.7",
     "slugify": "^1.4.0",
     "stylelint": "^13.5.0",