feat(search): improve search results page look

Close #573
Close #275

Author: talha131

THANKS.md

@@ -245,14 +245,4 @@ in making Elegant more elegant.
 
 1. He submitted a [patch](https://github.com/Pelican-Elegant/elegant/pull/2)
    to the project
-
-# 3rd Party Credits
-
-Elegant is standing on the shoulders of these giants.
-
-1. [Tipue Search](http://www.tipue.com/search/)
-1. [Bootstrap 2.3.2](http://getbootstrap.com/2.3.2/)
-1. [Solarized Light theme](http://ethanschoonover.com/solarized) converted to
-   [Pelican Pygments](https://github.com/yuex/pelican-pygments-solarized-css)
-   by [yuex 悟道洞穴人](https://github.com/yuex)
    <!-- yaspeller ignore:end -->

documentation/content/Advanced Features/tipue-search.md

@@ -3,13 +3,13 @@ Authors: Talha Mansoor, Jack De Winter
 Title: Add Search to Your Site
 Tags: unique
 Date: 2019-07-03 19:56
-Slug: add-tipue-search
+Slug: add-search
 Summary: Elegant can be configured to provide search for your static site, giving an alternate way to navigate the site.
 Category: Advanced Features
 ---
 
 Static sites usually do not offer search, as they are normally considered a dynamic task.
-Elegant uses the open-source [Tipue Search](http://www.tipue.com/search/) plugin, to offer
+Elegant uses the open-source [LunrJS](https://lunrjs.com/) JavaScript library, to offer
 search for your static site.
 
 Here is an example of what the search result may look like:

gulpfile.babel.js

@@ -85,14 +85,14 @@ const rmProdCSS = cb => {
 };
 const minifyJS = () => {
   return src([
-    "static/tipuesearch/tipuesearch_set.js",
-    "static/tipuesearch/tipuesearch.min.js",
     "static/applause-button/applause-button.js",
     "static/photoswipe/photoswipe.js",
     "static/photoswipe/photoswipe-ui-default.js",
     "static/photoswipe/photoswipe-array-from-dom.js",
+    "static/lunr/lunr.js",
     "static/clipboard/clipboard.js",
     "static/js/copy-to-clipboard.js",
+    "static/js/lunr-search-result.js",
     "!static/js/elegant.prod.js"
   ])
     .pipe(concat("elegant.prod.js"))
@@ -110,7 +110,6 @@ const compileCSS = () => {
   ];
   return src([
     "static/applause-button/applause-button.css",
-    "static/tipuesearch/tipuesearch.css",
     "static/photoswipe/photoswipe.css",
     "static/photoswipe/default-skin/default-skin.css",
     "static/css/*.css",

static/css/elegant.prod.css

@@ -44,6 +44,7 @@ div.recent-posts-posted a {
     text-decoration: none;
   }
 }
+#lunr-search-result > div.lunr-search-result-item > h4 > a,
 a.ampl {
   color: royalblue;
   display: inline-block;

static/css/links.css

@@ -0,0 +1,18 @@
+#lunr-search-result {
+  & div.lunr-search-result-item {
+    margin: 0 0 20px 0;
+  }
+  & p.lunr-result-fail,
+  & p.lunr-search-result-item-body {
+    font-family: var(--serifFontFamily);
+    font-size: rfs(1rem);
+    line-height: 1.6;
+    text-transform: none;
+    margin: 10px 0 0 0;
+  }
+  & p.lunr-result-fail {
+    color: maroon;
+    text-align: center;
+    font-size: rfs(1.125rem);
+  }
+}

static/css/search.css

@@ -0,0 +1,89 @@
+function lunr_search(term) {
+  if (!tipuesearch) {
+    console.error("Pelican Elegant: Tipue search plugin is required");
+    return;
+  }
+
+  const items = tipuesearch["pages"];
+  const documents = tipuesearch["pages"];
+  let counter = 0;
+
+  for (item in documents) {
+    documents[item]["id"] = counter;
+    counter = counter + 1;
+  }
+
+  idx = lunr(function() {
+    this.ref("id");
+    this.field("title");
+    this.field("url");
+    this.field("text", { boost: 10 });
+    this.field("tags");
+
+    items.forEach(function(doc) {
+      this.add(doc);
+    }, this);
+  });
+
+  if (term && idx && documents) {
+    const resultHeadingRoot = document.getElementById(
+      "lunr-search-result-heading"
+    );
+    const resultIntro = `
+    <h1>Search Results for <code>${term}</code></h1>
+    `;
+
+    resultHeadingRoot.insertAdjacentHTML("beforeend", resultIntro);
+
+    const resultRoot = document.getElementById("lunr-search-result");
+    //put results on the screen.
+    var results = idx.search(term);
+    if (results.length > 0) {
+      //if results
+      for (var i = 0; i < results.length; i++) {
+        var ref = results[i]["ref"];
+        var url = documents[ref]["url"];
+        var title = documents[ref]["title"];
+        var body = documents[ref]["text"].substring(0, 280) + "...";
+
+        const resultItem = `
+          <div class="lunr-search-result-item">
+              <h4>
+                  <a href=${url}>
+                  ${title}
+                  </a>
+               </h4>
+              </a>
+              <p class="lunr-search-result-item-body">${body}
+              </p>
+          </div>
+          `;
+
+        resultRoot.insertAdjacentHTML("beforeend", resultItem);
+      }
+    } else {
+      const resultFailure = `<p class="lunr-result-fail">No results found for <span class="lunr-search-term">${term}</span></p>`;
+
+      resultRoot.insertAdjacentHTML("beforeend", resultFailure);
+    }
+  }
+  return false;
+}
+
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split("=");
+
+    if (pair[0] === variable) {
+      return decodeURIComponent(pair[1].replace(/\+/g, "%20"));
+    }
+  }
+}
+
+var searchTerm = getQueryVariable("q");
+if (searchTerm) {
+  lunr_search(searchTerm);
+}