search-lunr.html

{% assign search_results = site.data.locales | where: "id", "search-results" | first %}
{% assign search_no_result = site.data.locales | where: "id", "search-no-result" | first %}
{% assign search_no_query = site.data.locales | where: "id", "search-no-query" | first %}
{% assign search_results_count = site.data.locales | where: "id", "search-results-count" | first %}
{% assign labels = site.data.categories %}

<div id="search-results-header" style="display: none;">
    <h1>{{ search_results.name[site.active_lang] }}</h1>

    <p id="search-results-p" class="mb-5"><i><span id="search-results-count"></span> {{ search_results_count.name[site.active_lang] }}</i></p>
</div>


<div id="search-results">
    <progress class="progress is-small is-grey-lighter" max="100">10%</progress>
</div>

<template id="search-item-template">
    <div class="mb-5">
        <h3 class="mb-1"><a></a></h3>
        <p class="post-info is-italic mb-1"></p>
        <p class="text"></p>
    </div>
</template>

<script src="/assets/js/lunr.js"></script>
<script src="/assets/js/lunr.stemmer.support.js"></script>
<script src="/assets/js/lunr.de.js"></script>
<script src="/assets/js/lunr.fr.js"></script>
<script src="/assets/js/lunr.it.js"></script>

<script>

    // HTML element defined above
    let searchResults = document.querySelector( "#search-results" );
    let searchResultsHeader = document.querySelector( "#search-results-header" );
    let searchResultsP = document.querySelector( "#search-results-p" );
    let searchResultsCount = document.querySelector( "#search-results-count" );

    // Create a JS map with the translation of the categories
    let categories = new Map();
    {% assign labels = site.data.categories %}
    {% for category in site.categories %}
        {% assign label = labels | where: "id", category[0] | first %}
        categories.set("{{ category[0] }}", "{{ label.name[site.active_lang] }}");
    {% endfor %} 

    // Async Function to Start LunrJS
    async function startLunrJSAsync()
    {
        console.log( "search: Starting Lunr..." );

        let idx, pages;
        let ok = false;

        const lunrIndex = "/index.json";
        const lunrPages = "/pages.json";

        // Load the Pre-Built Index
        console.log( "search: Fetching Index..." );
        let response = await fetch( lunrIndex );
        let data = await response.json();
        idx = lunr.Index.load( data );
        console.log( "search: Index Loaded!" );

        // Load the Page Summaries
        console.log( "search: Fetching Pages..." );
        response = await fetch( lunrPages );
        data = await response.json();
        pages = data;
        console.log( "search: Pages Loaded!" );

        // Lunr is Ready; Return */
        console.log( "search: Lunr Is Ready!" );
        ok = true;
        let obj = {
            idx: idx,
            pages: pages,
            ok: ok
        };
        return obj;
    }

    // Clear the Search Results element then populate with search results
    function searchSite( search, query, query_term )
    {
        let template = document.querySelector( "#search-item-template" );

        let allResults = search.idx.search( query );

        if ( allResults.length === 0 ) {
            searchResultsP.innerHTML = "{{ search_no_result.name[site.active_lang] }} '" + query_term + "'";
        }
        else {
            searchResultsCount.innerHTML = allResults.length;
            allResults.forEach( function ( result )
            {
                let output = document.importNode( template.content, true );
                let title = output.querySelector( "a" );
                let post_info = output.querySelector( "p.post-info" );
                let summary = output.querySelector( "p.text" );
                let docRef;

                // Find the requisite document summary for the search result
                for ( let i = 0; i < search.pages.length; i++ )
                {
                    if ( search.pages[i].id == result.ref )
                    {
                        docRef = search.pages[i];
                        break;
                    }
                }
                if ( docRef )
                {
                    title.innerHTML = docRef.title;
                    title.setAttribute( "href", docRef.url );
                    summary.innerHTML = docRef.body.substring( 0, 200 ) + '...';
                    searchResults.appendChild( output );
                    // Show the post info if we have a date and a category
                    if ( docRef.date && docRef.category ) {
                        post_info.innerHTML =  docRef.date + " – " + categories.get(docRef.category);
                    }
                    else {
                        post_info.style.display = "none";
                    }
                }
            } );
        }
    }

    ( async () =>
    {
        // Initialize Lunr
        let Search = await startLunrJSAsync();

        // Hide the progress bar
        searchResults.innerHTML = "";
        
        // HTML elements from the sidebar (if any) - these can be undefined
        let searchForm = document.getElementById("website-search-form");
        let langSelect = document.getElementById("website-search-lang");
        let lang = "any";
        let categorySelect = document.getElementById("website-search-category");
        let category = "any"

        let params = new URLSearchParams( document.location.search.substring( 1 ) );
        // If we have a lang in the URL, use that
        if ( params.get( "lang" ) )
        {
            lang = params.get( "lang" );
        }
        // Otherwise, if we have a select for lang, use that
        else if (langSelect) {
            lang = langSelect.options[langSelect.selectedIndex].value;
        }
        // If we have a category in the URL, use that
        if ( params.get( "category" ) )
        {
            category = params.get( "category" );
        }
        else if (categorySelect) {
            category = categorySelect.options[categorySelect.selectedIndex].value;
        }
        if ( params.get( "q" ) )
        {
            let query = params.get( "q" );
            // Also make sure we preserve the query term in the form
            // This can be in the navbar or in the sidebar
            document.getElementById("website-search").value = query;
            // Preserve the original query for logging
            let query_term = query;
            // Remove quotes and trim
            query = query.replace(/\'|\"/g, ' ');
            query = query.trim();
            // Make it an AND query
            query = query.replace(/\s+/g, ' +');
            // If a lang is selected, make it a '+... +lang:xxyy' query
            if (lang != "any") {
                query = query + " +lang:" + lang; 
            }
            if (category != "any") {
                query = query + " +category:" + category;
            }
            if (!query.startsWith("+")) {
                query = "+" + query;
            }
            console.log(query);
            // Preserve the lang selection in the select (if any)
            if (langSelect) {
                langSelect.value = lang;
            }
            // Preserve the category selection in the select (if any)
            if (categorySelect) {
                categorySelect.value = category;
            }
            //console.log( query )
            searchSite( Search, query, query_term );
        }
        else {
            // Display message to enter a query
            searchResultsP.innerHTML = "{{ search_no_query.name[site.active_lang] }}";
        }
        // Show the header with the message (result count, no query or no result)
        searchResultsHeader.style.display = "block";

        // If we have a search form, display it
        if (searchForm) {
            searchForm.style.display = "block";
        }
    } )();
</script>