Leadership page is feature complete, but stil needs more details

astro.config.mjs

@@ -17,6 +17,7 @@ import {
   responsiveTablesRehypePlugin,
   lazyImagesRehypePlugin,
 } from './src/utils/frontmatter.mjs';
+import dsv from '@rollup/plugin-dsv';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -90,5 +91,8 @@ export default defineConfig({
         '~': path.resolve(__dirname, './src'),
       },
     },
+    plugins: [
+      dsv(),
+    ]
   },
 });

package.json

@@ -23,6 +23,7 @@
     "@astrolib/seo": "^1.0.0-beta.5",
     "@fontsource-variable/anek-devanagari": "^5.0.13",
     "@fontsource-variable/inter": "^5.0.19",
+    "@rollup/plugin-dsv": "^3.0.4",
     "astro": "^4.13.1",
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.0",

src/components/widgets/Hero.astro

@@ -45,11 +45,11 @@ const {
             />
           )
         }
-        <div class="max-w-3xl mx-auto">
+        <div class="max-w-7xl mx-auto">
           {subtitle && <p class="text-xl mb-6" set:html={subtitle} />}
           {
             actions && (
-              <div class="max-w-mdt sm:max-w-lg m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
+              <div class="max-w-3xl m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
                 {Array.isArray(actions) ? (
                   actions.map((action) => (
                     <div class="flex w-full sm:w-auto">

src/components/widgets/Staff.astro

@@ -1,5 +1,5 @@
 ---
-import getLeadershipData from "~/leadershipData";
+import getStaffRecord from "~/staffData"
 import Socials from "./Socials.astro";
 
 export interface Props {
@@ -13,5 +13,5 @@ const { title, name } = Astro.props;
 <div class="">
   <h2 class="text-xl font-bold">{title}</h2>
   <h2 class="text-xl font-bold text-primary">{name}</h2>
-  <Socials {...getLeadershipData(name)}/>
+  <Socials {...getStaffRecord(name)}/>
 </tr>

src/components/widgets/StaffCard.astro

@@ -1,7 +1,8 @@
 ---
-import getLeadershipData from "~/leadershipData";
+import getStaffRecord from "~/staffData";
 import { Image } from "astro:assets";
 import Socials from "./Socials.astro";
+import { Logger } from "node_modules/astro/dist/core/logger/core";
 
 export interface Props {
     name: string;
@@ -10,16 +11,43 @@ export interface Props {
 
 const { name, noSocials } = Astro.props;
 
-let leadershipData = getLeadershipData(name);
+const basePath = "/src/assets/images/staff/";
+let leadershipData = getStaffRecord(name);
 const images = import.meta.glob<{ default: ImageMetadata }>(
-    "/src/assets/images/staff/*.{jpeg,jpg,png}",
+    "/src/assets/images/staff/*.{jpeg,jpg,png,webp}",
 );
-const imagePath = "/src/assets/images/staff/" + name + ".png";
+
+function getImagePath(name) {
+    let imagePath;
+    for (let i in images) {
+        if (i.startsWith(basePath + name)) {
+            imagePath = i;
+        }
+    }
+
+    return imagePath;
+}
+
+let imagePath = getImagePath(name);
+if (getImagePath(name) == null) {
+    imagePath = getImagePath("unknown");
+    
+//     throw new Error(
+//         `Staff image not found for ${name} in ${basePath}
+
+// Images considered:
+// ${Object.keys(images).join("\n")}
+//     `,
+//     );
+}
+
 const image = images[imagePath]();
 ---
 
 <div class="inline-block">
-    <div class="border border-[#ffffff29] bg-page rounded-md p-4 flex flex-col gap-4 shadow-lg m-auto">
+    <div
+        class="border border-[#ffffff29] bg-page rounded-md p-4 flex flex-col gap-4 shadow-lg m-auto"
+    >
         <Image class="rounded-sm" src={image} alt={name} width="400" />
         <div>
             <p class="text-primary font-bold text-xl">{name}</p>
@@ -30,7 +58,7 @@ const image = images[imagePath]();
                 {leadershipData.major && <p>{leadershipData.major}</p>}
             </div>
 
-            {!noSocials && <Socials {...getLeadershipData(name)} />}
+            {!noSocials && <Socials {...getStaffRecord(name)} />}
         </div>
     </div>
 </div>

src/components/widgets/SubteamInfo.astro

@@ -3,7 +3,7 @@ import Socials from "./Socials.astro";
 import Image from "../common/Image.astro";
 import { type TeamMember } from "~/types";
 import { type ImageProps } from "~/utils/images-optimization";
-import getLeadershipData from "~/leadershipData";
+import getStaffRecord from "~/staffData";
 
 export interface Props {
   title: string;
@@ -26,7 +26,7 @@ const { title, leads = [], images = [] } = Astro.props;
             leads.map((name) => (
               <div>
                 {name}
-                <Socials {...getLeadershipData(name)} />
+                <Socials {...getStaffRecord(name)} />
               </div>
             ))
           }

src/components/widgets/TeamOverviewLeader.astro

@@ -1,5 +1,5 @@
 ---
-import getLeadershipData from "~/leadershipData";
+import getStaffRecord from "~/staffData";
 import Socials from "./Socials.astro";
 
 export interface Props {
@@ -17,7 +17,7 @@ const { title, people = [] } = Astro.props;
       people.map((name) => (
         <div class="flex flex-col items-end">
           {name}
-          <Socials classes={["flex-col items-end justify-end"]} {...getLeadershipData(name)}/>
+          <Socials classes={["flex-col items-end justify-end"]} {...getStaffRecord(name)}/>
         </div>
       ))
     }