From 9744b4d727c8c8764f8012a74f65b262d5ce7839 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sat, 28 Oct 2023 10:56:58 -0400
Subject: [PATCH] feat: option to show tags for blog list (#161)

* feat: option to show tags for blog list

* chore: update hugo_stats.json
---
 exampleSite/content/blog/markdown.md |  4 ++++
 exampleSite/hugo.yaml                |  4 ++++
 exampleSite/hugo_stats.json          |  1 +
 layouts/blog/list.html               | 21 +++++++++++++++------
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/exampleSite/content/blog/markdown.md b/exampleSite/content/blog/markdown.md
index 782786f1..c4fb64e8 100644
--- a/exampleSite/content/blog/markdown.md
+++ b/exampleSite/content/blog/markdown.md
@@ -4,6 +4,10 @@ date: 2020-01-01
 authors:
   - name: John Doe
     link: https://example.com/johndoe
+tags:
+  - Markdown
+  - Example
+  - Guide
 excludeSearch: true
 ---
 
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 418476f1..dcdaebba 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -136,6 +136,10 @@ params:
     enable: true
     base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"
 
+  blog:
+    list:
+      displayTags: true
+
   comments:
     enable: false
     type: giscus
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index 450bb8ce..faa572b7 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -402,6 +402,7 @@
       "ml-1",
       "ml-4",
       "mr-2",
+      "mt-1",
       "mt-1.5",
       "mt-12",
       "mt-16",
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index a8026e5d..b22de2ec 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
-{{- $readMore := (T "readMore") | default "Read more →" -}}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  {{- $readMore := (T "readMore") | default "Read more →" -}}
+  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
@@ -10,11 +10,20 @@ <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dar
         {{ range .Pages.ByDate.Reverse }}
           <div class="mb-10">
             <h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-            <p class="opacity-80 mt-6 leading-7">
-              {{- partial "utils/page-description" . }}
-              <span class="inline-block"> <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">{{ $readMore }}</a> </span>
+            {{- if site.Params.blog.list.displayTags -}}
+              {{ with .Params.tags }}
+                <p class="opacity-50 text-sm leading-7">
+                  {{- range . }}<a class="inline-block mr-2">#{{ . }}</a>{{ end -}}
+                </p>
+              {{ end -}}
+            {{- end -}}
+            <p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
+            <p class="opacity-80 mt-1 leading-7">
+              <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
+                {{- $readMore -}}
+              </a>
             </p>
-            <p class="opacity-50 text-sm mt-6 leading-7">{{ partial "utils/format-date" .Date }}</p>
+            <p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
           </div>
         {{ end }}
       </main>