From 1740bf5a70667b646bc8aa40ed37902deac1f60a Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Sun, 3 Mar 2024 19:39:28 +0100
Subject: [PATCH] tags on post header

---
 axum_server/src/pages/post.rs        |  2 ++
 axum_server/styles/output.css        | 17 +++++++++++++++++
 axum_server/templates/post.html      | 15 +++++++++++----
 axum_server/templates/post_list.html |  4 +---
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/axum_server/src/pages/post.rs b/axum_server/src/pages/post.rs
index 24d3959..5da2ad8 100644
--- a/axum_server/src/pages/post.rs
+++ b/axum_server/src/pages/post.rs
@@ -30,6 +30,7 @@ pub struct PostTemplate {
     pub title: String,
     pub body: String,
     pub date: DateTime<Utc>,
+    pub tags: Vec<String>,
     pub site_footer: SiteFooter,
     pub header_props: HeaderProps,
 }
@@ -45,6 +46,7 @@ pub async fn render_post(Path(post_id): Path<String>) -> Result<PostTemplate, St
     Ok(PostTemplate {
         title: parsed.metadata.title,
         date: parsed.metadata.date,
+        tags: parsed.metadata.tags,
         body: parsed.body,
         site_footer,
         header_props: HeaderProps::default(),
diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css
index 4a57e03..ea4a255 100644
--- a/axum_server/styles/output.css
+++ b/axum_server/styles/output.css
@@ -600,14 +600,26 @@ video {
   flex-grow: 1;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .content-end {
   align-content: flex-end;
 }
 
+.content-around {
+  align-content: space-around;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
@@ -707,6 +719,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/axum_server/templates/post.html b/axum_server/templates/post.html
index ed0870b..1828fc9 100644
--- a/axum_server/templates/post.html
+++ b/axum_server/templates/post.html
@@ -6,10 +6,17 @@
 <article>
   <header class="px-4">
   <h1 class="text-3xl text-blue-900 mb-3">{{title}}</h1>
-  <section class="created-at m-1 text-right text-sm text-gray-600">
-    <span>Published on</span>
-    <time datetime="{date}"> {{date|pretty_date}} </time>
-  </section>
+  <aside class="flex justify-around flex-row">
+    <section class="">
+    {% for tag in tags %}
+      <a href="/blog/tags/{{tag}}" class="text-blue-700">#{{tag}}</a>
+    {% endfor %}
+    </section>
+    <section class="created-at m-1 text-right text-sm text-gray-600">
+      <span>Published on</span>
+      <time datetime="{date}"> {{date|pretty_date}} </time>
+    </section>
+  </aside>
 </header>
 
 <section class="article-body">
diff --git a/axum_server/templates/post_list.html b/axum_server/templates/post_list.html
index 9eccdcc..bf46abc 100644
--- a/axum_server/templates/post_list.html
+++ b/axum_server/templates/post_list.html
@@ -12,9 +12,7 @@
 <ul>
   {% for post in posts %}
   <li class="my-12">
-    {% include "post_preview_card.html" %} {#
-    <ArticlePreviewCard {article} {segment} /> #} {#
-    <ArticleFooter {article} {segment} /> #}
+    {% include "post_preview_card.html" %}
   </li>
   {% endfor %}
 </ul>