Skip to content

Commit

Permalink
ELY-2394 Add the ability to search for blog posts on the Elytron Blog…
Browse files Browse the repository at this point in the history 
ELY-2394 Add the ability to search for blog posts on the Elytron Blog…
  • Loading branch information
@gabrielpadilh4
gabrielpadilh4 committed Dec 18, 2023
1 parent 6a11bbe commit a6cf926
Show file tree
Hide file tree
Showing 4 changed files with 3,158 additions and 38 deletions.
127 changes: 127 additions & 0 deletions _includes/search.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<script src="{{ '/assets/javascript/lunr.js' | relative_url }}"></script>

<script>
{% assign counter = 0 %}

var documents = [{% for page in site.posts %}{
"id": { { counter } },
"url": "{{ site.baseurl }}{{ page.url }}",
"link": "{{ page.link }}",
"title": "{{ page.title }}",
"author": "{{ page.author }}",
"postDate": "{{ page.date | date: '%B %d, %Y'}}",
"body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: ' ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}
} {% if forloop.last %} {% else %}, {% endif %} {% endfor %}];
var idx = lunr(function () {
this.ref('id')
this.field('title')
this.field('body')
documents.forEach(function (doc) {
this.add(doc)
}, this)
});
function lunr_search(terms) {
document.getElementById('lunrsearchresults').innerHTML = '<div></div>';
if (terms) {
document.getElementById('lunrsearchresults').innerHTML = document.getElementById('lunrsearchresults').innerHTML + "<p>Search results for '" + terms + "'</p>";
document.getElementById('lunrsearchresults').innerHTML = document.getElementById('lunrsearchresults').innerHTML + "<ul class=search-result></ul>";
mountResultHtml(terms);
} else {
location.assign(window.location.pathname);
}
return false;
}
function mountResultHtml(terms) {
var term = terms.split(" ");
var termToSearch = "";
for (let index = 0; index < term.length; index++) {
termToSearch = term[index] + " +"
}
var results = idx.search(termToSearch);
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
var ref = results[i]['ref'];
var url = documents[ref]['url'];
var title = documents[ref]['title'];
var link = documents[ref]['link'];
var body = documents[ref]['body'].substring(0, 75) + '...';
var postDate = documents[ref]['postDate'];
var realUrl = link == '' ? url : link;
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML +
"<div class='lunrsearchresult'>" +
"<span class='post-title grid__item width-12-12'>" +
"<a href= '" + realUrl + "'>" + title + "</a>" +
"</span>" +
"</div>";
document.querySelector("#posts-div").innerHTML = "";
}
} else {
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult'>No results found...</li>";
}
}

function checkSearchTerm(term) {
if (term == "") {
location.assign(window.location.pathname);
}
}

</script>

<style>
#lunrsearchresults {
padding-top: 0.2rem;
}

.lunrsearchresult {
padding-bottom: 1rem;
}

.lunrsearchresult .title {
color: #d9230f;
}

.lunrsearchresult .url {
color: silver;
}

.lunrsearchresult a {
display: block;
color: #777;
}

.lunrsearchresult a:hover,
.lunrsearchresult a:focus {
text-decoration: none;
}

.lunrsearchresult a:hover .title {
text-decoration: underline;
}
</style>


<form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);" class="grid__item">
<p><input type="text" class="form-control search-input" onkeyup="checkSearchTerm(this.value)" id="lunrsearch"
name="q" value="" placeholder="Search..." /></p>
</form>
<div id="lunrsearchresults">
<ul id="search-result" name="search-result" class="search-result"></ul>
</div>
82 changes: 44 additions & 38 deletions _layouts/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,55 @@
<div class="grid__item width-1-12 align-self-center"></div>

<div class="grid__item width-8-12 width-12-12-m">
{% for post in paginator.posts %}
{% assign author = site.data.authors[post.author] %}
<div class="blog-list-item grid-wrapper">
<div class="post-title grid__item width-12-12">
<a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{{ post.title }}</a>
</div>
<div class="grid__item width-8-12 width-12-12-m byline-wrapper">
{% if author.emailhash %}
<img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
{% endif %}
<p class="byline">By <a href="{{ author.bio }}">{{ author.name }}</a>
<br/>
<small>{{ post.date | date: '%B %d, %Y' }} |
{% if post.tags %}
{% for tag in post.tags %}
<a class="tags" href="{{site.baseurl}}/blog/tag/{{tag | downcase | replace: '.', '-'}}"> #{{ tag | downcase }}</a>
{% endfor %}

{% include search.html %}

<div id="posts-div" name="posts-div">
{% for post in paginator.posts %}
{% assign author = site.data.authors[post.author] %}
<div class="blog-list-item grid-wrapper">
<div class="post-title grid__item width-12-12">
<a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{{ post.title }}</a>
</div>
<div class="grid__item width-8-12 width-12-12-m byline-wrapper">
{% if author.emailhash %}
<img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
{% endif %}
<p class="byline">By <a href="{{ author.bio }}">{{ author.name }}</a>
<br/>
<small>{{ post.date | date: '%B %d, %Y' }} |
{% if post.tags %}
{% for tag in post.tags %}
<a class="tags" href="{{site.baseurl}}/blog/tag/{{tag | downcase | replace: '.', '-'}}"> #{{ tag | downcase }}</a>
{% endfor %}
{% endif %}
</small>
</p>
</div>
{% capture post_url %}{% if post.link %}{{ post.link }}{% else %}{{ site.url }}{{ post.url | relative_url }}{% endif %}{% endcapture %}
<div class="grid__item width-4-12 width-12-12-m">{% include share-page.html title=post.title url=post_url %}</div>
<div class="grid__item width-12-12">
{% if post.synopsis %}
<p>{{ post.synopsis | strip_html }}</p>
{% else %}
<p>{{ post.content | strip_html | truncatewords: 75 }}</p>
{% endif %}
</small>
</p>
</div>
<div class="grid__item width-12-12"><a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{% if post.link contains 'youtube' %}Watch Video &rsaquo;{% else %}Read More &rsaquo;{% endif %}</a></div>
</div>
{% capture post_url %}{% if post.link %}{{ post.link }}{% else %}{{ site.url }}{{ post.url | relative_url }}{% endif %}{% endcapture %}
<div class="grid__item width-4-12 width-12-12-m">{% include share-page.html title=post.title url=post_url %}</div>
<div class="grid__item width-12-12">
{% if post.synopsis %}
<p>{{ post.synopsis | strip_html }}</p>
{% else %}
<p>{{ post.content | strip_html | truncatewords: 75 }}</p>
{% endfor %}
{% if paginator.total_pages > 1 %}
<div class="paginator-btns">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}" class="button-cta secondary">Newer Posts</a>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}" class="button-cta secondary">Older Posts</a>
{% endif %}
</div>
<div class="grid__item width-12-12"><a href="{% if post.link %}{{ post.link }}{% else %}{{ post.url | relative_url }}{% endif %}">{% if post.link contains 'youtube' %}Watch Video &rsaquo;{% else %}Read More &rsaquo;{% endif %}</a></div>
</div>
{% endfor %}
{% if paginator.total_pages > 1 %}
<div class="paginator-btns">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}" class="button-cta secondary">Newer Posts</a>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}" class="button-cta secondary">Older Posts</a>
{% endif %}
</div>
{% endif %}
</div>

</div>

<div class="grid__item width-1-12 width-12-12-m"></div>
Expand Down
10 changes: 10 additions & 0 deletions _sass/layouts/blog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,13 @@ body.post {
width: auto;
}

.search-input {
width: 100%;
}

.search-result {
margin-top: 0;
list-style-type: none;
list-style-position: unset;
min-width: 50%;
}
Loading

0 comments on commit a6cf926

Please sign in to comment.