Add tags in post cards from search results (#895)

* Add tags in post cards from search results * Use on_card parameter to decide to show the cards or not * Fix search cards height * Minor fix * Fix null tags * Fix CSS not applied properly in search page Signed-off-by: hossainemruz <[email protected]> --------- Signed-off-by: hossainemruz <[email protected]> Co-authored-by: Emruz Hossain <[email protected]>
hugo-toha · Feb 23, 2024 · 1ec4cd2 · 1ec4cd2
1 parent 9f5a44e
commit 1ec4cd2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/assets/scripts/pages/search.js b/assets/scripts/pages/search.js
@@ -79,14 +79,21 @@ window.addEventListener('DOMContentLoaded', () => {
       // pull template from hugo template definition
       const templateDefinition = document.getElementById('search-result-template').innerHTML
       // replace values
+      function adaptTags() {
+        const tags = value.item.tags;
+        let string = '';
+        if (tags) tags.forEach((t) => {string += '<li class="rounded"><a href="/tags/' + t.toLowerCase() + '/" class="btn btn-sm btn-info">' + t + "</a></li>"});
+        return string;
+      }
+
       const output = render(templateDefinition, {
         key,
         title: value.item.title,
         hero: value.item.hero,
         date: value.item.date,
         summary: value.item.summary,
         link: value.item.permalink,
-        tags: value.item.tags,
+        tags: adaptTags(),
         categories: value.item.categories,
         snippet
       })

diff --git a/layouts/_default/search.html b/layouts/_default/search.html
@@ -28,28 +28,40 @@
 {{ end }}
 
 {{ define "content" }}
+<script>
+  document.body.classList.replace('kind-page', 'kind-section');
+</script>
 <section class="content-section" id="content-section">
   <div class="content container-fluid" id="content">
     <div class="container-fluid post-card-holder" id="post-card-holder">
-      <div id="search-results">
+      <div id="search-results" style="display: flex;">
 
         <script id="search-result-template" type="text/x-js-template">
           <div class="post-card">
-            <a href="${link}" class="post-card-link">
-              <div class="card" style="min-height: 352px;"><a href="${link}" class="post-card-link">
+              <div class="card">
                 <div class="card-head">
+                  <a href="${link}" class="post-card-link">
                   <img class="card-img-top" src="${hero}" alt="Card Heading Image">
+                  </a>
                 </div>
                 <div class="card-body">
-                  <h5 class="card-title">${title}</h5>
-                  <p class="card-text post-summary">${summary}</p>
+                  <a href="${link}" class="post-card-link">
+                    <h5 class="card-title">${title}</h5>
+                    <p class="card-text post-summary">${summary}</p>
+                  </a>
+                  {{ if site.Params.features.tags.on_card }}
+                  <div class="tags">
+                    <ul style="padding-left: 0;">
+                    ${tags}
+                    </ul>
+                  </div>
+                  {{ end }}
                 </div>
                 <div class="card-footer">
                   <span class="float-left">${date}</span>
                   <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
                 </div>
               </div>
-	          </a>
           </div>
         </script>