feat: organize to consistency pass on sections

src/components/cards/EducationCard.astro

@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components';
 
 import Logo from '@components/ui/logos/Logo.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   topic: string;
@@ -13,7 +14,8 @@ interface Props {
   logoIcon?: string;
 }
 
-const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
+const { topic, area, date, url, logoUrlLight, logoIcon } = Astro.props;
+const logoUrlDark = Astro.props.logoUrlDark || logoUrlLight;
 ---
 
 <div class="smooth-reveal group flex flex-col">
@@ -26,8 +28,8 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
         {logoUrlLight ? (
         <div class="card-hover-icon-scale mr-5">
           <Logo
-            srcLight={logoUrlLight}
+            srcLight={getDirectusImageURL(logoUrlLight)}
-            srcDark={logoUrlDark}
+            srcDark={getDirectusImageURL(logoUrlDark!)}
             alt={`Logo of ${topic}`}
           />
         </div>

src/components/cards/LargeBlogLeftCard.astro

@@ -2,13 +2,14 @@
 import { Icon } from 'astro-icon/components';
 
 import Image from '@components/ui/images/Image.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   title: string;
   subTitle: string;
-  url?: string;
+  url: string;
-  img: any;
+  img: string;
-  imgAlt: any;
+  imgAlt: string;
 }
 
 const { title, subTitle, url, img, imgAlt } = Astro.props;
@@ -23,7 +24,7 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
     <div>
       <Image
         class="rounded-xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
-        src={img}
+        src={getDirectusImageURL(img)}
         alt={imgAlt}
         draggable="false"
         loading="lazy"

src/components/cards/LargeBlogRightCard.astro

@@ -2,14 +2,15 @@
 import { Icon } from 'astro-icon/components';
 
 import Image from '@components/ui/images/Image.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   title: string;
   subTitle: string;
-  url?: string;
+  url: string;
   single?: boolean;
-  imgOne?: any;
+  imgOne: any;
-  imgOneAlt?: any;
+  imgOneAlt: any;
   imgTwo?: any;
   imgTwoAlt?: any;
 }
@@ -46,7 +47,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
     <div>
       <Image
         class="rounded-xl w-full"
-        src={imgOne}
+        src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
         format="webp"
         loading="lazy"
@@ -58,7 +59,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
     <div class="grid grid-cols-2 gap-4">
       <Image
         class="rounded-xl w-full"
-        src={imgOne}
+        src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
         draggable="false"
         format="webp"
@@ -68,7 +69,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
       />
       <Image
         class="rounded-xl w-full mt-4 lg:mt-10"
-        src={imgTwo}
+        src={getDirectusImageURL(imgTwo)}
         alt={imgTwoAlt}
         draggable="false"
         format="webp"

src/components/sections/ApplicationSection.astro

@@ -3,8 +3,8 @@ import { readItems } from '@directus/sdk';
 
 import type { Application } from '@lib/directusTypes';
 
-import directus from '@lib/directus';
 import HighlightsCard from '@components/cards/HighlightsCard.astro';
+import directus from '@lib/directus';
 
 const applications = ((await directus.request(
   readItems('site_applications' as any, {

src/components/sections/EducationSection.astro

@@ -3,9 +3,8 @@ import { readItems } from '@directus/sdk';
 
 import type { Education, Certificate} from '@lib/directusTypes';
 
-import directus from '@lib/directus';
-import { getDirectusImageURL } from '@lib/directusFunctions';
 import EducationCard from '@components/cards/EducationCard.astro';
+import directus from '@lib/directus';
 
 const educations = ((await directus.request(
   readItems('site_education' as any, {
@@ -37,8 +36,8 @@ const certificates = ((await directus.request(
         area={education.area}
         date={education.graduationDate}
         url={education.url}
-        logoUrlLight={getDirectusImageURL(education.logo)}
+        logoUrlLight={education.logo}
-        logoUrlDark={getDirectusImageURL(education.logoDark)}
+        logoUrlDark={education.logoDark}
       />
       ))}
     </div>

src/components/sections/FeatureSection.astro

@@ -1,8 +1,8 @@
 ---
 import { readSingleton } from '@directus/sdk';
 
-import directus from '@lib/directus';
 import FeaturesCard from '@components/cards/FeaturesCard.astro';
+import directus from '@lib/directus';
 
 const global = await directus.request(readSingleton('site_global'));
 ---

src/components/sections/ProjectSection.astro

@@ -3,8 +3,8 @@ import { readItems } from '@directus/sdk';
 
 import type { Project } from '@lib/directusTypes';
 
-import directus from '@lib/directus';
 import HighlightsCard from '@components/cards/HighlightsCard.astro';
+import directus from '@lib/directus';
 
 const projects = ((await directus.request(
   readItems('site_projects' as any, {

src/components/sections/SelectedPostsSection.astro

@@ -3,7 +3,6 @@ import type { Post } from '@lib/directusTypes';
 
 import LargeBlogLeftCard from '@components/cards/LargeBlogLeftCard.astro';
 import LargeBlogRightCard from '@components/cards/LargeBlogRightCard.astro';
-import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   posts: Post[];
@@ -13,24 +12,24 @@ const { posts } = Astro.props;
 ---
 
 <section class="smooth-reveal">
-  {posts.map((b, index) => index % 2 === 0 ? (
+  {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard
-    title={b.title}
+    title={post.title}
-    subTitle={b.description}
+    subTitle={post.description}
-    url={`/blog/${b.slug}`}
+    url={`/blog/${post.slug}`}
-    img={getDirectusImageURL(b.image)}
+    img={post.image}
-    imgAlt={b.image_alt}
+    imgAlt={post.image_alt}
   />
   ) : (
   <LargeBlogRightCard
-    title={b.title}
+    title={post.title}
-    subTitle={b.description}
+    subTitle={post.description}
-    url={`/blog/${b.slug}`}
+    url={`/blog/${post.slug}`}
-    single={!b.image_second}
+    single={!post.image_second}
-    imgOne={getDirectusImageURL(b.image)}
+    imgOne={post.image}
-    imgOneAlt={b.image_alt}
+    imgOneAlt={post.image_alt}
-    imgTwo={getDirectusImageURL(b?.image_second)}
+    imgTwo={post?.image_second}
-    imgTwoAlt={b?.image_second_alt}
+    imgTwoAlt={post?.image_second_alt}
   />
   ))}
 </section>

src/components/sections/WeatherSection.astro

@@ -3,6 +3,7 @@ import WeatherCard from '@components/cards/WeatherCard.astro';
 import { getFiveDayForecast } from '@support/weather';
 
 const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
+
 const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
 ---