Update team leadership info

src/components/widgets/Header.astro

@@ -1,31 +1,18 @@
 ---
-import { Icon } from 'astro-icon/components';
-import Logo from '~/components/Logo.astro';
-import ToggleTheme from '~/components/common/ToggleTheme.astro';
-import ToggleMenu from '~/components/common/ToggleMenu.astro';
-import Button from '~/components/ui/Button.astro';
+import { Icon } from "astro-icon/components";
+import Logo from "~/components/Logo.astro";
+import ToggleTheme from "~/components/common/ToggleTheme.astro";
+import ToggleMenu from "~/components/common/ToggleMenu.astro";
+import Button from "~/components/ui/Button.astro";
 
-import { getHomePermalink } from '~/utils/permalinks';
-import { trimSlash, getAsset } from '~/utils/permalinks';
-import type { CallToAction } from '~/types';
-
-interface Link {
-  text?: string;
-  href?: string;
-  ariaLabel?: string;
-  icon?: string;
-}
-
-interface ActionLink extends CallToAction {}
-
-interface MenuLink extends Link {
-  links?: Array<MenuLink>;
-}
+import { getHomePermalink } from "~/utils/permalinks";
+import { trimSlash, getAsset } from "~/utils/permalinks";
+import { type MenuLink, type ActionLink } from "~/navigationData";
 
 export interface Props {
   id?: string;
-  links?: Array<MenuLink>;
-  actions?: Array<ActionLink>;
+  links?: MenuLink[];
+  actions?: ActionLink[];
   isSticky?: boolean;
   isDark?: boolean;
   isFullWidth?: boolean;
@@ -35,15 +22,15 @@ export interface Props {
 }
 
 const {
-  id = 'header',
+  id = "header",
   links = [],
   actions = [],
   isSticky = false,
   isDark = false,
   isFullWidth = false,
   showToggleTheme = false,
   showRssFeed = false,
-  position = 'center',
+  position = "center",
 } = Astro.props;
 
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
@@ -52,27 +39,32 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
 <header
   class:list={[
     { sticky: isSticky, relative: !isSticky, dark: isDark },
-    'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
+    "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
   ]}
-  {...isSticky ? { 'data-aw-sticky-header': true } : {}}
+  {...isSticky ? { "data-aw-sticky-header": true } : {}}
   {...id ? { id } : {}}
 >
   <div class="absolute inset-0"></div>
   <div
     class:list={[
-      'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
+      "relative text-default py-3 px-3 md:px-6 mx-auto w-full",
       {
-        'md:flex md:justify-between': position !== 'center',
+        "md:flex md:justify-between": position !== "center",
       },
       {
-        'md:grid md:grid-cols-3 md:items-center': position === 'center',
+        "md:grid md:grid-cols-3 md:items-center": position === "center",
       },
       {
-        'max-w-7xl': !isFullWidth,
+        "max-w-7xl": !isFullWidth,
       },
     ]}
   >
-    <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
+    <div
+      class:list={[
+        { "mr-auto rtl:mr-0 rtl:ml-auto": position === "right" },
+        "flex justify-between",
+      ]}
+    >
       <a class="flex items-center" href={getHomePermalink()}>
         <Logo />
       </a>
@@ -89,20 +81,26 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
       >
         {
           links.map(({ text, href, links }) => (
-            <li class={links?.length ? 'dropdown' : ''}>
+            <li class={links?.length ? "dropdown" : ""}>
               {links?.length ? (
                 <>
-                  <button type="button" class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center">
-                    {text}{' '}
-                    <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
+                  <button
+                    type="button"
+                    class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center"
+                  >
+                    {text}{" "}
+                    <Icon
+                      name="tabler:chevron-down"
+                      class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline"
+                    />
                   </button>
                   <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                     {links.map(({ text: text2, href: href2 }) => (
                       <li>
                         <a
                           class:list={[
-                            'first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap',
-                            { 'aw-link-active': href2 === currentPath },
+                            "first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap",
+                            { "aw-link-active": href2 === currentPath },
                           ]}
                           href={href2}
                         >
@@ -115,8 +113,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
               ) : (
                 <a
                   class:list={[
-                    'hover:text-link dark:hover:text-white px-4 py-3 flex items-center',
-                    { 'aw-link-active': href === currentPath },
+                    "hover:text-link dark:hover:text-white px-4 py-3 flex items-center",
+                    { "aw-link-active": href === currentPath },
                   ]}
                   href={href}
                 >
@@ -130,19 +128,23 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     </nav>
     <div
       class:list={[
-        { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
-        'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
+        { "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
+        "hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end",
       ]}
     >
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex">
-          {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
+          {
+            showToggleTheme && (
+              <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />
+            )
+          }
           {
             showRssFeed && (
               <a
                 class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
                 aria-label="RSS Feed"
-                href={getAsset('/rss.xml')}
+                href={getAsset("/rss.xml")}
               >
                 <Icon name="tabler:rss" class="w-5 h-5" />
               </a>
@@ -153,11 +155,14 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
           actions?.length ? (
             <span class="ml-4 rtl:ml-0 rtl:mr-4">
               {actions.map((btnProps) => (
-                <Button {...btnProps} class="closes-menu ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto" />
+                <Button
+                  {...btnProps}
+                  class="closes-menu ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"
+                />
               ))}
             </span>
           ) : (
-            ''
+            ""
           )
         }
       </div>

src/components/widgets/OurProjects.astro

@@ -1,15 +1,7 @@
 ---
-import { APP_BLOG } from 'astrowind:config';
-
-import Grid from '~/components/blog/Grid.astro';
-
-import Headline from '../ui/Headline.astro';
 import Image from '~/components/common/Image.astro';
 
-import { getBlogPermalink } from '~/utils/permalinks';
-import { findLatestPosts } from '~/utils/blog';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Widget } from '~/types';
 import Button from '../ui/Button.astro';
 
 const {

src/components/widgets/Socials.astro

@@ -2,61 +2,76 @@
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
 
-const {
-  linkedins = [],
-  emails = [],
-  facebooks = [],
-  youtubes = [],
-  instagrams = [],
-  classes,
-} = Astro.props;
+export interface Props {
+  linkedin?: string;
+  email?: string;
+  facebook?: string;
+  youtube?: string;
+  instagram?: string;
+  classes?: string[] | string;
+}
+
+const { linkedin, email, facebook, youtube, instagram, classes } = Astro.props;
 ---
 
 <div
-  class={twMerge("font-normal flex flex-row flex-wrap gap-x-3 my-2 text-muted", classes)}
+  class={twMerge(
+    "font-normal flex flex-row flex-wrap gap-x-3 my-2 text-muted",
+    classes,
+  )}
 >
   {
-    instagrams.map((instagram) => (
+    instagram ? (
       <a class="flex flex-row gap-1" href={instagram}>
         <Icon name="tabler:brand-instagram" class="w-8 h-8" />
         <p>Instagram</p>
       </a>
-    ))
+    ) : (
+      ""
+    )
   }
 
   {
-    linkedins.map((linkedin) => (
+    linkedin ? (
       <a class="flex flex-row gap-1" href={linkedin}>
         <Icon name="tabler:brand-linkedin" class="w-8 h-8" />
         <p>LinkedIn</p>
       </a>
-    ))
+    ) : (
+      ""
+    )
   }
 
   {
-    emails.map((email) => (
+    email ? (
       <a class="flex flex-row gap-1" href={"mailto:" + email}>
         <Icon name="tabler:mail" class="w-8 h-8" />
         <p>{email}</p>
       </a>
-    ))
+    ) : (
+      ""
+    )
   }
 
   {
-    facebooks.map((facebook) => (
+    facebook ? (
       <a class="flex flex-row gap-1" href={facebook}>
         <Icon name="tabler:brand-facebook" class="w-8 h-8" />
         <p>Facebook</p>
       </a>
-    ))
+    ) : (
+      ""
+    )
   }
 
   {
-    youtubes.map((youtube) => (
+    youtube ? (
       <a class="flex flex-row gap-1" href={youtube}>
         <Icon name="tabler:brand-youtube" class="w-8 h-8" />
         <p>YouTube</p>
       </a>
-    ))
+    ) : (
+      ""
+    )
   }
 </div>

src/components/widgets/Staff.astro

@@ -1,11 +1,17 @@
 ---
+import getLeadershipData from "~/leadershipData";
 import Socials from "./Socials.astro";
 
-const { title, person } = Astro.props;
+export interface Props {
+  title: string,
+  name: string,
+}
+
+const { title, name } = Astro.props;
 ---
 
 <div class="">
   <h2 class="text-xl font-bold">{title}</h2>
-  <h2 class="text-xl font-bold text-primary">{person.name}</h2>
-  <Socials linkedins={[person.linkedin]} emails={[person.email]}/>
+  <h2 class="text-xl font-bold text-primary">{name}</h2>
+  <Socials {...getLeadershipData(name)}/>
 </tr>

src/components/widgets/SubteamInfo.astro

@@ -3,14 +3,15 @@ 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";
 
 export interface Props {
-  title: string,
-  lead: TeamMember,
-  images: Array<ImageProps>,
+  title: string;
+  leads: string[];
+  images: Array<ImageProps>;
 }
 
-const { title, lead, images = [] } = Astro.props;
+const { title, leads = [], images = [] } = Astro.props;
 ---
 
 <div class="flex flex-col md:flex-row justify-center gap-8">
@@ -19,20 +20,30 @@ const { title, lead, images = [] } = Astro.props;
 
     <div class="items-end my-4">
       <h3 class="text-xl font-bold">
-        {lead.title ? lead.title : "Team Lead: "}<span class="text-primary"
-          >{lead.name}</span
-        >
+        {leads.length > 1 ? "Team Leads: " : "Team Lead: "}
+        <span class="text-primary">
+          {
+            leads.map((name) => (
+              <div>
+                {name}
+                <Socials {...getLeadershipData(name)} />
+              </div>
+            ))
+          }
+        </span>
       </h3>
-
-      <Socials {...lead} />
     </div>
 
     <div class="flex flex-col gap-4 text-lg">
-      <slot/>
+      <slot />
     </div>
   </div>
 
   <div class="flex flex-col gap-4 md:w-1/2">
-    {images.map((i) => <Image class="m-auto" widths={[400, 800]} layout="contained" {...i} />)}
+    {
+      images.map((i) => (
+        <Image class="m-auto" widths={[400, 800]} layout="contained" {...i} />
+      ))
+    }
   </div>
 </div>