tags on post header

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(),

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);

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>
+  <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">

axum_server/templates/post_list.html

@@ -12,9 +12,7 @@
 <ul>
   {% for post in posts %}
   <li class="my-12">
-    {% include "post_preview_card.html" %} {#
+    {% include "post_preview_card.html" %}
-    <ArticlePreviewCard {article} {segment} /> #} {#
-    <ArticleFooter {article} {segment} /> #}
   </li>
   {% endfor %}
 </ul>