implement the tutorials page (#15)

* get the structure right

* fix issue with opening the tutorial

* make filtering work

* 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.

* make cards clickable

---------

Co-authored-by: Brian Rinaldi <[email protected]>

Author: HarshCasper

…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

@@ -0,0 +1,52 @@
+---
+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 = 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
+  tutorials={tutorialData}
+  services={services}
+  platforms={platforms}
+  deployments={deployments}
+  client:load
+/>