hugo-theme-itix/layouts/_default/search.html

{{ define "main" }}
<!-- The "search/index.html" layout renders the search engine -->
<article class="search article-list">
    <header>
        <h1>{{ .Title }}</h1>
        {{- with .Description }}
        <h4>{{ . }}</h4>
        {{- end }}
    </header>
    {{ .Content }}
    <input id="searchInput" tabindex="0" placeholder="{{ i18n "search_here" }}" autofocus>
    <div id="searchResults">
    </div>
    <div style="display: none;" id="image-store">
        {{- range $_, $file := (slice "en" "fr" "label" "link" "schedule") -}}
        <div id="embedded-svg-{{ $file }}">
            {{- partial (printf "icons/%s.svg" $file) . -}}
        </div>
        {{- end }}
    </div>
    <script type="text/javascript">
var searchResults = document.getElementById('searchResults'); // targets the <div> above
var searchInput = document.getElementById('searchInput'); // input box for search
var lastSearch = "";

// Helper function to create an element with attributes
function tag(name, attrs) {
  var el = document.createElement(name.toString());

  !!attrs && Object.keys(attrs).forEach(function(key) {
    el.setAttribute(key, attrs[key]);
  });

  return el;
}

function printSearchResult(result) {
    var section = tag("section");
    
    //
    // Article headline
    //
    var a = tag("a", { href: result.item.permalink });
    a.textContent = result.item.title;
    if (result.item.hasEnFlag) {
        var uk_flag_svg = document.getElementById("embedded-svg-en");
        if (uk_flag_svg != null) {
            var img = uk_flag_svg.firstChild.cloneNode(true);
            a.appendChild(img);
        }
    }
    var h4 = tag("h4");
    h4.textContent = result.item.type_label + " >> ";
    h4.appendChild(a);
    section.appendChild(h4);

    //
    // Metadata
    //
    if (result.item.type != "page") {
        var div = tag("div", { 'class': 'post-metadata'});
        var span_date = tag("span", { 'class': 'publication-date' });
        span_date.textContent = {{ i18n "published_on" }} + " " + result.item.date;
        div.appendChild(span_date);
        if (result.item.topics != null) {
            result.item.topics.forEach(function (v) {
                var topic_detail = taxonomies.topics[v];
                if (topic_detail == null) {
                    return;
                }
                var span = tag("span", { 'class': 'topic' });
                var link_svg = document.getElementById("embedded-svg-link");
                if (link_svg != null) {
                    var img = link_svg.firstChild.cloneNode(true);
                    span.appendChild(img);
                }
                var a = tag("a", { href: topic_detail.href });
                a.textContent = topic_detail.title;
                span.appendChild(a);
                div.appendChild(span);
            });
        }
        if (result.item.opensource != null) {
            result.item.opensource.forEach(function (v) {
                var opensource_detail = taxonomies.opensource[v];
                if (opensource_detail == null) {
                    return;
                }
                var span = tag("span", { 'class': 'opensource' });
                var label_svg = document.getElementById("embedded-svg-label");
                if (label_svg != null) {
                    var img = label_svg.firstChild.cloneNode(true);
                    span.appendChild(img);
                }
                var a = tag("a", { href: opensource_detail.href });
                a.textContent = opensource_detail.title;
                span.appendChild(a);
                div.appendChild(span);
            });
        }
        if (result.item.reading_time != null) {
            var span = tag("span", { 'class': 'reading-time' });
            var schedule_svg = document.getElementById("embedded-svg-schedule");
                if (schedule_svg != null) {
                    var img = schedule_svg.firstChild.cloneNode(true);
                    span.appendChild(img);
                }
            var readingTime = document.createTextNode(result.item.reading_time);
            span.appendChild(readingTime);
            div.appendChild(span);
        }
        section.appendChild(div);
    }

    var p = tag("p", {});
    p.textContent = result.item.summary;
    var a = tag("a", { href: result.item.permalink, 'class': 'continue-reading' });
    a.textContent = {{ i18n "continue_reading" }};
    p.appendChild(a);
    section.appendChild(p);

    searchResults.appendChild(section);
}

function clearSearchResults() {
  var child = searchResults.lastElementChild;  
  while (child) { 
    searchResults.removeChild(child); 
    child = searchResults.lastElementChild; 
  } 
}

//
// load the search index
//
function fuseInit(searchDb) { 
  var options = { // fuse.js options; check fuse.js website for details
    shouldSort: true,
    ignoreLocation: true,
    threshold: 0.4,
    minMatchCharLength: 3,
    keys: [
        'title',
        'permalink',
        'summary',
        'topics',
        'opensource'
        ]
    };
    fuse = new Fuse(searchDb, options); // build the index from the json file
}

// 
// using the index loaded previously, run  a search query (for "term")
// every time a letter is typed in the search box
//
function executeSearch(term) {
  if (lastSearch == term) {
    // Don't query Fuse if the search terms have not changed
    return;
  }

  clearSearchResults();
  let results = fuse.search(term);
  results.slice(0, 20).forEach(printSearchResult);
  lastSearch = term;
}

// Fill-in details about taxonomies
{{- $.Scratch.Set "taxonomies" dict -}}
{{- range $name, $taxonomy := .Site.Taxonomies -}}
{{- $.Scratch.Set "taxonomy" dict -}}
{{- range (index $.Site.Taxonomies $name) -}}
{{- $.Scratch.SetInMap "taxonomy" .Page.Title (dict "href" .Page.RelPermalink "title" .Page.Title) -}}
{{- end -}}
{{- $.Scratch.SetInMap "taxonomies" $name ($.Scratch.Get "taxonomy") -}}
{{- end }}
var taxonomies = {{- $.Scratch.Get "taxonomies" | jsonify | safeJS -}};

// Fill-in the Search DB with site's content
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
    {{- $.Scratch.Set "reading_time" nil -}}
    {{- if eq .Type "blog" -}}
        {{- $minutes := .ReadingTime -}}
        {{- if gt $minutes 0 -}}
        {{- $.Scratch.Set "reading_time" (i18n "minutes" $minutes) -}}
        {{- end -}}
    {{- end -}}

    {{- $.Scratch.Set "date" nil -}}
    {{- if ne .Type "page" -}}
    {{- $.Scratch.Set "date" (.Date.Format (i18n "date_format")) -}}
    {{- end -}}

    {{ .Scratch.Set "en_article_in_fr_site" false }}
    {{- partial "lang-detection.html" . -}}
    {{- $.Scratch.Add "index" (dict "title" .Title "opensource" .Params.opensource "topics" .Params.topics "permalink" .Permalink "hasEnFlag" (.Scratch.Get "en_article_in_fr_site") "type" .Type "type_label" (i18n (print "type_" .Type)) "date" ($.Scratch.Get "date") "reading_time" ($.Scratch.Get "reading_time") "summary" (.Summary | plainify | htmlUnescape)) -}}
{{- end }}
var searchDb = {{- $.Scratch.Get "index" | jsonify | safeJS -}};

// Initialize the Fuse.io framework with the Search DB
fuseInit(searchDb);

//
// execute search as each character is typed
//
searchInput.onkeyup = function(e) { 
  executeSearch(this.value);
}

    </script>
</article>
{{ end }}