#11 - Update images on careers

src/components/course/course-accordion-list.astro

@@ -7,19 +7,7 @@ type Props = {
 
 const { course }: Props = Astro.props;
 
-const isDev = import.meta.env.DEV;
-const statusFilter = isDev ? { '_neq': 'archived' } : { '_eq': 'published' };
-
-const filteredModules = course.modules.filter((module: any) => {
-  if (statusFilter._neq) {
-    return module.status !== statusFilter._neq;
-  } else if (statusFilter._eq) {
-    return module.status === statusFilter._eq;
-  }
-  return true;
-});
-
-const courseDurations = filteredModules.flatMap((time:any) => (time.duration));
+const courseDurations = course.modules.flatMap((time:any) => (time.duration));
 const totalCourseDuration = sumTimes(courseDurations);
 ---
 
@@ -40,7 +28,7 @@ const totalCourseDuration = sumTimes(courseDurations);
       </div>
     </div>
     <div class="accordion accordion-btn-icon-start">
-	{filteredModules.map((item: any, index:number) => (
+	{course.modules.map((item: any, index:number) => (
 		<div class="accordion-item">
 			<div class="accordion-header" id={`headingCourse${index}`}>
 				<a

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_ASSETS}/${course.image}`}
-        alt={`${course.name} Image Description`}
-        width={325}
-        height={455}
+        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.image}`}
+        alt="Image Description"
+        width=-1
+        height=-1
         />
     </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.user_created.avatar && (
+          {course?.image && (
             <figure class="avatar avatar-xs avatar-circle">
               <Image 
                 class="avatar-img"
-                src={`${import.meta.env.ASTRO_ASSETS}/${course.user_created.avatar}`}
-                alt={`${course.user_created.first_name} Avatar`}
+                src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.user_created.avatar}`}
+                alt="Course Image"
                 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_ASSETS}/${review.user_created.avatar}`}
-                      alt={`${review.user_created.avatar} Avatar`}
-                      width={50}
-                      height={50}
+                      src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${review.user_created.avatar}`}
+                      alt="Image Description"
+                      width="50"
+                      height="50"
                     />
                 </div>
 

src/components/header/header.astro

@@ -2,13 +2,11 @@
 import { Image } from 'astro:assets';
 import Logo from '../../assets/svg/logo.svg';
 import { getAllCourses, filterCoursesByCloud } from '../../libs/courses';
-import { getCareers } from '../../libs/careers';
 import { slugifyCourse } from '../../utils/text';
 
 const awsCourses = filterCoursesByCloud(getAllCourses(), ['aws']);
 const gcpCourses = filterCoursesByCloud(getAllCourses(), ['gcp']);
 const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
-const careers = await getCareers();
 ---
 
 <header id="header" class={`navbar navbar-expand-lg navbar-end navbar-sticky-top navbar-dark root`}>
@@ -51,17 +49,30 @@ const careers = await getCareers();
               aria-labelledby="dropdownSubMenu"
               style="min-width: 14rem"
             >
-              {careers.map((career: any) => (
-                <a
-                  class="dropdown-item text-white"
-                  id={career.slug + '_header'}
-                  href={`/carreras/${career.slug}/`}
-                  role="button"
-                  aria-expanded="false"
-                >
-                  {career.name}
-                </a>
-              ))}
+              <a
+                class="dropdown-item text-white"
+                id="devops_header"
+                href=`/carreras/devops/`
+                role="button"
+                aria-expanded="false"
+                >DevOps Engineer
+              </a>
+              <a
+                class="dropdown-item text-white"
+                id="cloud_header"
+                href=`/carreras/cloudops/`
+                role="button"
+                aria-expanded="false"
+                >Cloud Engineer
+              </a>
+              <a
+                class="dropdown-item text-white"
+                id="aws_devops_header"
+                href=`/carreras/aws-devops/`
+                role="button"
+                aria-expanded="false"
+                >AWS DevOps
+              </a>
             </div>
             <div class="nav-indicator nav-indicator--blue"></div>
           </li>
@@ -165,4 +176,4 @@ const careers = await getCareers();
 		font-size: large;
 	}
 }
-</style>
+</style>

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_ASSETS}/${post.cover_image}`}
-        alt={`${post.title} Image`}
+        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
+        alt="Image placeholder"
         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_ASSETS}/${post.cover_image}`}
-            alt={`${post.title} Image`}
+            src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
+            alt="Image placeholder"
             style="height: 100%"
             inferSize={true}
           />

src/libs/careers.ts

@@ -3,14 +3,11 @@ import { readItems, type Query } from '@directus/sdk';
 import type { CodyopsCareers, Careers } from '../types/codyops-careers';
 import { sumTimes } from '../utils/time';
 
-const isDev = import.meta.env.DEV; // Astro's way to check for development mode
-
 export async function getCareers(): Promise<Careers[]> {
   const careers = await directus.request(
     readItems<CodyopsCareers, 'codyops_careers', Query<CodyopsCareers, Careers>>('codyops_careers', {
       fields: [
         'slug',
-        'status',
         'name',
         'description',
         'banner',
@@ -31,9 +28,6 @@ export async function getCareers(): Promise<Careers[]> {
           ],
         },
       ],
-      filter: {
-        status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
-    },    
     })
   );
 

src/libs/courses.ts

@@ -2,20 +2,10 @@ 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: [
                 {
@@ -39,15 +29,10 @@ export const courses = await directus.request(
                     'duration',
                     'title',
                     'description',
-                    'video',
-                    'status'
+                    'video'
                 ]
             }
-        ],
-        filter: {
-          status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
-        },
-      }
+        ]}
     )
 );
 

src/libs/reviews.ts

@@ -1,28 +1,10 @@
 import directus from "./directus";
-import { readItems, type Query } from "@directus/sdk";
-import type { DirectusSchema, Review } from "../types/codyops-reviews";
-
-const isDev = import.meta.env.DEV; // Astro's way to check for development mode
+import { readItems } from "@directus/sdk";
 
 export const reviews = await directus.request(
-    readItems<DirectusSchema, 'codyops_reviews', Query<DirectusSchema, Review>>("codyops_reviews", {
-        fields: [
-            'stars',
-            'date_created',
-            'course_id',
-            'feedback',
-            {
-              user_created: [
-                  'first_name',
-                  'last_name',
-                  'avatar'
-              ]
-            },
-        ],
-        filter: {
-            status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
-        },
-      }
+    readItems("codyops_reviews", {
+        fields: ['*', 'user_created.*']
+        }
     )
 );
 

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_ASSETS}/${post.cover_image}`}
-        alt={`${post.title} Image`}
+        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
+        alt="Image placeholder"
         inferSize={true}
         />
         <div class="container content-space-1">

src/types/codyops-reviews.ts

@@ -1,17 +0,0 @@
-import type { Users } from "./codyops-users";
-
-export interface Review {
-    slug: string;
-    status: string;
-    user_created?: Partial<Users>;
-    user_updated: string | null;
-    date_created: string | null;
-    date_updated: string | null;
-    stars: number;
-    course_id: number;
-    feedback: string;
-}
-
-export interface DirectusSchema {
-  codyops_reviews: Review[];
-}