#13: Dynamically populate header careers dropdown

src/components/header/header.astro

@@ -2,11 +2,13 @@
 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`}>
@@ -49,30 +51,17 @@ const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
               aria-labelledby="dropdownSubMenu"
               style="min-width: 14rem"
             >
-              <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>
+              {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>
+              ))}
             </div>
             <div class="nav-indicator nav-indicator--blue"></div>
           </li>
@@ -176,4 +165,4 @@ const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
 		font-size: large;
 	}
 }
-</style>
+</style>

src/libs/careers.ts

@@ -3,11 +3,14 @@ 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',
@@ -28,6 +31,9 @@ export async function getCareers(): Promise<Careers[]> {
           ],
         },
       ],
+      filter: {
+        status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
+    },    
     })
   );