stefanjudis · JonUK · Feb 28, 2020 · Mar 8, 2020 · Mar 9, 2020 · Mar 9, 2020
diff --git a/.gitignore b/.gitignore
@@ -112,7 +112,8 @@ static/screenshots
 static/*.js
 static/*.xml
 static/*.html
+static/*.json
 TODO.txt
 
 #WebStorm IDE
-.idea
+.idea
diff --git a/lib/helpers.js b/lib/helpers.js
@@ -21,7 +21,13 @@ async function getHelpersFromFiles() {
   const texts = await Promise.all(
     files.map(name => readFile(path.join(helpersDir, name)))
   );
-  const helpers = texts.map(text => JSON.parse(text));
+
+  // Add an 'id' property for each helper
+  const helpers = texts.map(text => {
+    const helper = JSON.parse(text);
+    return { ...helper, id: toSlug(helper.name) }
+  });
+
   return Object.fromEntries(helpers.map(h => [h.name, h]));
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tiny-helpers",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A collection of free single-purpose online tools for web developers...",
   "main": "index.js",
   "scripts": {

diff --git a/scripts/create-feeds.js b/scripts/create-feeds.js
@@ -8,7 +8,7 @@ const { toSlug } = require('../lib/slug');
 (async () => {
   const helpers = await getHelpers();
   try {
-    const feed = new Feed({
+    const rssFeed = new Feed({
       title: 'Tiny Helpers',
       description,
       id: 'https://tiny-helpers.dev/',
@@ -29,10 +29,13 @@ const { toSlug } = require('../lib/slug');
       }
     });
 
+    const searchItems = [];
+
     helpers
       .sort((a, b) => (new Date(a.addedAt) < new Date(b.addedAt) ? 1 : -1))
       .forEach(({ addedAt, name, desc, url }) => {
-        feed.addItem({
+
+        rssFeed.addItem({
           title: `New helper added: ${name} – ${desc}.`,
           id: toSlug(name),
           link: url,
@@ -41,10 +44,21 @@ const { toSlug } = require('../lib/slug');
           date: new Date(addedAt),
           image: `https://tiny-helpers.dev/screenshots/${toSlug(name)}@1.jpg`
         });
+
+        // Lowercase the properties for search so it's safe to just match on lowercase
+        searchItems.push({
+          id: toSlug(name),
+          name: name.toLowerCase(),
+          desc: desc.toLowerCase(),
+        });
       });
 
     console.log('Writing rss feed');
-    writeFile(join('.', 'static', 'feed.xml'), feed.rss2());
+    await writeFile(join('.', 'static', 'feed.xml'), rssFeed.rss2());
+
+    console.log('Writing search data');
+    await writeFile(join('.', 'static', 'searchData.json'), JSON.stringify(searchItems), 'utf8');
+
   } catch (error) {
     console.error(error);
     process.exit(1);

diff --git a/site/_includes/base.njk b/site/_includes/base.njk
@@ -41,6 +41,19 @@
   <style>
     {{ styles | safe }}
   </style>
+
+  <script>
+    {
+      // Only if JS is enabled will the search input be displayed
+      document.write('<style>.js-search-visible { display: block !important; }</style>');
+
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.has('q')) {
+        // If JS is enabled and there is a querystring search term then hide the helpers until we've filtered
+        document.write('<style>.js-helpers-hidden { display: none; }</style>');
+      }
+    }
+  </script>
 </head>
 
 <body>
@@ -60,6 +73,8 @@
     {% include "js/main.js" %}
   {% endset %}
   <script type="module">{{ js | jsmin | safe }}</script>
+
+  <script src="/search.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/site/_includes/js/search.js b/site/_includes/js/search.js
@@ -0,0 +1,77 @@
+// This JavaScript is bundled together with the variable 'searchItems' from the
+// file 'static/searchData.json'. This variable is an array and contains items with
+// 'name' and 'desc' properties that are lowercase.
+
+(function () {
+  const helpers = searchItems;
+
+  // Get the search term from the querystring
+  const urlParams = new URLSearchParams(window.location.search);
+  const hasSearchTerm = urlParams.has('q');
+  const querySearchTerm = hasSearchTerm ? urlParams.get('q').toLowerCase() : null;
+
+  const searchElement = document.getElementById('search');
+
+  // If no search input then not showing all items / filtering by tag so do nothing
+  if (searchElement) {
+    // Add the search input event listener with debounced handler and set value
+    const debounceSearchFunc = debounce(filterItems, 250);
+    searchElement.addEventListener('keydown', debounceSearchFunc);
+    searchElement.value = querySearchTerm;
+
+    // If there is a querystring search term then perform the initial filter
+    if (querySearchTerm) {
+      filterItems();
+    }
+  }
+
+  // Unhide the helpers list
+  const helpersList = document.getElementById('helpers-list');
+  helpersList.classList.remove('js-helpers-hidden');
+
+  function filterItems() {
+    const searchTerm = searchElement.value.toLowerCase();
+
+    console.time('Filtering helpers');
+
+    helpers.forEach(helper => {
+      const element = document.getElementById(helper.id);
+      const match = !searchTerm || helper.name.includes(searchTerm) || helper.desc.includes(searchTerm);
+
+      if (!match) {
+        element.style.display = 'none';
+      } else {
+        element.style.display = 'flex';
+      }
+    });
+
+    console.timeEnd('Filtering helpers');
+  }
+
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds. If `immediate` is passed, trigger the function on the
+  // leading edge, instead of the trailing.
+  function debounce(func, wait, immediate) {
+    let timeout;
+
+    return function executedFunction() {
+      const context = this;
+      const args = arguments;
+
+      const later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+
+      const callNow = immediate && !timeout;
+
+      clearTimeout(timeout);
+
+      timeout = setTimeout(later, wait);
+
+      if (callNow) func.apply(context, args);
+    };
+  }
+
+})();
diff --git a/site/_includes/templates/_list.njk b/site/_includes/templates/_list.njk
@@ -6,6 +6,18 @@
       <h1 class="fsi-1-5">Tools for tag "{{ tag.name }}"</h1>
     {% endif %}
 
+    <div class="js-search-visible" style="display: none;">
+      TEMP SEARCH UI
+      {% if tag.name == "All" %}
+        <form>
+          <label for="search">Search</label>
+          <input type="text" id="search" style="font-size: 1.1rem; padding: 6px 8px;">
+        </form>
+      {% else %}
+        Search not displayed as not on "All" page
+      {% endif %}
+    </div>
+
     <div class="btnGroup">
       <a
         class="btnGroup--btn {% if renderData.listIsSortedBy == "name" %}isActive{% endif %}"
@@ -15,9 +27,9 @@
         href="{{ tag.slug | route({ listIsSortedBy: 'addedAt' }) }}">Sort by date</a>
     </div>
   </div>
-  <ol class="main-grid">
+  <ol id="helpers-list" class="main-grid js-helpers-hidden">
   {% for item in tag.items | sort(renderData.listIsReversed, false, renderData.listIsSortedBy )%}
-    <li class="shadow-full bg-lighter flex-column p-relative">
+    <li id="{{ item.id }}" class="shadow-full bg-lighter flex-column p-relative">
       <img
         srcset="/screenshots/{{ item.slug }}@1.jpg 1x,
                 /screenshots/{{ item.slug }}@2.jpg 2x"

diff --git a/site/search-javascript.njk b/site/search-javascript.njk
@@ -0,0 +1,10 @@
+---
+permalink: search.js
+eleventyExcludeFromCollections: true
+---
+const searchItems = {% include "../static/searchData.json" %};
+
+{% set js %}
+  {% include "js/search.js" %}
+{% endset %}
+{{ js | safe }}