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

src/components/cards/LargeBlogRightCard.astro

@@ -1,60 +1,72 @@
 ---
-import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
+import getReadingTime from 'reading-time';
 
-import { formatDate } from '@support/time';
+import type { Post } from '@lib/directusTypes';
+
+import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
+import Logo from '@components/images/Logo.astro';
+import { formatShortDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
-  title: string;
-  subTitle: string;
-  url: string;
-  pubDate: Date;
-  imgOne: string;
-  imgOneAlt: string;
-  imgTwo?: string;
-  imgTwoAlt?: string;
+  post: Post;
 }
 
-const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
+const { post } = Astro.props;
+
+const readingTime = getReadingTime(post.content || '');
 ---
 
 <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
   <a
     class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
-    href={url}
+    href={`/blog/${post.slug}`}
     data-astro-prefetch
   >
     <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
       <h2 class="card-text-header mb-2">
-        {title}
+        {post.title}
       </h2>
       <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
-        {subTitle}
+        {post.description}
       </p>
       <div class="card-text-title flex items-center justify-between w-full">
-        <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
-          <div class="button-text-title flex relative items-center text-center">
-            <span class="mr-2">
-              Read More
-            </span>
-            <Icon
-              name="mdi:keyboard-arrow-right"
-              class="button-hover-arrow"
-            />
+        <ReadMoreButton/>
+        <div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
+          <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}
+              />
+            </div>
+            {post.category.title}
           </div>
+          <span>
+            /
+          </span>
+          <p>
+            {formatShortDate(post.published_date)}
+          </p>
+          <span>
+            /
+          </span>
+          <span>
+            {readingTime.minutes.toPrecision(1)} minutes
+          </span>
         </div>
-        <span class="card-text-description text-sm ml-auto">
-          {formatDate(pubDate)}
-        </span>
       </div>
     </div>
-    {!imgTwo ? (
+    {!post.image_second ? (
     <div>
       <Image
         class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
-        src={getDirectusImageURL(imgOne)}
-        alt={imgOneAlt}
+        src={getDirectusImageURL(post.image)}
+        alt={post.image_alt}
         draggable="false"
         loading="lazy"
         width="850"
@@ -67,8 +79,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
       <div class="md:hidden">
         <Image
           class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
-          src={getDirectusImageURL(imgOne)}
-          alt={imgOneAlt}
+          src={getDirectusImageURL(post.image)}
+          alt={post.image_alt}
           draggable="false"
           loading="lazy"
           width="850"
@@ -79,8 +91,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
       <div class="hidden md:flex md:items-start">
         <Image
           class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
-          src={getDirectusImageURL(imgOne)}
-          alt={imgOneAlt}
+          src={getDirectusImageURL(post.image)}
+          alt={post.image_alt}
           draggable="false"
           loading="lazy"
           width="600"
@@ -89,8 +101,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
         />
         <Image
           class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
-          src={getDirectusImageURL(imgTwo)}
-          alt={imgTwoAlt}
+          src={getDirectusImageURL(post.image_second)}
+          alt={post.image_second_alt}
           draggable="false"
           loading="lazy"
           width="600"