new pfp format

Author: tropylium

src/components/BlogCard.astro

@@ -8,7 +8,7 @@ import {
   isSubpost,
   parsePeople,
 } from '@/lib/data-utils'
-import { formatDate } from '@/lib/utils'
+import { formatDate, getAvatarSrc } from '@/lib/utils'
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
@@ -61,7 +61,7 @@ const subpostCount = !isSubpost(entry.id) ? await getSubpostCount(entry.id) : 0
                 <div class="flex items-center gap-x-1.5">
                   <AvatarComponent
                     client:load
-                    src={person.avatar}
+                    src={getAvatarSrc(person.avatar)}
                     alt={person.name}
                     fallback={person.name[0]}
                     className="size-5 rounded-full"

src/components/PeopleAvatarGrid.tsx

@@ -2,13 +2,13 @@ import * as React from 'react'
 import { Tooltip } from '@/components/ui/tooltip'
 import AvatarComponent from '@/components/ui/avatar'
 import { Link } from '@/components/ui/link'
-import { cn, shuffleArray } from '@/lib/utils'
+import { cn, shuffleArray, getAvatarSrc } from '@/lib/utils'
 
 interface Person {
   id: string
   data: {
     name: string
-    avatar?: string
+    avatar?: string | { src: string }
   }
 }
 
@@ -76,7 +76,10 @@ export function PeopleAvatarGrid({
           <Tooltip key={person.id} content={person.data.name}>
             <Link href={`/people/${person.id}`} className="block">
               <AvatarComponent
-                src={person.data.avatar || '/static/avatar-fallback.png'}
+                src={
+                  getAvatarSrc(person.data.avatar) ||
+                  '/static/avatar-fallback.png'
+                }
                 alt={`Avatar of ${person.data.name}`}
                 fallback={person.data.name[0]}
                 className={cn(

src/components/PeopleList.tsx

@@ -4,7 +4,7 @@ import { cn, shuffleArray } from '@/lib/utils'
 
 interface PersonData {
   name: string
-  avatar?: string
+  avatar?: string | { src: string }
   title?: string
   email?: string
   website?: string

src/components/PersonCard.astro

@@ -1,7 +1,7 @@
 ---
 import Link from '@/components/Link.astro'
 import AvatarComponent from '@/components/ui/avatar'
-import { cn } from '@/lib/utils'
+import { cn, getAvatarSrc } from '@/lib/utils'
 import type { SocialLink } from '@/types'
 import type { CollectionEntry } from 'astro:content'
 import SocialIcons from './SocialIcons.astro'
@@ -44,7 +44,7 @@ const socialLinks: SocialLink[] = [
     <div class="flex flex-wrap gap-4">
       <AvatarComponent
         client:load
-        src={avatar || '/static/avatar-fallback.png'}
+        src={getAvatarSrc(avatar)}
         alt={`Avatar of ${name}`}
         fallback={name[0]}
         className={cn(

src/components/ProjectCard.astro

@@ -3,7 +3,7 @@ import Link from '@/components/Link.astro'
 import AvatarComponent from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { parsePeople } from '@/lib/data-utils'
-import { formatDate } from '@/lib/utils'
+import { formatDate, getAvatarSrc } from '@/lib/utils'
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
@@ -53,7 +53,7 @@ const people = await parsePeople(project.data.people ?? [])
                 <div class="flex items-center gap-x-1.5">
                   <AvatarComponent
                     client:load
-                    src={person.avatar}
+                    src={getAvatarSrc(person.avatar)}
                     alt={person.name}
                     fallback={person.name[0]}
                     className="size-5 rounded-full"

src/components/ui/person-card.tsx

@@ -2,12 +2,12 @@ import * as React from 'react'
 import { Link } from '@/components/ui/link'
 import AvatarComponent from '@/components/ui/avatar'
 import { SocialIcons } from '@/components/ui/social-icons'
-import { cn } from '@/lib/utils'
+import { cn, getAvatarSrc } from '@/lib/utils'
 import type { SocialLink } from '@/types'
 
 interface PersonData {
   name: string
-  avatar?: string
+  avatar?: string | { src: string }
   title?: string
   email?: string
   website?: string
@@ -60,10 +60,10 @@ export function PersonCard({
       href={`/people/${person.id}`}
       className={cn('block', isPersonPage && 'pointer-events-none', className)}
     >
-      <div className="bg-background transition-shadow overflow-hidden rounded-xl border p-4 duration-300 ease-in-out hover:cursor-pointer hover:ring-2">
+      <div className="bg-background overflow-hidden rounded-xl border p-4 transition-shadow duration-300 ease-in-out hover:cursor-pointer hover:ring-2">
         <div className="flex flex-wrap gap-4">
           <AvatarComponent
-            src={avatar || '/static/avatar-fallback.png'}
+            src={getAvatarSrc(avatar) || '/static/avatar-fallback.png'}
             alt={`Avatar of ${name}`}
             fallback={name[0]}
             className={cn(

src/content.config.ts

@@ -17,17 +17,24 @@ const blog = defineCollection({
 
 const people = defineCollection({
   loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/people' }),
-  schema: z.object({
-    name: z.string(),
-    title: z.string(),
-    avatar: z.string().url().or(z.string().startsWith('/')).optional(),
-    email: z.string().email().optional(),
-    website: z.string().url().optional(),
-    github: z.string().url().optional(),
-    linkedin: z.string().url().optional(),
-    scholar: z.string().url().optional(),
-    isPastMember: z.boolean().optional(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      name: z.string(),
+      title: z.string(),
+      avatar: z
+        .union([
+          z.string().url(), // External URLs
+          z.string().startsWith('/'), // Public folder paths
+          image(), // Local images (processed by Astro)
+        ])
+        .optional(),
+      email: z.string().email().optional(),
+      website: z.string().url().optional(),
+      github: z.string().url().optional(),
+      linkedin: z.string().url().optional(),
+      scholar: z.string().url().optional(),
+      isPastMember: z.boolean().optional(),
+    }),
 })
 
 const projects = defineCollection({

src/content/group-photos/content.yaml

@@ -1,6 +1,6 @@
-dome:
-  image: "./images/dome.png"
-  caption: "Group photo at the MIT Dome, 2024"
+# dome:
+#   image: "./images/dome.png"
+#   caption: "Group photo at the MIT Dome, 2024"
 grad25:
   image: "./images/grad25.png"
   caption: "Group photo during MIT commencement 2025"

src/content/people/amanda.md

@@ -1,5 +1,5 @@
 ---
 name: "Amanda Zwerling"
 title: "Administrative assistant"
-avatar: "./amanda.png"
+avatar: "./images/amanda.png"
 ---