From 83925df1efc115b3f12a53ee834863fd5881b0df Mon Sep 17 00:00:00 2001
From: Serghei Iakovlev <egrep@protonmail.ch>
Date: Sun, 31 Jul 2022 00:05:43 +0200
Subject: Use HTML5 template to render search results

---
 CHANGELOG.md                                       |  3 +-
 assets/js/search.js                                | 41 ++++++++++++++--------
 assets/sass/_customize.scss                        |  5 +++
 layouts/shortcodes/form-search.html                |  9 +++++
 ...e.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; }
 
-- 
cgit v1.2.3