michalvankodev-site/axum_server/templates/components/blog_post_preview.html

<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8">
	<aside class="row-span-3 self-center">
		{% match post.metadata.thumbnail %}
		{% when Some with (orig_path) %}
		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
		{% when None %}
		<div> 
			{% include "components/blog_post_default_thumbnail.html" %}
		</div>
		{% endmatch %}
	</aside>
	<header>
		<h3 class="text-lg font-bold mb-1 md:text-3xl">
		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
		</h3>
	</header>
	<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
	<footer class="text-sm md:text-base lg:text-lg">
    <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>