feat: refactor how blog cards layout, add metadata, better responsiveness

src/components/cards/BlogCard.astro

@@ -1,10 +1,11 @@
 ---
-import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
+import getReadingTime from 'reading-time';
 
 import type { Post } from '@lib/directusTypes';
 
-import { formatDate } from '@support/time';
+import Logo from '@components/images/Logo.astro';
+import { formatShortDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
@@ -12,6 +13,8 @@ interface Props {
 }
 
 const { post } = Astro.props;
+
+const readingTime = getReadingTime(post.content || '');
 ---
 
 <div class="smooth-reveal-cards group flex flex-col">
@@ -31,25 +34,37 @@ const { post } = Astro.props;
         inferSize={true}
       />
     </div>
-    <div class="rounded-xl p-4 md:p-5 flex flex-col flex-1">
-      <h3 class="card-text-title text-xl">
-        {post.title}
-      </h3>
-      <div class="ml-6 flex mt-auto">
-        <div class="relative inline-block w-full">
-          <div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
-            <span class="relative inline-block overflow-hidden ml-2">
-              Read more
-            </span>
-            <Icon
-              name="mdi:keyboard-arrow-right"
-              class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+    <div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
+      <div class="flex flex-row items-center mb-8">
+        <h3 class="card-text-title card-hover-text-title text-xl md:text-2xl">
+          {post.title}
+        </h3>
+      </div>
+      <div class="flex shrink-0 items-center mt-auto gap-x-2 card-text-description text-sm overflow-hidden whitespace-nowrap max-w-full">
+        <div class="inline-flex items-center">
+          <div class="mr-2">
+            <Logo
+              srcLight={getDirectusImageURL(post.category.logoLight)}
+              srcDark={getDirectusImageURL(post.category.logoDark)}
+              alt={`Logo of ${post.category.title}`}
+              width={18}
+              height={18}
             />
-            <p class="card-text-description text-sm ml-auto">
-              {formatDate(post.published_date)}
-            </p>
           </div>
+          {post.category.title}
         </div>
+        <span>
+          /
+        </span>
+        <p>
+          {formatShortDate(post.published_date)}
+        </p>
+        <span>
+          /
+        </span>
+        <span>
+          {readingTime.minutes.toPrecision(1)} minutes
+        </span>
       </div>
     </div>
   </a>