#15 - Update Images to CDN

src/components/course/course-card.astro

@@ -16,10 +16,10 @@ const tier_one = getPrices('price_tier_one',import.meta.env.ASTRO_CURRENCY.toLow
     <figure class="figure">
       <Image
         class="card-img"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.image}`}
-        alt="Image Description"
-        width=-1
-        height=-1
+        src={`${import.meta.env.ASTRO_ASSETS}/${course.image}`}
+        alt={`${course.name} Image Description`}
+        width={325}
+        height={455}
         />
     </figure>
   </a>

src/components/course/course-hero.astro

@@ -19,12 +19,12 @@ const { course }: Props = Astro.props;
     <div class="d-flex align-items-center flex-wrap">
       <div class="d-flex align-items-center me-4">
         <div class="flex-shrink-0 avatar-group avatar-group-xs">
-          {course?.image && (
+          {course.user_created.avatar && (
             <figure class="avatar avatar-xs avatar-circle">
               <Image 
                 class="avatar-img"
-                src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.user_created.avatar}`}
-                alt="Course Image"
+                src={`${import.meta.env.ASTRO_ASSETS}/${course.user_created.avatar}`}
+                alt={`${course.user_created.first_name} Avatar`}
                 width={40}
                 height={40}
                 />

src/components/course/course-reviews.astro

@@ -71,10 +71,10 @@ const getOverallRating = (reviews: any) => {
                 <div class="flex-shrink-0">
                   <Image
                       class="avatar avatar-sm avatar-circle"
-                      src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${review.user_created.avatar}`}
-                      alt="Image Description"
-                      width="50"
-                      height="50"
+                      src={`${import.meta.env.ASTRO_ASSETS}/${review.user_created.avatar}`}
+                      alt={`${review.user_created.avatar} Avatar`}
+                      width={50}
+                      height={50}
                     />
                 </div>
 

src/components/post/post-card-column.astro

@@ -11,8 +11,8 @@ const { post }: Props = Astro.props;
     <figure class="shape-container">
       <Image
         class="card-img img-fluid"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-        alt="Image placeholder"
+        src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+        alt={`${post.title} Image`}
         inferSize={true}
       />
       <div class="shape shape-bottom zi-1" style="margin-bottom: -0.25rem">

src/components/post/post-card-row.astro

@@ -12,8 +12,8 @@ const { post }: Props = Astro.props;
         <figure class="shape-container overflow-hidden" style="height: 100%">
           <Image
             class="card-img"
-            src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-            alt="Image placeholder"
+            src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+            alt={`${post.title} Image`}
             style="height: 100%"
             inferSize={true}
           />

src/libs/courses.ts

@@ -2,10 +2,20 @@ import directus from "./directus";
 import { readItems, type Query } from "@directus/sdk";
 import type { CodyopsCourses, Courses } from "../types/codyops-courses";
 
+const isDev = import.meta.env.DEV; // Astro's way to check for development mode
+
 export const courses = await directus.request(
   readItems<CodyopsCourses, 'codyops_courses', Query<CodyopsCourses, Courses>>("codyops_courses", {
         fields: [
-            '*',
+            'id',
+            'name',
+            'level',
+            'category',
+            'cloud',
+            'image',
+            'description',
+            'features',
+            'status',
             {
               codyops_careers: [
                 {
@@ -32,7 +42,11 @@ export const courses = await directus.request(
                     'video'
                 ]
             }
-        ]}
+        ],
+        filter: {
+          status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
+        },
+      }
     )
 );
 

src/pages/blog/[slug].astro

@@ -26,8 +26,8 @@ const { post } = Astro.props;
         <h1 class="h2 text-white text-center">{post.title}</h1><br>
         <Image
         class="card-img"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-        alt="Image placeholder"
+        src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+        alt={`${post.title} Image`}
         inferSize={true}
         />
         <div class="container content-space-1">