FEAT: Add image to case study thumbnail (#638)

Author: stefanskoricdev

apps/website/astro.config.mjs

@@ -20,8 +20,8 @@ export default defineConfig({
     imageService: true,
     imagesConfig: {
       sizes: [
-        320, 480, 578, 640, 720, 800, 940, 960, 1200, 1280, 1412, 1440, 1536,
-        1600, 1800, 1920,
+        160, 320, 480, 578, 640, 720, 800, 940, 960, 1200, 1280, 1412, 1440,
+        1536, 1600, 1800, 1920,
       ],
       formats: ["image/avif", "image/webp"],
     },

apps/website/src/assets/from-angular-to-react.png

@@ -1,16 +1,40 @@
 ---
+import { Image } from "astro:assets";
 import ExternalLink from "./ExternalLink.astro";
 
 interface Props {
   href: string;
   linkText: string;
   title: string;
+  image: string;
 }
 
-const { href, linkText, title } = Astro.props;
+const { href, linkText, title, image } = Astro.props;
+
+const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*.*");
+
+const linkImageSrc = await images[`/src/assets/${image || ""}`]();
 ---
 
-<div class="bg-white p-4 rounded-md gap-2 grid md:w-[65%]">
-  <span class="text-contrast text-sm sm:text-base font-semibold">{title}</span>
-  <ExternalLink href={href} text={linkText} />
+<div
+  class="bg-white p-4 rounded-md gap-x-4 gap-y-2.5 grid w-full max-w-[390px]"
+>
+  <Image
+    src={linkImageSrc.default}
+    alt={title}
+    width={80}
+    height={80}
+    class="col-span-1 row-span-2 aspect-square w-[80px] rounded-lg object-cover"
+    widths={[160, 320]}
+    sizes={"160px"}
+  />
+  <span
+    class="text-contrast text-sm sm:text-base font-semibold col-span-1 row-span-1 col-start-2"
+    >{title}</span
+  >
+  <ExternalLink
+    href={href}
+    text={linkText}
+    classNames="col-span-1 row-span-1 col-start-2"
+  />
 </div>

apps/website/src/assets/how-we-rebuilt-a-legacy-ui-with-zero-downtime.png

@@ -1,13 +1,15 @@
 ---
+import classnames from "classnames";
 interface Props {
   href: string;
   text: string;
+  classNames?: string;
 }
 
-const { href, text } = Astro.props;
+const { href, text, classNames } = Astro.props;
 ---
 
-<div class="flex gap-2 items-center">
+<div class={classnames("flex gap-2 items-center", classNames)}>
   <a
     class="text-contrast underline underline-offset-2 text-sm sm:text-base"
     href={href}

apps/website/src/assets/using-lago-to-create-a-flexible-billing-system-2.png

@@ -23,16 +23,15 @@ interface Props {
     href: string;
     text: string;
     title?: string;
+    image?: string;
   };
 }
 
 const { title, subtitles, content, styles, img, classNames, link } =
   Astro.props;
 
-const images = import.meta.glob("../assets/*.*");
-const src = images[`../assets${img.path}`] as any as () => Promise<{
-  default: ImageMetadata;
-}>;
+const images = import.meta.glob<{ default: ImageMetadata }>("../assets/*.*");
+const src = images[`../assets${img.path}`];
 
 const image = await src();
 ---
@@ -50,7 +49,7 @@ const image = await src();
     h-[710px]
     overflow-hidden
     `,
-    styles,
+    styles
   )}
 >
   <section
@@ -70,7 +69,7 @@ const image = await src();
       lg:grid-cols-2
       backdrop-blur-[15px]
       `,
-      classNames,
+      classNames
     )}
   >
     <div
@@ -96,11 +95,12 @@ const image = await src();
         />
         <div>
           {
-            link?.title ? (
+            link?.title && link.image ? (
               <BlogLink
                 href={link.href}
                 title={link.title}
                 linkText={link.text}
+                image={link.image}
               />
             ) : (
               <CTA id="contact-cta" href={link.href}>

apps/website/src/components/BlogLink.astro

@@ -13,6 +13,7 @@ link:
   href: "/blog/using-lago-to-create-a-flexible-billing-system"
   text: "See case study"
   title: "Using Lago to Create a Flexible Billing System"
+  image: "using-lago-to-create-a-flexible-billing-system-2.png"
 ---
 
 From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands.

apps/website/src/components/ExternalLink.astro

@@ -13,6 +13,7 @@ link:
   href: "/blog/how-we-rebuilt-a-legacy-ui-with-zero-downtime"
   text: "See case study"
   title: "How We Rebuilt a Legacy UI With Zero Downtime: A Case Study in Component Libraries and Frontend Guidance"
+  image: "how-we-rebuilt-a-legacy-ui-with-zero-downtime.png"
 ---
 
 Move away from legacy systems and navigate major tech initiatives such as new framework adoptions, without disrupting your users. Whether you need end-to-end delivery or staff augmentation, our bottom-up approach empowers your existing teams to drive change sustainably and confidently.

apps/website/src/components/ServiceCard.astro

@@ -14,6 +14,7 @@ link:
   href: "/blog/migrating-an-enterprise-app-from-angularjs-to-react"
   text: "See case study"
   title: "Migrating an Enterprise App from AngularJS to React"
+  image: "from-angular-to-react.png"
 ---
 
 Help your team keep up with industry demands through dedicated mentorship and hands-on support. We offer technical coaching, on-the-job pairing, and structured growth plans to identify and close skill gaps so your developers become more effective and confident with modern technologies and practices.