web/_includes/search-loader.html

<!--
  Jekyll Simple Search loader
  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->

{% capture result_elem %}
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
  <a href="{{ site.url }}{url}">{title}</a>
  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
    {categories}
    {tags}
  </div>
  <p>{snippet}</p>
</div>
{% endcapture %}

{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}

<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>

<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('search-results'),
  json: '{{ '/assets/js/data/search.json' | relative_url }}',
  searchResultTemplate: '{{ result_elem | strip_newlines }}',
  noResultsText: '{{ not_found }}',
  templateMiddleware: function(prop, value, template) {
    if (prop === 'categories') {
      if (value === '') {
        return `${value}`;
      } else {
        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
      }
    }

    if (prop === 'tags') {
      if (value === '') {
        return `${value}`;
      } else {
        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
      }
    }
  }
});
</script>