From 27797c2d7d35f46f790ac0360af74cf4543ee2a7 Mon Sep 17 00:00:00 2001
From: Jakob Meier <comcloudway@ccw.icu>
Date: Fri, 9 Feb 2024 16:19:21 +0100
Subject: [PATCH] Show tags below blog preview and use blog preview element on
 keyword screen

---
 layouts/blog/list.html             | 13 +++----------
 layouts/partials/blog-preview.html | 23 ++++++++++++++++++++++
 layouts/tags/list.html             | 12 +++++++++---
 static/base.css                    | 31 +++++++++++++++++++++++++-----
 4 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 layouts/partials/blog-preview.html

diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index ab608d6..8caf169 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -26,18 +26,11 @@
 		{{ else }}
 		<h2>Posts</h2>
 		<p><a href="index.xml">RSS feed</a></p>
+		<ul class="nopad">
 		{{ range .Pages }}
-		<a href="{{.Permalink}}" class="stub">
-			<h2>
-					{{.Title}}
-			</h2>
-			<small>
-				{{.Date.Format "January 2, 2006"}}
-				({{.ReadingTime}} min)
-			</small>
-			<p>{{ .Description }}</p>
-		</a>
+		{{ partial "blog-preview.html" . }}
 		{{ end }}
+		</ul>
 		{{ end }}
 	</main>
 	{{ partial "footer.html" }}
diff --git a/layouts/partials/blog-preview.html b/layouts/partials/blog-preview.html
new file mode 100644
index 0000000..0bd171e
--- /dev/null
+++ b/layouts/partials/blog-preview.html
@@ -0,0 +1,23 @@
+<li class="stub">
+  <a href="{{.Permalink}}">
+    <h2>
+      {{.Title}}
+    </h2>
+    <small>
+      {{.Date.Format "January 2, 2006"}}
+      ({{.ReadingTime}} min)
+    </small>
+    <p>{{ .Description }}</p>
+  </a>
+  {{ if (.GetTerms "keywords") }}
+  <ul class="tags">
+    {{ range (.GetTerms "keywords") }}
+    <li>
+      <a href="{{ .RelPermalink }}">
+        #{{ .LinkTitle }}
+      </a>
+    </li>
+    {{ end }}
+  </ul>
+  {{ end }}
+</li>
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index d1842da..bc6dff0 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -9,11 +9,17 @@
 		{{ partial "nav.html" }}
 		<h1>{{ .Title }}</h1>
 		<main>
-			<ul>
+			<ul class="nopad">
 				{{ range .Pages }}
-				<li>
-					<a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }} {{ if .Pages }}({{ .Pages | len}}){{end}}</a>
+				{{ if .Pages }}
+				<li class="pad01">
+					<a href="{{ .Page.RelPermalink }}">
+						{{ .Page.LinkTitle }} ({{ .Pages | len}})
+					</a>
 				</li>
+				{{ else }}
+				{{ partial "blog-preview.html" . }}
+				{{ end }}
 				{{ end }}
 			</ul>
 
diff --git a/static/base.css b/static/base.css
index 43d9b6d..e4b7fa4 100644
--- a/static/base.css
+++ b/static/base.css
@@ -323,7 +323,7 @@ div.sourceCode:hover::after,pre.example:hover::after, figure:hover::after,div.sr
 	}
 }
 
-a.category, a.stub {
+a.category, li.stub {
 	display: flex;
 	flex-direction: column;
 
@@ -332,13 +332,13 @@ a.category, a.stub {
 	border-radius: 0.4rem;
 
 	padding: 0.8rem;
-	margin: 0.4rem;
+	margin: 0.8rem;
 
 	gap: 0.4rem;
 
 	text-decoration: none;
 }
-a.category:hover, a.stub:hover {
+a.category:hover, li.stub:hover {
 	background: var(--color-box-light);
 }
 a.category > hgroup {
@@ -355,10 +355,24 @@ a.category > hgroup > p {
 	color: var(--color-text);
 	opacity: 0.8rem;
 }
-a.stub h2 {
+li.stub h2 {
 	margin: 0;
 }
-a.stub p {
+li.stub p {
+	margin: 0;
+}
+li.stub .tags {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+	margin: 0;
+	padding: 0.2rem;
+}
+li.stub .tags li {
+	display: block;
+}
+li.stub .tags li a {
 	margin: 0;
 }
 
@@ -370,3 +384,10 @@ footer {
 footer * {
 	text-align: center;
 }
+
+.nopad {
+	padding: 0;
+}
+.pad01 {
+	padding: 0.1rem;
+}
-- 
2.38.5