Added a search bar today, that uses a client side search function to search for anything on this blog.

Try it one the home page. Search for anything, like Jekyll or Day 13. You can even search for a specific date: 2020-02-28

I used this library: https://github.com/christian-fei/Simple-Jekyll-Search

Adding this is pretty easy, just add the script and a search.json file, that is used by the search function.

Through liquid, this can easily be generated by Jekyll:

---
layout: null
---
[
  {% for post in site.posts %}
    {
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.category }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "date"     : "{{ post.date }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

Now the search module can be called anywhere, like so:

window.addEventListener('load', function() {
  var sjs = SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    limit: 10
  });
});


I also added lots of css, to make it a bit less ugly and responsive. And there it is.


The last projects were a little small, but itโ€™s getting interesting in the future, I promise! ๐Ÿš€