FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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 <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Bernat Borràs Civil 2024-02-23 18:37:35 +01:00 • committed by GitHub
parent 9f5a44e24e
commit 1ec4cd2688
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/scripts/pages/search.js
View file

@ -79,6 +79,13 @@ 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,
@ -86,7 +93,7 @@ window.addEventListener('DOMContentLoaded', () => {
date: value.item.date,
summary: value.item.summary,
link: value.item.permalink,
tags: value.item.tags,
tags: adaptTags(),
categories: value.item.categories,
snippet
})

24
layouts/_default/search.html
View file

@ -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>