✨ now you can belong in multiple teams!

gatsby-config.js

@@ -127,7 +127,7 @@ module.exports = {
         feeds: [
           {
             serialize: ({ query: { site, allMarkdownRemark } }) => {
-              return allMarkdownRemark.edges.map(edge => {
+              return allMarkdownRemark.edges.map((edge) => {
                 return Object.assign({}, edge.node.frontmatter, {
                   description:
                     edge.node.frontmatter.customExcerpt || edge.node.excerpt,
@@ -180,7 +180,4 @@ module.exports = {
       },
     },
   ],
-  mapping: {
-    'MembersJson.team': 'TeamsJson.name',
-  },
 }

gatsby-node.js

@@ -22,11 +22,8 @@ const BlogIndexTemplate = path.resolve(`./src/templates/BlogIndex.tsx`)
 
 const markdownProcessor = remark().use(html)
 
-const getHash = jawn =>
-  crypto
-    .createHash(`md5`)
-    .update(JSON.stringify(jawn))
-    .digest(`hex`)
+const getHash = (jawn) =>
+  crypto.createHash(`md5`).update(JSON.stringify(jawn)).digest(`hex`)
 
 const createTagPages = (tags, createPage) => {
   tags.forEach(({ node }) => {
@@ -73,19 +70,16 @@ const createPostPages = (posts, createPage) => {
     })
   })
 }
-
-exports.createSchemaCustomization = ({ actions }) => {
+/**
+ * @param {import("gatsby/index.d.ts").CreateSchemaCustomizationArgs}
+ */
+exports.createSchemaCustomization = ({ actions, schema }) => {
   const { createTypes } = actions
   const typeDefs = `
   type MembersJson implements Node {
-    team: String
+    team: [TeamsJson] @link(by: "name")
     posts: [MarkdownRemark] @link(by: "frontmatter.authors.pennkey", from: "pennkey")
   }
-  type TeamsJson implements Node {
-    name: String
-    members: [MembersJson] @link(by: "team", from: "name")
-  }
-
   type MarkdownRemark implements Node {
     frontmatter: Frontmatter
   }
@@ -95,8 +89,30 @@ exports.createSchemaCustomization = ({ actions }) => {
     publishedAt: Date @dateformat(formatString: "YYYY-MM-DD")
     draft: Boolean
   }`
-
+  const teamsJson = schema.buildObjectType({
+    name: 'TeamsJson',
+    interfaces: ['Node'],
+    fields: {
+      name: {
+        type: 'String',
+      },
+      members: {
+        type: '[MembersJson]',
+        resolve: (source, args, context, info) => {
+          return context.nodeModel.runQuery({
+            type: 'MembersJson',
+            query: {
+              filter: {
+                team: { elemMatch: { name: { eq: source.name } } },
+              },
+            },
+          })
+        },
+      },
+    },
+  })
   createTypes(typeDefs)
+  createTypes([teamsJson])
 }
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
@@ -238,12 +254,18 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   })
 
   // Create redirect for mobile feedback
-  
+
   // HACK: This is hardcoded for now, in the future we probably want a more
   // scalable way to handle link shortening
   const feedbackForms = [
-    { slug: 'android', url: 'https://airtable.com/appFRa4NQvNMEbWsA/shrn4VbSQa8QDj8OG' },
-    { slug: 'ios', url: 'https://airtable.com/appFRa4NQvNMEbWsA/shrVrNXT4PpI7nqvD' },
+    {
+      slug: 'android',
+      url: 'https://airtable.com/appFRa4NQvNMEbWsA/shrn4VbSQa8QDj8OG',
+    },
+    {
+      slug: 'ios',
+      url: 'https://airtable.com/appFRa4NQvNMEbWsA/shrVrNXT4PpI7nqvD',
+    },
   ]
 
   feedbackForms.forEach(({ slug, url }) => {

src/json/members/esinx.json

@@ -5,8 +5,8 @@
   "school": "Engineering",
   "bio": "Stay TypeSafe™, everyone",
   "hometown": "Seoul, South Korea",
-  "team": "Penn Courses",
-  "roles": ["Frontend Engineer", "Team Lead"],
+  "team": ["Penn Courses", "Platform"],
+  "roles": ["Frontend Engineer", "Team Lead", "DevOps"],
   "photo": "https://avatars3.githubusercontent.com/u/62971511?s=460&u=c9f59555a34989c2c527df86478fadbf3edafaae&v=4",
   "linkedin": "https://www.linkedin.com/in/esinx",
   "website": "https://esinx.net",

src/json/members/joyliu.json

@@ -5,12 +5,8 @@
   "school": "Engineering & Wharton",
   "bio": "Hi, I'm Joy! :D \n\n I'm a Software Engineer interested in infrastructure (DevOps, Cloud, systems) and applications (web, UI/UX). Outside Labs, I love TA-ing, drawing, and hacking up new projects!",
   "hometown": "Portland, Oregon",
-  "team": "Directors",
-  "roles": [
-    "Co-Director",
-    "Team Lead",
-    "DevOps"
-  ],
+  "team": ["Directors", "Platform"],
+  "roles": ["Co-Director", "Team Lead", "DevOps"],
   "photo": "https://i.imgur.com/65CoFe0.jpg",
   "linkedin": "https://www.linkedin.com/in/qijia-joy-liu/",
   "website": "https://www.joyliu.dev/",
@@ -19,4 +15,4 @@
   "alumnus": false,
   "graduation_year": 2025,
   "job": null
-}
+}

src/pages/team.tsx

@@ -4,38 +4,42 @@ import { useStaticQuery, graphql, Link } from 'gatsby'
 import Layout from '../components/Layout'
 import SEO from '../components/SEO'
 import { Col, Fade, H1, H2, P, Row, Section, WideContainer } from '../shared'
-import { IMember, ITeam } from '../types'
+import { IMember } from '../types'
 import { TeamHero } from '../components/Team/Hero'
 import { Teams } from '../components/Team/Teams'
 import { M2 } from '../constants/measurements'
 
-const PriorContributors = ({
-  data: alumni
-}): React.ReactElement => {
+const PriorContributors = ({ data: alumni }): React.ReactElement => {
   return (
     <Fade distance="1rem">
       <Section>
         <H2 mb2>Prior Contributors</H2>
         <Row>
           <Col sm={12} md={10} lg={8}>
             <P mb4>
-              These are the people who have helped make Penn Labs what it is today. We are grateful for their contributions and wish them the best in their future endeavors.
+              These are the people who have helped make Penn Labs what it is
+              today. We are grateful for their contributions and wish them the
+              best in their future endeavors.
             </P>
             <P>
-              We are missing some of our prior contributors from Labs' earlier days. If you know someone who should be on this list, please let us know at <a href="mailto:[email protected]">[email protected]</a>.
+              We are missing some of our prior contributors from Labs' earlier
+              days. If you know someone who should be on this list, please let
+              us know at{' '}
+              <a href="mailto:[email protected]">[email protected]</a>.
             </P>
           </Col>
         </Row>
         <Row margin={M2}>
           {alumni.map((props: IMember) => (
             <Col key={props.pennkey} sm={12} md={3} margin={M2} flex>
-              <Link to={`/alumni/${props.pennkey}`}><P mb0>{props.name}</P></Link>
+              <Link to={`/alumni/${props.pennkey}`}>
+                <P mb0>{props.name}</P>
+              </Link>
             </Col>
-          ))
-          }
+          ))}
         </Row>
       </Section>
-    </Fade >
+    </Fade>
   )
 }
 
@@ -65,7 +69,9 @@ export const pageQuery = graphql`
         description
         members {
           name
-          team
+          team {
+            name
+          }
           pennkey
           photo
           semester_joined

src/templates/members/Member.tsx

@@ -25,7 +25,9 @@ export const pageQuery = graphql`
       name
       major
       school
-      team
+      team {
+        name
+      }
       website
       semester_joined
       alumnus

src/templates/members/utils.tsx

@@ -73,7 +73,7 @@ const LinksTag = styled.div<{}>`
   }
 `
 
-const StyledCard = styled(Card) <{}>`
+const StyledCard = styled(Card)<{}>`
   padding: ${M4};
   margin-top: ${M2};
 
@@ -171,22 +171,25 @@ const Studies = ({ major, school }: { major?: string; school?: string }) => {
   return <Detail text={getStudiesText()} Icon={BookOpenIcon} />
 }
 
-
 export interface IMemberTemplateProps {
   data: {
-    membersJson: IMember,
+    membersJson: IMember
   }
 }
 
 export interface IAlumniTemplateProps {
   data: {
-    alumniJson: IMember,
+    alumniJson: IMember
   }
 }
 
-export type IGenericMemberTemplateProps = IMemberTemplateProps | IAlumniTemplateProps
+export type IGenericMemberTemplateProps =
+  | IMemberTemplateProps
+  | IAlumniTemplateProps
 
-export const GenericMemberTemplate = ({ data }: IGenericMemberTemplateProps) => {
+export const GenericMemberTemplate = ({
+  data,
+}: IGenericMemberTemplateProps) => {
   // if data is alumniJson, then we are rendering an alumni page
   const isAlumni = 'alumniJson' in data
   const json = isAlumni ? data.alumniJson : data.membersJson
@@ -201,24 +204,23 @@ export const GenericMemberTemplate = ({ data }: IGenericMemberTemplateProps) =>
     )
   }
 
-  const
-    {
-      bio,
-      github,
-      graduation_year: gradYear,
-      linkedin,
-      hometown: location,
-      photo,
-      localImage,
-      roles,
-      name,
-      major,
-      school,
-      team,
-      website,
-      semester_joined: semesterJoined,
-      posts,
-    } = json
+  const {
+    bio,
+    github,
+    graduation_year: gradYear,
+    linkedin,
+    hometown: location,
+    photo,
+    localImage,
+    roles,
+    name,
+    major,
+    school,
+    team,
+    website,
+    semester_joined: semesterJoined,
+    posts,
+  } = json
 
   // Bios may contain markdown. Make sure to parse these into HTML!
   const [bioAsHtml, updateBioAsHtml] = useState(bio)
@@ -244,7 +246,12 @@ export const GenericMemberTemplate = ({ data }: IGenericMemberTemplateProps) =>
                   <div style={{ marginBottom: M1 }}>
                     <Tags tags={roles} />
                   </div>
-                  <P mb2>Part of {team}</P>
+                  <P mb2>
+                    Part of{' '}
+                    {Array.isArray(team)
+                      ? team.map((t) => t.name).join(' / ')
+                      : team?.name ?? 'Penn Labs'}
+                  </P>
                   <Links
                     github={github}
                     linkedin={linkedin}
@@ -278,10 +285,11 @@ export const GenericMemberTemplate = ({ data }: IGenericMemberTemplateProps) =>
             )}
             {gradYear && (
               <Detail
-                text={`${parseInt(gradYear, 10) < new Date().getFullYear()
-                  ? 'Graduated'
-                  : 'Graduates'
-                  } in ${gradYear}`}
+                text={`${
+                  parseInt(gradYear, 10) < new Date().getFullYear()
+                    ? 'Graduated'
+                    : 'Graduates'
+                } in ${gradYear}`}
                 Icon={LogOutIcon}
               />
             )}
@@ -296,7 +304,7 @@ export const GenericMemberTemplate = ({ data }: IGenericMemberTemplateProps) =>
               <H3>Posts</H3>
             </Fade>
             <Row margin={M1}>
-              <Posts posts={posts.filter(p => !p.frontmatter.draft)} />
+              <Posts posts={posts.filter((p) => !p.frontmatter.draft)} />
             </Row>
           </>
         ) : null}

src/types/index.ts

@@ -44,7 +44,7 @@ export interface IMember {
   graduation_year?: string
   linkedin?: string
   hometown?: string
-  team?: string
+  team?: ITeam[] | ITeam
   website?: string
   localImage?: { childImageSharp: GatsbyImageFluidProps }
   posts?: IPost[]