Added auto resizing of the image assets

The images were loading very slowly because they were 1900+ pixels wide but only rendered at 330px. I converted the astro component to load the images from assets, resize them and pass those to the React component.

Author: remotesynth

…ws/elb-load-balancing-featured-image.png …ls/elb-load-balancing-featured-image.pngpublic/images/aws/elb-load-balancing-featured-image.png renamed to src/assets/images/aws/tutorials/elb-load-balancing-featured-image.png public/images/aws/elb-load-balancing-featured-image.png renamed to src/assets/images/aws/tutorials/elb-load-balancing-featured-image.png

@@ -1,32 +1,46 @@
 ---
 import { getCollection } from 'astro:content';
 import { TutorialsShowcase } from './tutorials/TutorialsShowcase';
+import type { ImageMetadata } from 'astro';
+import { getImage } from 'astro:assets';
 
 // Import data for filters
 import services from '../data/developerhub/services.json';
 import platforms from '../data/developerhub/platforms.json';
 import deployments from '../data/developerhub/deployments.json';
 
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/images/aws/tutorials/*.{jpeg,jpg,png,gif}'
+);
+
 const allTutorials = await getCollection('docs', ({ id }) => {
   return id.startsWith('aws/tutorials/') && !id.includes('/index');
 });
 
-const tutorialData = allTutorials.map(tutorial => {
-  const title = tutorial.data.title || 'Unknown Tutorial';
-  const description = tutorial.data.description || `Tutorial: ${title}`;
-  const slug = tutorial.id; // Use id instead of slug for proper path
-  
-  return {
-    title,
-    description,
-    slug,
-    leadimage: tutorial.data.leadimage,
-    services: tutorial.data.services || [],
-    platform: tutorial.data.platform || [],
-    deployment: tutorial.data.deployment || [],
-    pro: tutorial.data.pro || false,
-  };
-});
+const tutorialData = await Promise.all(
+  allTutorials.map(async (tutorial) => {
+    const title = tutorial.data.title || 'Unknown Tutorial';
+    const description = tutorial.data.description || `Tutorial: ${title}`;
+    const slug = tutorial.id; // Use id instead of slug for proper path
+    const imagePath = `/src/assets/images/aws/tutorials/${tutorial.data.leadimage}`;
+    const optimizedLeadImage = await getImage({
+      src: images[imagePath](),
+      format: 'png',
+      width: 330,
+    });
+
+    return {
+      title,
+      description,
+      slug,
+      leadimage: optimizedLeadImage.src,
+      services: tutorial.data.services || [],
+      platform: tutorial.data.platform || [],
+      deployment: tutorial.data.deployment || [],
+      pro: tutorial.data.pro || false,
+    };
+  })
+);
 ---
 
 <TutorialsShowcase
@@ -35,4 +49,4 @@ const tutorialData = allTutorials.map(tutorial => {
   platforms={platforms}
   deployments={deployments}
   client:load
-/> 
+/>

src/assets/images/aws/tutorials/s3-static-website-terraform-featured-image.png

@@ -36,7 +36,7 @@ const TutorialCard: React.FC<{
   return (
     <div className="tutorial-card">
       <div className="card-image">
-        <img src={imagePath} alt={tutorial.title} loading="lazy" />
+        <img src={tutorial.leadimage} alt={tutorial.title} loading="lazy" />
         <div className="card-badges">
           {tutorial.pro && <span className="pro-badge">Pro</span>}
         </div>