Skip to content
Permalink
Browse files
feat(search): improve search results page look
Close #573
Close #275
  • Loading branch information
talha131 committed Feb 3, 2020
1 parent 9d60af1 commit 73fa743723ebbf35b6cd0e0f51c9497634b1474c
Show file tree
Hide file tree
Showing 15 changed files with 3,760 additions and 1,881 deletions.
@@ -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 -->
@@ -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:
@@ -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",

Large diffs are not rendered by default.

@@ -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;
@@ -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);
}
}

Large diffs are not rendered by default.

@@ -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);
}

0 comments on commit 73fa743

Please sign in to comment.