update search function

weru

13.31.2022 2f2ffc00257e914933af3b0fd04de89d6da7f7d8

update search function

Signed-off-by: weru <fromweru@gmail.com>

 assets/js/functions.js

@@ -161,7 +161,7 @@
  }
}

function parseBoolean(string) {
function parseBoolean(string = "") {
  string = string.trim().toLowerCase();
  switch (string) {
    case 'true':

 assets/js/search.js

@@ -1,5 +1,5 @@
function initializeSearch(index) {
  const searchKeys = ['title', 'link', 'body', 'id'];
  const searchKeys = ['title', 'link', 'body', 'id', 'section', 'tags'];

  const searchPageElement = elem('#searchpage');

@@ -36,15 +36,21 @@
      let resultsTitle = createEl('h3');
      resultsTitle.className = 'search_title';
      resultsTitle.innerText = quickLinks;

      let goBackButton = createEl('button');
      goBackButton.textContent = 'Go Back';
      goBackButton.className = goBackClass;
      if(passive) {
        resultsTitle.innerText = searchResultsLabel;
      }
      resultsFragment.appendChild(resultsTitle);
      if(!searchPageElement) {
        results = results.slice(0,8);
      } else {
        resultsFragment.appendChild(goBackButton);
        results = results.slice(0,12);
      }
      resultsFragment.appendChild(resultsTitle);

      results.forEach(function(result){
        let item = createEl('a');
        item.href = `${result.link}?query=${query}`;
@@ -59,7 +65,7 @@
          let itemDescription = createEl('p');
          // position of first search term instance
          let queryInstance = result.body.indexOf(query);
          itemDescription.textContent = `... ${result.body.substring(queryInstance, queryInstance + 200)} ...`;
          itemDescription.textContent = `${result.body.substring(queryInstance, queryInstance + 200)}`;
          item.appendChild(itemDescription);
        } else {
          item.textContent = result.title;
@@ -79,7 +85,7 @@
    showResults.appendChild(resultsFragment);
  }

  function search(searchTerm, passive = false) {
  function search(searchTerm, scope = null, passive = false) {
    if(searchTerm.length) {
      let rawResults = index.search(searchTerm);
      rawResults = rawResults.map(function(result){
@@ -87,7 +93,13 @@
        const resultItem = result.item;
        resultItem.score = (parseFloat(score) * 50).toFixed(0);
        return resultItem;
      })

      if(scope) {
        rawResults = rawResults.filter(resultItem => {
          return resultItem.section == scope;
      });
      }

      passive ? searchResults(rawResults, searchTerm, true) : searchResults(rawResults, searchTerm);

@@ -100,16 +112,19 @@
    const searchField = elem(searchFieldClass);

    if (searchField) {
      const searchScope = searchField.dataset.scope;
      searchField.addEventListener('input', function() {
        const searchTerm = searchField.value.trim().toLowerCase();
        search(searchTerm);
        search(searchTerm, searchScope);
        // console.log(searchTerm);
      });

      if(!searchPageElement) {
        searchField.addEventListener('search', function(){
          const searchTerm = searchField.value.trim().toLowerCase();
          if(searchTerm.length)  {
            window.location.href = new URL(`search/?query=${searchTerm}`, rootURL).href;
            const scopeParameter = searchScope ? `&scope=${searchScope}` : '';
            window.location.href = new URL(`search/?query=${searchTerm}${ scopeParameter }`, rootURL).href;
          }
        });
      }
@@ -128,11 +143,12 @@
  function passiveSearch() {
    if(searchPageElement) {
      const searchTerm = findQuery();
      search(searchTerm, true);

      const searchScope = findQuery('scope');
      // search actively after search page has loaded
      const searchField = elem(searchFieldClass);

      search(searchTerm, searchScope, true);

      if(searchField) {
        searchField.addEventListener('input', function() {
          const searchTerm = searchField.value.trim().toLowerCase();
@@ -193,7 +209,9 @@
}

window.addEventListener('load', function() {
  fetch(new URL("index.json", rootURL).href)
  const pageLanguage = document.documentElement.lang;
  const searchIndex = `${ pageLanguage === 'en' ? '': pageLanguage}/index.json`;
  fetch(new URL(searchIndex, rootURL).href)
  .then(response => response.json())
  .then(function(data) {
    data = data.length ? data : [];

 assets/js/variables.js

@@ -7,6 +7,8 @@
const rootURL = window.location.protocol + "//" + window.location.host;
const searchFieldClass = '.search_field';
const searchClass = '.search';
const goBackClass = 'button_back';
const lineClass = '.line';

// config defined values
const codeBlockConfig = JSON.parse('{{ partial "functions/getCodeConfig" . }}');

 layouts/_default/index.json

@@ -1,7 +1,7 @@
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.Pages -}}
  {{- if ne .Type "search" -}}
    {{- $.Scratch.Add "index" (dict "title" .Title "body" .Plain "link" .Permalink) -}}
    {{- $.Scratch.Add "index" (dict "title" .Title "body" .Plain "link" .Permalink "section" .Section) -}}
  {{- end -}}
{{- end -}}
{{- jsonify (uniq ($.Scratch.Get "index")) -}}

 layouts/partials/scripts/bundle.html

@@ -22,7 +22,7 @@
{{ end }}
{{- $custom := resources.Get $customScriptPath | resources.ExecuteAsTemplate $customScriptPath . }}

{{- $bundle := slice $variables $functions $code $main $fuse $search $custom | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
{{- $bundle := slice $variables $functions $code $main $fuse $search $custom | resources.Concat "js/bundle.js" | resources.Fingerprint "sha512" }}
<script src="{{ $bundle.Permalink }}"></script>

{{- partialCached "hooks/scripts" . -}}

 layouts/partials/search.html

@@ -3,7 +3,12 @@
  <label for="find" class="search_label">
    {{- partial "sprite" (dict "icon" "search") }}
  </label>
  <input type="search" class="search_field" placeholder='{{ T "search_field_placeholder" }}' id="find" autocomplete="off">
  {{ $placeholder := T "search_field_placeholder" (dict "section" .Section) }}
  {{ if .Section }}
  {{ else }}
    {{ $placeholder =  printf "%s%s" $placeholder (T "site") }}
  {{ end }}
  <input type="search" class="search_field" placeholder='{{ $placeholder }}' id="find" autocomplete="off"  data-scope='{{ .Section }}'>
  {{- if ne .Params.searchPage true }}
  <div class="search_results results"></div>
  {{- end }}

 layouts/search/single.html

@@ -1,5 +1,5 @@
{{- define "main" }}
<main id="results">
  <div class="results" id="searchpage"></div>
  <div class="results wrap" id="searchpage"></div>
</main>
{{- end }}