diff options
| -rw-r--r-- | CHANGELOG.md | 3 | ||||
| -rw-r--r-- | assets/js/search.js | 41 | ||||
| -rw-r--r-- | assets/sass/_customize.scss | 5 | ||||
| -rw-r--r-- | layouts/shortcodes/form-search.html | 9 | ||||
| -rw-r--r-- | resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 3 |
5 files changed, 45 insertions, 16 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 769534f..2d427a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- Set the language target to `es2015` when build JavaScript. +- Set the language target to `es2015` when build JavaScript +- Use HTML5 `<template>` tag to render search results ### Fixed diff --git a/assets/js/search.js b/assets/js/search.js index b66b12d..9678d0e 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -129,21 +129,32 @@ function clearSearchResults() { } function updateSearchResults(query, results) { - document.getElementById('search-results-body').innerHTML = results - .map((hit) => ` - <article class="post" data-score="${hit.score.toFixed(2)}"> - <header> - <h2 class="post-title"> - <a href="${hit.href}?utm_source=search" class="search-result-page-title">${hit.title}</a> - </h2> - </header> - <p class="post-content">${createSearchResultBlurb(query, hit.content)}</p> - </article> - ` - ) - .join(''); - - document.getElementById('results-count').innerHTML = results.length; + const template = document.querySelector('template').content; + const fragment = document.createDocumentFragment(); + + const resultsBody = document.getElementById('search-results-body'); + resultsBody.textContent = ''; + + for (const id in results) { + const item = results[id]; + const result = template.cloneNode(true); + + const article = result.querySelector('article'); + article.dataset.score = item.score.toFixed(2); + + const a = result.querySelector('a'); + a.innerHTML = item.title; + a.href = `${item.href}?utm_source=search`; + + const content = result.querySelector('.post-content'); + content.innerHTML = createSearchResultBlurb(query, item.content); + + fragment.appendChild(result); + } + + resultsBody.appendChild(fragment); + + document.getElementById('results-count').textContent = results.length; } function createSearchResultBlurb(query, pageContent) { diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss index 85dd213..ca681cd 100644 --- a/assets/sass/_customize.scss +++ b/assets/sass/_customize.scss @@ -1,5 +1,10 @@ @import "_mixins"; +template { + // IE support for HTML5 <template> tag + display: none; +} + .masthead-title small { font-size: .78rem; } diff --git a/layouts/shortcodes/form-search.html b/layouts/shortcodes/form-search.html index 9276030..bab117a 100644 --- a/layouts/shortcodes/form-search.html +++ b/layouts/shortcodes/form-search.html @@ -32,6 +32,15 @@ <div id="search-results-body" class="post-list"></div> </section> +<template> + <article class="post" data-score=""> + <header> + <h2 class="post-title"><a href="#" class="search-result-page-title"></a></h2> + </header> + <p class="post-content"></p> + </article> +</template> + {{- $isProduction := (or (eq (getenv "HUGO_ENV") "production") (eq site.Params.env "production")) -}} {{- /* Add lunr.js. */ -}} diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 72c8a9e..f694d13 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -875,6 +875,9 @@ form input:-moz-ui-invalid { -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } +template { + display: none; } + .masthead-title small { font-size: .78rem; } |