var sjs = SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    searchResultTemplate: ...
    noResultsText: '😴 검색 결과가 없습니다',
    templateMiddleware : ...
)}

function (prop, value, template) {
    return value
    }

if (prop === "url" || prop === 'date') {
          return value;
        }

const searchTerm = document.getElementById("search-input").value;
const regex = new RegExp(searchTerm, "gi");
let highlightedValue;

if (prop === 'title') {
  highlightedValue = value.replace(regex, '<span style="background:gold"><b>$&</b></span>')
  return highlightedValue;
}

if (prop === 'tags') {
    const dest = window.location.origin;
    const theTags = value.split(', ').map(tag => tag.trim());
    
    highlightedLinkedValue = theTags.map(tag => {
      // 하이라이트를 적용한다
      const highlightedTag = tag.replace(regex, '<b style="background:gold">$&</b>');
      // 링크를 적용한다
      return `<a href="${dest}/tags/#${tag}"><span>${highlightedTag}</span></a>`;
    }).join(', ');
    
    return highlightedLinkedValue;
        }

value = value.replace(/\[.*?\]/g, '');
const matches = value.match(regex);
let matchCnt;
if (matches) {
    // 띄어쓰기를 기준으로 토큰화한다
    const wordsArray = value.split(/\s+/);

    // 검색된 단어를 기준으로 앞뒤 15개 토큰을 사용한다
    const matchIndex = wordsArray.findIndex(word => regex.test(word));
    const start = Math.max(0, matchIndex - 15); 
    const end = Math.min(wordsArray.length, matchIndex + 15 + 1); 
    const truncatedValue = wordsArray.slice(start, end).join(" ");

    // 하이라이트를 적용한다
    highlightedValue = truncatedValue.replace(
        regex,
        '<span style="background:gold"><b>$&</b></span>'
    );
    matchCnt = matches.length

} else {
    // 본문에 검색어가 없을 경우 처음부터 30개 토큰을 가져온다
    const words = value.split(/\s+/).slice(0, 30).join(" ");
    highlightedValue = `${words}...`;
    matchCnt = 0
}
// 언급수
highlightedValue += `<div style="padding-top:5px"><span id="match-counter">본문에 <b>${matchCnt}</b>번 언급되었습니다</span></div>`;
return highlightedValue;

searchResultTemplate: 
        '<article>'+
        '<div><i class="fas fa-book fa-fw"></i><a href="{url}">{title}</a></div>'+
        '<div><i class="fas fa-clock fa-fw"></i><span>{date}</span></div>'+
        '<div><i class="fas fa-tag fa-fw"></i>{tags}</div>'+
        '<div style="display:inline-flex">' + 
            '<i class="fas fa-pencil-alt fa-fw" style="padding-top:5px"></i><a href="{url}"><span style="color:#343a40">{content}</span></a>' + 
        '</div>'+
        '</article>'

// 미리 추출한 키워드 json 데이터를 불러온다
const response = await fetch('keywords.json');
const data = await response.json();
...
// 첫번째 요소는 전체 평균이므로 두번째 요소부터 반복문을 시행한다
data.slice(1).forEach((obj, rnk) => {
    const li = document.createElement('li');
    const span = document.createElement('span');

    // 키워드를 읽어온다
    span.textContent = obj[0];

    // 클릭할 경우 해당 키워드를 search-input 입력창으로 전달한다
    span.addEventListener('click', function(event) {
                    const searchInput = document.getElementById('search-input');
                    searchInput.value = obj[0];

                    // trigger
                    const e = new Event('input', { bubbles: true });
                    searchInput.dispatchEvent(e);
                });
    ...

// 도움말 아이콘 팝업
const svgIcon = document.createElement('span')
svgIcon.innerHTML = `<svg width="25" height="25" viewBox="0 0 16 16" 생략..> </svg>`;
paragraph.appendChild(svgIcon);

const totalAvg = data[0]
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = `TF-IDF 점수를 기반으로 상위 5개 키워드를 추천합니다\n
                      현재 블로그의 전체 평균 TF-IDF는 ${totalAvg[1]}점입니다\n
                      추천 키워드에 마우스를 올려 점수를 비교해보세요`;
tooltip.style.whiteSpace = 'pre'; // '\n'이 적용되려면
document.body.appendChild(tooltip);

svgIcon.addEventListener('mouseenter', (event) => {
    tooltip.style.display = 'block';
    tooltip.style.left = `${event.pageX + 10}px`;
    tooltip.style.top = `${event.pageY + 10}px`;
});

svgIcon.addEventListener('mousemove', (event) => {
    tooltip.style.left = `${event.pageX + 10}px`;
    tooltip.style.top = `${event.pageY + 10}px`;
});

svgIcon.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
});