date formatting

axum_server/src/filters.rs

@@ -0,0 +1,7 @@
+use chrono::{DateTime, Utc};
+
+// This filter does not have extra arguments
+pub fn pretty_date(date_time: &DateTime<Utc>) -> ::askama::Result<String> {
+    let formatted = format!("{}", date_time.format("%e %B %Y"));
+    Ok(formatted)
+}

axum_server/src/main.rs

@@ -5,6 +5,7 @@ use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod components;
 mod feed;
+mod filters;
 mod pages;
 mod post_list;
 mod post_parser;

axum_server/src/pages/post_list.rs

@@ -6,6 +6,7 @@ use crate::{
         site_footer::{render_site_footer, SiteFooter},
         site_header::{HeaderProps, Link},
     },
+    filters,
     post_list::get_post_list,
     post_parser::ParseResult,
 };

axum_server/styles/output.css

@@ -688,10 +688,19 @@ video {
   line-height: 1.25rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-medium {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .italic {
   font-style: italic;
 }
@@ -716,6 +725,16 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.text-blue-950 {
+  --tw-text-opacity: 1;
+  color: rgb(23 37 84 / var(--tw-text-opacity));
+}
+
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / 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_preview_card.html

@@ -1,11 +1,11 @@
 <article>
   <header class="px-4 mb-3"> 
-    <h2 class="text-2xl">
+    <h2 class="text-3xl font-semibold text-blue-900">
       <a rel="prefetch" href="/blog/{{post.slug}}">{{post.metadata.title}}</a>
     </h2>
     <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}} </time>
+      <time datetime="{post.metadata.date}"> {{post.metadata.date|pretty_date}} </time>
     </section>
   </header>