Merge pull request #43 from brown-ccv/staff-cards

Staff page and cards

public/admin/config.yml

@@ -16,29 +16,36 @@ collections:
     folder: src/content/people
     create: true
     fields:
+      - name: type
+        label: Staff Type
+        widget: select
+        options: [ 'Leadership', 'Advisors', 'Supporting Staff' ]
       - name: name
         label: Name
         widget: string
       - name: title
         label: Title
         widget: string
       - name: avatar
+        required: false
         i18n: duplicate
         label: Photo
         widget: image
       - name: org
         label: Company/University
         widget: string
       - name: address
+        required: false
         i18n: duplicate
         label: Mailing Address
         widget: text
       - name: phone
+        required: false
         i18n: duplicate
         label: Phone Number
         widget: string
-        pattern: [ '^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$', 'Phone number must follow standard guidelines' ]
       - name: email
+        required: false
         i18n: duplicate
         label: Email
         widget: string

src/components/Card.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+
+interface CardProps {
+  position: number
+  image?: string
+  title: string
+  name: string
+  address?: string
+  phone?: string
+  email?: string
+}
+
+const Card: React.FC<CardProps> = ({ position, image, title, name, address, phone, email }) => {
+  // strip 'public/' from the avatar string since astro's public folder is available without this in the link
+  const link = image?.replace("/public", "")
+  return (
+    <div
+      className={`flex flex-row items-center ${
+        position % 2 ? "md:flex-row-reverse md:text-right" : ""
+      }`}
+    >
+      {image && (
+        <div>
+          <img
+            className="object-cover rounded-full w-64 h-64 min-w-64 min-h-64 hidden md:block"
+            src={link}
+            alt={name}
+          />
+        </div>
+      )}
+      <div className="px-8">
+        <div>
+          <p className="text-xl font-semibold">{name}</p>
+          <p className="italic">{title}</p>
+        </div>
+        <div>
+          {address && <p className="text-base">{address}</p>}
+          {phone && <p className="text-base">{phone}</p>}
+          {email && (
+            <a className="text-base hover:text-neutral-300" href={`mailto:${email}`}>
+              {email}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Card

src/components/CardContainer.astro

@@ -0,0 +1,38 @@
+---
+import Card from "./Card"
+const { color, title, people } = Astro.props
+
+interface PersonProps {
+  data: {
+    title: string
+    name: string
+    avatar?: string
+    email?: string
+    address?: string
+    phone?: string
+  }
+}
+---
+
+<div class="flex flex-row items-start space-x-12">
+  <h2 class={`${color} [writing-mode:vertical-lr] rotate-180`}>{title}</h2>
+  <div class="flex flex-col space-y-20 flex-1">
+    {
+      people.map((person: PersonProps, i: number) => {
+        return (
+          <>
+            <Card
+              position={i}
+              title={person.data.title}
+              name={person.data.name}
+              image={person.data.avatar}
+              email={person.data.email}
+              phone={person.data.phone}
+              address={person.data.address}
+            />
+          </>
+        )
+      })
+    }
+  </div>
+</div>

src/consts.ts

@@ -1,4 +1,4 @@
 export const SITE_TITLE = "MMP"
 export const SITE_DESCRIPTION = "Mesoamerican Migration Project"
 
-export const LINKS = ["news", "publications", "map", "data", "documentation", "about"]
+export const LINKS = ["people", "news", "publications", "map", "data", "documentation", "about"]

src/content/config.ts

@@ -22,4 +22,17 @@ const files = defineCollection({
     file: z.string(),
   }),
 })
-export const collections = { news: news, data: files }
+
+const people = defineCollection({
+  type: "content",
+  schema: z.object({
+    type: z.string(),
+    name: z.string(),
+    title: z.string(),
+    avatar: z.string().optional(),
+    email: z.string().optional(),
+    phone: z.string().optional(),
+    address: z.string().optional(),
+  }),
+})
+export const collections = { news: news, data: files, people: people }

src/content/people/advisor.md

@@ -0,0 +1,14 @@
+---
+type: Leadership
+name: David Lindstrom
+title: Advisor
+avatar: /public/images/david-lindstrom-1-.jpg
+org: Brown University
+address: |-
+  206 Maxcy Hall
+  Providence, Rhode Island 02912-1916
+phone: (401) 863-3765
+email: [email protected]
+startDate: "2024"
+endDate: "2024"
+---

src/content/people/co-director-1.md

@@ -0,0 +1,12 @@
+---
+type: Leadership
+name: Douglas S. Massey
+title: Co-Director
+avatar: /public/images/douglasmassey.jpeg
+org: Princeton University
+address: Princeton, NJ 08544
+phone: 609-258-4949
+email: [email protected]
+startDate: "2024"
+endDate: "2024"
+---

src/content/people/co-director.md

@@ -0,0 +1,15 @@
+---
+type: Leadership
+name: Jorge Durand Arp-Nisen
+title: Co-Director
+avatar: /public/images/jorgedurand.jpg
+org: Universidad de Guadalajara
+address: |-
+  Av. Maestros y Alcalde, Puerta Num. 1
+  Guadalajara, CP 44269
+  Jalisco, México
+phone: 333-819-3327
+email: [email protected]
+startDate: "2024"
+endDate: "2024"
+---

src/content/people/data-entry-specialist.md

@@ -0,0 +1,15 @@
+---
+type: Supporting Staff
+name: Verónica Lozano
+title: Data Entry Specialist
+avatar: /public/images/vero.jpg
+org: Universidad de Guadalajara
+address: |-
+  Av. Maestros y Alcalde, Puerta Num. 1
+  Guadalajara, CP 44269
+  Jalisco, México
+phone: 011-52-333-819-3327
+email: ""
+startDate: "2024"
+endDate: "2024"
+---

src/content/people/professor-and-researcher-sni-nivel-iii.md

@@ -0,0 +1,14 @@
+---
+type: Advisors
+name: M. Patricia Arias
+title: Professor and Researcher (SNI nivel III)
+avatar: /public/images/patricia-arias.jpg
+org: Universidad de Guadalajara
+address: |-
+  Argentina 374. C.P. 44160,
+  Guadalajara, Jalisco, Mexico
+phone: 113-826-1499
+email: [email protected]
+startDate: "2024"
+endDate: "2024"
+---

src/layouts/Layout.astro

@@ -19,7 +19,7 @@ const { title, description } = Astro.props
   <body class="grid grid-cols-1 px-8 md:px-16">
     <Header />
     <main>
-      <article>
+      <article class="max-w-[1000px]">
         <div>
           <div class="flex flex-col gap-3 pb-6">
             <h1 class="title">{title}</h1>

src/pages/people.astro

@@ -0,0 +1,17 @@
+---
+import Layout from "../layouts/Layout.astro"
+import CardContainer from "../components/CardContainer.astro"
+import { getCollection } from "astro:content"
+const people = await getCollection("people")
+const leadership = people.filter((person) => person.data.type === "Leadership")
+const advisors = people.filter((person) => person.data.type === "Advisors")
+const support = people.filter((person) => person.data.type === "Supporting Staff")
+---
+
+<Layout title="Staff" description="Our Leadership, Advisors, and Staff">
+  <div class="flex flex-col space-y-28">
+    <CardContainer title="Leadership" color="text-secondary-blue-500" people={leadership} />
+    <CardContainer title="Advisors" color="text-primary-500" people={advisors} />
+    <CardContainer title="Supporting Staff" color="text-secondary-brown-500" people={support} />
+  </div>
+</Layout>

src/styles/global.css

@@ -81,6 +81,7 @@
     main {
         @apply flex;
         @apply flex-col;
+        @apply items-center;
         @apply gap-6;
     }