Add a search functionality

Signed-off-by: Max Magorsch <arzano@gentoo.org>

5 files changed, 103 insertions, 35 deletions

diff --git a/data.json.erb b/data.json.erb
new file mode 100644
index 0000000..beb6d2a
--- /dev/null
+++ b/data.json.erb
@@ -0,0 +1,25 @@
+<% require 'loofah' %>
+
+[
+  <%
+    items = site.items.latest
+    ItemCursor.new(items).each do |item, new_date, new_feed|
+  %>
+  {
+    "title": <%= item.title.dump %>,
+    "author": <%= item.feed.title.dump %>,
+    "nickname": <%= item.feed.key.dump %>,
+    "date": <%= item.published.strftime('%Y-%m-%d').dump %>,
+    "scope": <%= item.feed.location.dump %>,
+    "content": <% if item.content %><%= Loofah.fragment(item.content).scrub!(:prune).to_text.dump %><% elsif item.summary %><%= Loofah.fragment(item.summary).scrub!(:prune).to_text.dump %><% else %>"-/-"<% end %>
+  },
+  <% end %>
+  {
+    "title": "",
+    "author": "",
+    "nickname": "",
+    "date": "",
+    "scope": "",
+    "content": ""
+  }
+]
diff --git a/js/planet-search.js b/js/planet-search.js
new file mode 100644
index 0000000..2d38c0d
--- /dev/null
+++ b/js/planet-search.js
@@ -0,0 +1,53 @@
+function getParameter(param) {
+    var result = null,
+        tmp = [];
+    location.search
+        .substr(1)
+        .split("&")
+        .forEach(function (item) {
+          tmp = item.split("=");
+          if (tmp[0] === param) result = decodeURIComponent(tmp[1]);
+        });
+    return result;
+}
+
+
+if(getParameter('q') == null){
+  document.getElementById("spinner").style.display = "none";
+}
+
+
+var xhttp = new XMLHttpRequest();
+xhttp.onreadystatechange = function() {
+  if (this.readyState == 4 && this.status == 200) {
+
+    var data = JSON.parse(this.responseText)
+
+    var idx = lunr(function () {
+        this.ref('title')
+        this.field('author')
+        this.field('nickname')
+        this.field('date')
+        this.field('scope')
+        this.field('content')
+
+        data.forEach(function (doc) {
+          this.add(doc)
+        }, this)
+
+      })
+
+    var searchterm = getParameter('q');
+    if(searchterm == null){
+      console.log("No search term given");
+    }else{
+      idx.search(searchterm).forEach(function (doc) {
+        $("#articles").append("<li>" + doc.ref + "</li>");
+      }, this)
+      document.getElementById("spinner").style.display = "none";
+    }
+
+  }
+};
+xhttp.open("GET", "data.json", true);
+xhttp.send();
diff --git a/package.json b/package.json
index d1cded1..0ecda68 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   ],
   "dependencies": {
     "@gentoo/tyrian": "git+https://anongit.gentoo.org/git/sites/tyrian-theme.git",
-    "bootstrap-datepicker": "^1.9.0"
+    "bootstrap-datepicker": "^1.9.0",
+    "lunr": "^2.3.8"
   }
 }
diff --git a/tyrian-search.html.erb b/tyrian-search.html.erb
index dc120de..f1d963a 100644
--- a/tyrian-search.html.erb
+++ b/tyrian-search.html.erb
@@ -107,7 +107,7 @@
 
 
 <div class="container">
-  <div class="row">
+  <div class="row mb-5">
 
 
     <div id="content" class="col-md-9">
@@ -117,50 +117,34 @@
           <small> please select a date range to view the articles that have been published in that time </small></h1>
       </div>
 
-      <div class="row">
-        <div class="col-sm-3"></div>
-        <div class="col-sm-6">
-          <div class="input-daterange input-group" id="datepicker">
-            <input id="start" type="text" class="input-sm form-control" name="start" placeholder="start date"/>
-            <span class="input-group-addon">to</span>
-            <input id="end" type="text" class="input-sm form-control" name="end" placeholder="end date"/>
+      <form class="form-inline inlinesearch mr-2" role="search" action="search.html" method="get">
+        <div class="row w-100">
+          <div class="col-sm-12 mb-2">
+            <input type="text" class="input-sm form-control w-100 px-3" name="q" placeholder="quick search"/>
           </div>
+          <div class="col-sm-12">
 
-        </div>
-        <div class="col-sm-3"></div>
-      </div>
-      <div class="row">
-        <div class="col-sm-12">
-          <!-- Split button -->
-          <div class="btn-group pull-right">
-            <button type="button" onclick="updateArchive(true);" class="btn btn-primary">Search in Planet</button>
-            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
-              <span class="sr-only">Toggle Dropdown</span>
-            </button>
-            <ul class="dropdown-menu">
-              <li><a onclick="updateArchive(false);" style="cursor: pointer;">Search in Universe</a></li>
-            </ul>
-          </div>
+            <button type="button" type="submit" class="pull-right btn btn-primary">Search</button>
 
+          </div>
         </div>
-      </div>
-
+      </form>
 
       <hr style="margin-top:30px;margin-bottom:30px;"/>
 
-      <div id="greeter">
-        <div class="row">
-          <div class="col-sm-12">
-            <!-- TODO(arzano) add a placeholder here -->
-          </div>
+      <div class="row">
+        <div id="spinner" class="col-sm-12 text-center">
+          <i class="fa fa-spinner fa-pulse fa-5x fa-fw" style="color:#3E355A;"></i>
         </div>
-      </div>
+        <div class="col-sm-12">
+          <ul id="articles">
 
-      <div id="articles">
-        <!-- Selected articles will be displayed here -->
+          </ul>
+        </div>
       </div>
 
+
+
       <div id="spinner" class="d-none">
 
         <div class="row" style="margin-top:100px;">
@@ -238,6 +222,8 @@
 <script src="tyrian/popper.min.js"></script>
 <script src="tyrian/bootstrap.min.js"></script>
 <script src="tyrian/components/bootstrap-datepicker.min.js"></script>
+<script src="tyrian/components/lunr.min.js"></script>
+<script src="tyrian/planet-search.js"></script>
 
 </body>
 </html>
diff --git a/tyrian.txt b/tyrian.txt
index 2349c18..d2c842d 100644
--- a/tyrian.txt
+++ b/tyrian.txt
@@ -4,6 +4,7 @@ index.html        tyrian.html.erb
 search.html        tyrian-search.html.erb
 contributors.html        tyrian-contributors.html.erb
 data.html        data.html.erb
+data.json        data.json.erb
 
 
 tyrian/tyrian.min.css        ../@gentoo/tyrian/dist/tyrian.min.css
@@ -32,6 +33,8 @@ tyrian/jquery-3.3.slim.js        ../@gentoo/tyrian/dist/jquery-3.3.slim.js
 tyrian/bootstrap.min.js        ../@gentoo/tyrian/dist/bootstrap.min.js
 tyrian/popper.min.js        ../@gentoo/tyrian/dist/popper.min.js
 tyrian/components/bootstrap-datepicker.min.js        ../bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js
+tyrian/components/lunr.min.js        ../lunr/lunr.min.js
 
 tyrian/planet-tyrian.css        css/planet-tyrian.css
 tyrian/planet-tyrian.js        js/planet-tyrian.js
+tyrian/planet-search.js        js/planet-search.js