post_preview with footer

axum_server/src/filters.rs

@@ -12,7 +12,7 @@ pub fn description_filter(body: &String) -> ::askama::Result<String> {
     let description = body
         .lines()
         .filter(|line| line.starts_with("<p"))
-        .take(3)
+        .take(2)
         .collect::<Vec<&str>>()
         .join("\n");
     debug!(description);

axum_server/styles/output.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -615,6 +615,11 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -683,10 +688,34 @@ video {
   flex-grow: 1;
 }
 
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
+  grid-template-columns: minmax(0,1fr) auto;
+}
+
+.grid-cols-\[1fr\2c 2fx\] {
+  grid-template-columns: 1fr 2fx;
+}
+
+.grid-cols-\[1fr_2fx\] {
+  grid-template-columns: 1fr 2fx;
+}
+
+.grid-cols-\[1fr_2fr\] {
+  grid-template-columns: 1fr 2fr;
+}
+
 .grid-rows-3 {
   grid-template-rows: repeat(3, minmax(0, 1fr));
 }
@@ -850,6 +879,10 @@ video {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .capitalize {
   text-transform: capitalize;
 }
@@ -897,6 +930,10 @@ video {
   color: rgb(80 7 36 / var(--tw-text-opacity));
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .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/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>