Add full text search to archive page

Bump version to 1.0.1
evaneykelen · Jul 26, 2019 · 1d79a60 · 1d79a60
1 parent ec495d0
commit 1d79a60
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 14 deletions.
diff --git a/gem/CHANGELOG.md b/gem/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Version 1.0.1
+
+- Add full text search to archive page
+
 ## Version 1.0.0
 
 - Fix bug with development and runtime dependencies.

diff --git a/gem/Gemfile.lock b/gem/Gemfile.lock
@@ -1,16 +1,22 @@
 PATH
   remote: .
   specs:
-    msgtrail (0.9.8)
+    msgtrail (1.0.1)
+      dotenv (~> 2.7)
+      http (~> 4.1)
+      multi_json (~> 1.13)
+      nicetitle (~> 1.0.1)
+      redcarpet (~> 3.4)
+      tilt (~> 2.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
     addressable (2.6.0)
       public_suffix (>= 2.0.2, < 4.0)
-    domain_name (0.5.20180417)
+    domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
-    dotenv (2.7.2)
+    dotenv (2.7.4)
     http (4.1.1)
       addressable (~> 2.3)
       http-cookie (~> 1.0)
@@ -23,28 +29,22 @@ GEM
     minitest (5.11.3)
     multi_json (1.13.1)
     nicetitle (1.0.1)
-    public_suffix (3.0.3)
+    public_suffix (3.1.1)
     rake (10.5.0)
     redcarpet (3.4.0)
     tilt (2.0.9)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.7.5)
+    unf_ext (0.0.7.6)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   bundler (~> 2.0)
-  dotenv (~> 2.7)
-  http (~> 4.1)
   minitest (~> 5.0)
   msgtrail!
-  multi_json (~> 1.13)
-  nicetitle (~> 1.0.1)
   rake (~> 10.0)
-  redcarpet (~> 3.4)
-  tilt (~> 2.0)
 
 BUNDLED WITH
    2.0.2
diff --git a/gem/lib/msgtrail/version.rb b/gem/lib/msgtrail/version.rb
@@ -1,3 +1,3 @@
 module Msgtrail
-  VERSION = "1.0.0"
+  VERSION = "1.0.1"
 end
diff --git a/gem/pkg/msgtrail-1.0.1.gem b/gem/pkg/msgtrail-1.0.1.gem
diff --git a/sample-blog/theme/archive.html.erb b/sample-blog/theme/archive.html.erb
@@ -1,7 +1,10 @@
 <div class="row my-2">
   <div class="col-12">
-    <% articles.each do |article| %>
-      <div class="px-3 mb-3">
+    <div class="mb-4 px-3">
+      <input type="search" id="search-phrase" class="form-control xform-control-lg" placeholder="Full-text search">
+    </div>
+    <% articles.each_with_index do |article, idx| %>
+      <div id="article-<%= idx %>" class="article px-3 mb-3">
         <div class="form-row">
           <div class="col-12 col-sm-3 col-md-2">
             <a class="small text-muted" href="/articles/<%= article[:slug] %>">
@@ -18,3 +21,57 @@
     <% end %>
   </div>
 </div>
+
+<script>
+
+  document.addEventListener("DOMContentLoaded", function() {
+
+    articles = [
+      <% articles.each do |article| %>
+        <% body = article[:bodies].map { |body| plaintext.render(body[:body]).tr('\\', '') }.join %>
+        `<%= "#{article[:title]}#{body}".gsub(/\"|\n|\r|`/, '').downcase.scan(/.{100}/).join("\n") %>`,
+      <% end %>
+    ];
+
+    // Return array indices for array element matching `query`
+    function findString(arr, query) {
+      result = [];
+      pattern = new RegExp(query, "i");
+      for(i = 0; i < arr.length; i++) {
+        if (arr[i].match(pattern)) result.push(i);
+      }
+      return result;
+    }
+
+    function showArticles() {
+      document.querySelectorAll(".article").forEach(el => {
+        el.classList.remove("d-none");
+        el.classList.add("d-block")
+      });
+    }
+
+    function hideArticles() {
+      document.querySelectorAll(".article").forEach(el => {
+        el.classList.remove("d-block");
+        el.classList.add("d-none")
+      });
+    }
+
+    document.getElementById("search-phrase").addEventListener("keyup", function() {
+      query = this.value.replace(/\s+/g, "");
+      if (query.length === 0) {
+        showArticles();
+      } else {
+        hideArticles();
+        result = findString(articles, query);
+        if (result.length > 0) {
+          for(i = 0; i < result.length; i++) {
+            document.getElementById("article-" + result[i]).classList.add("d-block");
+          }
+        }
+      }
+    });
+
+  });
+
+</script>