post_preview with footer

axum_server/templates/components/post_preview.html

@@ -1,15 +1,23 @@
-<article class="grid grid-rows-3 grid-flow-col gap-4">
+<article class="grid grid-cols-[1fr_2fr] grid-flow-col gap-4">
 	<aside class="row-span-3">
 	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#mail" />
 	  </svg>
 	</aside>
 	<header>
-		<h3 class="text-lg font-medium mb-1">{{post.metadata.title}}</h3>
+		<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3>
 	</header>
-	<section class="text-sm leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
-	<footer>
-	  Footrik
+	<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
+	<footer class="text-sm">
+    <ul class="inline-block">
+     {% for tag in post.metadata.tags %}
+      <li class="inline-block">
+        <a href="/blog/tags/{{tag}}" class="text-pink-950 no-underline">#{{tag|capitalize}}</a>
+      </li>
+      {% endfor %}
+    </ul>
+		|
+    <time datetime="{{post.metadata.date}}" class="text-pink-950"> {{post.metadata.date|pretty_date}} </time>
 	</footer>
 </article>
 

axum_server/templates/index.html

@@ -54,6 +54,7 @@
    {% for post in featured_posts %}
     <li>
       {% include "components/post_preview.html" %}
+      <hr class="border-blue-950 my-5">
     </li>
    {% endfor %}
   </ul>

axum_server/templates/post_preview_card.html

@@ -8,7 +8,7 @@
     {% include "post_tag_list.html" %}
     <section class="created-at m-1 text-right text-sm text-gray-600">
       <span>Published on</span>
-      <time datetime="{post.metadata.date}"> {{post.metadata.date|pretty_date}} </time>
+      <time datetime="{{post.metadata.date}}"> {{post.metadata.date|pretty_date}} </time>
     </section>
     </aside>
   </header>