From 08017d5977fb6bdbe3545a820bf963809c5f3d0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?=
 <70479573+BernatBC@users.noreply.github.com>
Date: Sat, 29 Jul 2023 17:21:26 +0200
Subject: [PATCH] Add possibility to show tags on post cards (#782)

* Add possibility to show tags on post cards

* Add on_card tags in exampleSite

---------

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 assets/styles/layouts/list.scss          | 16 ++++++++++++++++
 assets/styles/sections/recent-posts.scss | 16 ++++++++++++++++
 exampleSite/config.yaml                  |  1 +
 layouts/partials/cards/post.html         | 10 ++++++++++
 layouts/partials/cards/recent-post.html  | 10 ++++++++++
 5 files changed, 53 insertions(+)

diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index 8ee9f63..d79b7eb 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -98,6 +98,22 @@ body.kind-section, body.kind-term, body.kind-page{
     width: fit-content;
   }
   
+  .taxonomy-terms-card {
+    text-align: left;
+  }
+  .taxonomy-terms-card li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  
+  .taxonomy-terms-card a {
+    color: #f9fafc;
+  }
+
   /* ============= Device specific fixes ======= */
   
   /* Large screens such as TV */
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index 7ff1704..1b30c8b 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -38,6 +38,22 @@
     -webkit-line-clamp: 5; /* number of lines to show */
     -webkit-box-orient: vertical;
   }
+
+  .taxonomy-terms {
+    text-align: left;
+  }
+  .taxonomy-terms li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
+  
+  .taxonomy-terms a {
+    color: #f9fafc;
+  }
   
   /* ============= Device specific fixes ======= */
   
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 99d29f9..ad283d5 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -189,6 +189,7 @@ params:
     # Show tags under the post title
     tags:
       enable: true
+      on_card: true # enables tags in post cards
 
     # Specify whether to show flag in the language selector. Default is true.
     flags:
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index afabab9..200cf84 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -9,6 +9,16 @@
         <p class="card-text post-summary">{{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms-card">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a
         href="{{ .RelPermalink | relLangURL }}"
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
index 4426e46..5ed926e 100644
--- a/layouts/partials/cards/recent-post.html
+++ b/layouts/partials/cards/recent-post.html
@@ -11,6 +11,16 @@
         <p class="card-text post-summary"> {{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
       </div>