[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,7 @@
+<form method="get" action="/search" class="js-search-form search__form">
+  <label for="q" class="search__label sub-headline">Look up a definition</label>
+  <div class="search__actions">
+    <input type="search" class="search__input" name="q" />
+    <button type="submit" class="-main">Search</button>
+  </div>
+</form>

11ty/_includes/components/table-of-content.njk

@@ -1,5 +1,6 @@
 <section class="homepage-section homepage-section--toc">
   <h2 id="terms-heading" class="visually-hidden">Terms</h2>
+  {% include 'components/search.njk' %}
   <nav class="" aria-labelledby="terms-heading">
     <ol class="multi-column u-no-padding-left list">
       {% for section in collections.tableOfContent %}

11ty/_includes/layouts/index.njk

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

11ty/_includes/layouts/search.njk

@@ -0,0 +1,8 @@
+{% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'Search « ' %}
+
+{% block content %}
+  <main>
+    {{ content | safe }}
+  </main>
+{% endblock %}

11ty/search-data.njk

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

11ty/search.njk

@@ -0,0 +1,104 @@
+---
+layout: layouts/search.njk
+---
+
+<div class="article-content">
+  <div>
+    {% include 'components/sub-page-header.njk' %}
+    <ul class="js-search-results-menu seach-results-menu" />
+  </div>
+
+  <div class="page">
+    <header class="introduction">
+      <h1 class="introduction__title thicc-headline">
+        Search Results
+      </h1>
+    </header>
+
+    <section class="search">
+      {% include 'components/search.njk' %}
+      <h2 aria-live="polite" role="status" class="js-search-title">Building your search results, one moment.</h2>
+      <ul class="js-search-results-list" class="u-no-padding-left list" />
+    </section>
+  </div>
+</div>
+
+{% block pageScript %}
+<script>
+  function getAllOccurrences(str, match) {
+    const matchLength = match.length;
+    const indices = []
+    let startIndex = 0, index
+
+    str = str.toLowerCase();
+    match = match.toLowerCase();
+
+    while ((index = str.indexOf(match, startIndex)) > -1) {
+        indices.push(index);
+        startIndex = index + matchLength;
+    }
+
+    return indices.map(index => {
+      // this needs some cleaning up
+      // currently there are edge cases that break the selection of the substring
+      const start = index < 50 ? index : index - 50;
+      const end = matchLength + 100;
+      const exerpt = str.substr(start, end)
+
+      return exerpt.replace(match, `<span class="search-results-list__list-item__highlight">${match}</span>`)
+    })
+  }
+
+  // don't use es6+ here because it will not be transpiled
+  window.addEventListener('DOMContentLoaded', function() {
+    function buildResultListItem(result, search) {
+      const occurrences = getAllOccurrences(result.content, search)
+      return `<h3 id="${result.title}"><a href="${result.url}">${result.title}</a></h3>${occurrences.map(occurrence => `<p>...${occurrence}...</p>`).join('')}`
+    }
+
+    function buildResultMenuItem(result) {
+      return `<a href="#${result.title}">${result.title}</a>`
+    }
+
+    const init = async () => {
+      try {
+        const urlParams = new URLSearchParams(window.location.search);
+        const $searchTitle = document.querySelector('.js-search-title')
+        const $resultsContainer = document.querySelector('.js-search-results-list')
+        const $tableOfContentsContainer = document.querySelector('.js-search-results-menu')
+
+        // remove any previous results from the list and menu
+        $resultsContainer.innerHTML = ''
+        $tableOfContentsContainer.innerHTML = ''
+
+        const value = urlParams.get('q')
+        const matches = await fetch(`/.netlify/functions/search?q=${value}`, {mode: 'cors'})
+        // const matches = await fetch(`https://climb-phi-staging.begin.app/self-defined-app-search?q=${value}`, {mode: 'cors'})
+        const results = await matches.json()
+
+        $resultsContainer.innerHTML = ''
+        $searchTitle.innerText = `We found ${results.length} ${results.length === 1 ? 'definition' : 'definitions'} containing \u275d${value}\u275e`
+
+        // better to create a fragment here
+        results.forEach((result) => {
+          // build the actual result list item
+          let $childListElement = document.createElement('li')
+          $childListElement.classList.add('search-results-list__list-item')
+          $childListElement.innerHTML = buildResultListItem(result, value)
+          $resultsContainer.appendChild($childListElement)
+
+          // build the table of content item
+          let $childMenuElement = document.createElement('li')
+          $childMenuElement.classList.add('search-results-menu__list-item')
+          $childMenuElement.innerHTML = buildResultMenuItem(result, value)
+          $tableOfContentsContainer.appendChild($childMenuElement)
+        })
+
+      } catch (error) {
+        console.log('error in search!', error)
+      }
+    }
+    init()
+  })
+</script>
+{% endblock %}

assets/css/abstracts/_mixins.scss

@@ -21,3 +21,11 @@
 @mixin icon__embed() {
   margin-right: 0.35rem;
 }
+
+@mixin dark-mode-rule() {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-user-theme='light']) {
+      @content;
+    }
+  }
+}

assets/css/abstracts/_variables.scss

@@ -9,6 +9,7 @@ $colors: (
   yellow: hsl(50, 100%, 50%),
   dark-yellow: hsl(50, 100%, 20%),
   pale-yellow: hsl(50, 100%, 86%),
+  very-blue: hsl(236, 100%, 58%),
   black: hsl(0, 0%, 13%),
   black-transparent: hsla(0, 0%, 13%, 85%),
   white-transparent: hsl(0, 0%, 100%, 85%),

assets/css/base.scss

@@ -1,25 +1,26 @@
 @charset 'UTF-8';
 
 // 1. Configuration and helpers
-@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
-  'abstracts/universal-selector';
+@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins';
 
 // 2. Vendors
 // @import
 // 'vendors/normalize';
 
 // 3. Base stuff
-@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
-  'base/typography', './base/a', 'base/helpers', 'base/radio-buttons', 'base/code';
+@import 'base/custom-properties', 'base/fonts', 'base/universal-selector',
+  'base/base', 'base/selection', 'base/typography', './base/a', 'base/input',
+  'base/button', 'base/radio-buttons', 'base/helpers', 'base/code';
 
 // 4. Layout-related sections
 @import 'structures/header', 'structures/footer', 'structures/grid',
   'structures/multi-column', 'structures/table-of-content',
   './structures/definition-content', './structures/definition-navigation';
 
 // 5. Components
-@import 'components/word', './components/box', 'components/lists', 'components/definitions',
-  'components/flag', 'components/alertbox';
+@import 'components/word', './components/box', 'components/lists',
+  'components/definitions', 'components/flag', 'components/alertbox',
+  'components/search';
 
 // 6. Page-specific styles
 @import './layouts/pages';

assets/css/base/_base.scss

@@ -6,6 +6,10 @@ body {
   font-size: pxToRem(20);
   margin: 0;
   padding: 2rem;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
 }
 
 [hidden] {

assets/css/base/_button.scss

@@ -0,0 +1,19 @@
+button {
+  appearance: none;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-family: $ext-sans;
+  font-weight: bold;
+  padding: 0.5rem 0.75rem;
+
+  &.-main {
+    background: var(--clr-very-blue);
+    color: white;
+  }
+
+  &:focus {
+    outline: 0.125rem solid var(--clr-very-blue);
+    outline-offset: 0.125rem;
+  }
+}

assets/css/base/_custom-properties.scss

@@ -56,10 +56,8 @@
   --l-gap: 1rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-user-theme='light']) {
-    @include color-scheme-dark();
-  }
+@include dark-mode-rule {
+  @include color-scheme-dark();
 }
 
 :root[data-user-theme='dark'] {

assets/css/base/_input.scss

@@ -0,0 +1,13 @@
+input[type='text'],
+input[type='search'] {
+  background: var(--clr-background);
+  border: 0.125rem solid var(--clr-foreground);
+  border-radius: 0.25rem;
+  color: inherit;
+  padding: 0.5rem 0.75rem;
+
+  &:focus {
+    border-color: var(--clr-very-blue);
+    outline: 2px solid var(--clr-very-blue);
+  }
+}

assets/css/base/_universal-selector.scss

@@ -1,5 +1,7 @@
 * {
   box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 *::before {

assets/css/components/_box.scss

@@ -17,10 +17,8 @@
   a {
     color: var(--clr-background);
 
-    @media (prefers-color-scheme: dark) {
-      :root:not([data-user-theme='light']) &:focus {
-        background-color: var(--clr-pink);
-      }
+    @include dark-mode-rule {
+      background-color: var(--clr-pink);
     }
   }
 

assets/css/components/_search.scss

@@ -0,0 +1,20 @@
+.search__form {
+  background: transparent;
+  margin-bottom: 2rem;
+}
+
+.search__label {
+  display: block;
+}
+
+.search__actions {
+  display: flex;
+}
+
+.search__input {
+  margin-right: 0.5rem;
+}
+
+.search-results-list__list-item__highlight {
+  background: var(--clr-pale-yellow);
+}

functions/search.js

@@ -0,0 +1,45 @@
+const lunr = require('lunr');
+const { default: axios } = require('axios');
+
+exports.handler = async function({ queryStringParameters }, _, callback) {
+  try {
+    if (!queryStringParameters) {
+      callback(new Error('missing query string parameter "q"'));
+    }
+
+    const { data: definitions } = await axios.get(
+      'https://deploy-preview-213--selfdefined.netlify.app/search-data.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() {
+      this.ref('title');
+      this.field('title');
+      this.field('subterms');
+      this.field('content');
+
+      // load definitions into lunr index
+      for (const definition in definitions) {
+        this.add(definitions[definition]);
+      }
+    });
+
+    const matches = idx.search(queryStringParameters.q);
+    const results = matches.map((match) => definitionMap[match.ref]);
+
+    console.log(results)
+    callback(null, {
+      body: JSON.stringify(results),
+      statusCode: 200
+    });
+  } catch (error) {
+    console.log(error);
+    callback(error);
+  }
+};