feat(People): create routes for each member

louh · louh · commit 48622ae806a0 · 2025-03-25T15:12:51.000-04:00
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -86,6 +86,22 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     }
   `);
+  // Need to generate pages for each individual person as well to route to
+  const people = await graphql(`
+    {
+      allMarkdownRemark(
+        filter: { fileAbsolutePath: { regex: "/pages/people/bios/.*.md/" } }
+      ) {
+        edges {
+          node {
+            frontmatter {
+              uid
+            }
+          }
+        }
+      }
+    }
+  `);
 
   /* List creators */
   const creators = [
@@ -101,6 +117,11 @@ exports.createPages = async ({ graphql, actions }) => {
       src: works,
       component: path.resolve("lib/ui/templates/ProjectItemTpl.tsx"),
       prefix: "projects"
+    },
+    {
+      src: people,
+      component: path.resolve("lib/ui/templates/PeopleTpl.tsx"),
+      prefix: "people"
     }
   ];
 
diff --git a/lib/gatsby-types.d.ts b/lib/gatsby-types.d.ts
@@ -3177,7 +3177,7 @@ type PeopleTplQueryVariables = Exact<{
 }>;
 
 
-type PeopleTplQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly accomplicesHeading: string | null, readonly accomplicesDescr: string | null, readonly membersHeading: string | null, readonly membersDescr: string | null, readonly overlordsHeading: string | null, readonly overlordsDescr: string | null } | null } | null, readonly defaultAvatar: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> }, readonly overlords: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly members: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly accomplices: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+type PeopleTplQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly accomplicesHeading: string | null, readonly accomplicesDescr: string | null, readonly membersHeading: string | null, readonly membersDescr: string | null, readonly overlordsHeading: string | null, readonly overlordsDescr: string | null } | null } | null, readonly defaultAvatar: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> }, readonly overlords: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly members: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly accomplices: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly all: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
 
 type PortfolioItemsByUIDQueryVariables = Exact<{
   uid: Scalars['String'];
diff --git a/lib/ui/templates/PeopleTpl.tsx b/lib/ui/templates/PeopleTpl.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { graphql, type PageProps } from "gatsby";
+import { graphql, navigate, type PageProps } from "gatsby";
 import styled from "styled-components";
 
 import { Body, Header, Helmet, Layout } from "ui/partials";
@@ -48,20 +48,28 @@ const PeopleIntro = styled.div`
 `;
 
 const PeopleTpl = (props: PageProps<Queries.PeopleTplQuery>) => {
-  const [currentPerson, setCurrentPerson] = useState<PersonNode | null>(null);
-
-  function handleShowPerson(obj: PersonNode) {
-    if (currentPerson === null) {
-      setCurrentPerson(obj);
-    } else {
-      setCurrentPerson(null);
-    }
-  }
-
-  const { defaultAvatar, overlords, members, accomplices } = props.data;
+  const { defaultAvatar, overlords, members, accomplices, all } = props.data;
   const { frontmatter } = props.data.markdownRemark ?? {};
   const genericAvatar = defaultAvatar.edges[0].node.childImageSharp;
 
+  // For routing to a specific person
+  const personId = window.location.pathname
+    .replace("/people/", "")
+    .replace("/", "");
+  const personObj = all.edges.find(
+    ({ node }: { node: PersonNode }) => node.frontmatter?.uid === personId
+  );
+
+  const [currentPerson, setCurrentPerson] = useState<PersonNode | null>(
+    personObj?.node ?? null
+  );
+
+  // from the <Modal /> component when it closes force a navigation back to
+  // parent page
+  function closeModal() {
+    navigate("/people");
+  }
+
   return (
     <>
       <Helmet {...props} title={frontmatter?.title ?? ""} />
@@ -82,7 +90,6 @@ const PeopleTpl = (props: PageProps<Queries.PeopleTplQuery>) => {
                   data={node}
                   defaultAvatar={genericAvatar}
                   key={node.frontmatter?.uid}
-                  toggleModal={() => handleShowPerson(node)}
                 />
               ))}
             </People>
@@ -98,7 +105,6 @@ const PeopleTpl = (props: PageProps<Queries.PeopleTplQuery>) => {
                   data={node}
                   defaultAvatar={genericAvatar}
                   key={node.frontmatter?.uid}
-                  toggleModal={() => handleShowPerson(node)}
                 />
               ))}
             </People>
@@ -114,15 +120,14 @@ const PeopleTpl = (props: PageProps<Queries.PeopleTplQuery>) => {
                   data={node}
                   defaultAvatar={genericAvatar}
                   key={node.frontmatter?.uid}
-                  toggleModal={() => handleShowPerson(node)}
                 />
               ))}
             </People>
           </PeopleSection>
         </Body>
         {currentPerson !== null ? (
           <PersonModal
-            toggleModal={handleShowPerson}
+            toggleModal={closeModal}
             data={currentPerson}
             defaultAvatar={genericAvatar!}
           />
@@ -279,5 +284,39 @@ export const pageQuery = graphql`
         }
       }
     }
+    all: allMarkdownRemark(
+      filter: { fileAbsolutePath: { regex: "//pages/people/bios/*/.*/*.md/" } }
+      sort: { frontmatter: { fname: ASC } }
+    ) {
+      edges {
+        node {
+          id
+          html
+          frontmatter {
+            bluesky
+            fname
+            github
+            lname
+            mastodon
+            quote
+            score
+            twitter
+            website
+            uid
+            avatar {
+              childImageSharp {
+                gatsbyImageData(
+                  width: 240
+                  height: 300
+                  placeholder: DOMINANT_COLOR
+                  transformOptions: { cropFocus: CENTER }
+                  layout: CONSTRAINED
+                )
+              }
+            }
+          }
+        }
+      }
+    }
   }
 `;
diff --git a/lib/ui/templates/ofPeople/Person.tsx b/lib/ui/templates/ofPeople/Person.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import styled from "styled-components";
 
@@ -73,85 +74,95 @@ const PersonLinks = styled.div`
 interface MemberProps {
   data: PersonNode;
   defaultAvatar: any;
-  toggleModal: VoidFunction;
 }
 
 function Member(props: MemberProps) {
   const { defaultAvatar } = props;
   const { frontmatter } = props.data;
-  const { avatar, bluesky, fname, github, lname, mastodon, twitter, website } =
-    frontmatter ?? {};
+  const {
+    uid,
+    avatar,
+    bluesky,
+    fname,
+    github,
+    lname,
+    mastodon,
+    twitter,
+    website,
+  } = frontmatter ?? {};
 
   return (
-    <Person onClick={props.toggleModal} role="button">
-      <PersonPic $hasAvatar={avatar ? true : false}>
-        <GatsbyImage
-          image={
-            avatar?.childImageSharp?.gatsbyImageData
-              ? avatar.childImageSharp.gatsbyImageData
-              : defaultAvatar.gatsbyImageData
-          }
-          alt=""
-        />
-      </PersonPic>
-      <PersonDetails>
-        <PersonName>
-          <span>{fname}</span> <span>{lname}</span>
-        </PersonName>
-        <PersonLinks>
-          {website ? (
-            <Action
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              href={`https://${website}/`}
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              <Icon name="website" size="s" />
-            </Action>
-          ) : null}
-          {bluesky ? (
-            <Action
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              href={`https://bsky.app/profile/${bluesky}`}
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              <Icon name="bluesky" size="s" />
-            </Action>
-          ) : null}
-          {mastodon ? (
-            <Action
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              href={`https://${mastodon}`}
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              <Icon name="mastodon" size="s" />
-            </Action>
-          ) : null}
-          {twitter ? (
-            <Action
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              href={`https://twitter.com/${twitter}`}
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              <Icon name="twitter" size="s" />
-            </Action>
-          ) : null}
-          {github ? (
-            <Action
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              href={`https://github.com/${github}`}
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              <Icon name="github" size="s" />
-            </Action>
-          ) : null}
-        </PersonLinks>
-      </PersonDetails>
-    </Person>
+    <Link to={`/people/${uid}`}>
+      <Person>
+        <PersonPic $hasAvatar={avatar ? true : false}>
+          <GatsbyImage
+            image={
+              avatar?.childImageSharp?.gatsbyImageData
+                ? avatar.childImageSharp.gatsbyImageData
+                : defaultAvatar.gatsbyImageData
+            }
+            alt=""
+          />
+        </PersonPic>
+        <PersonDetails>
+          <PersonName>
+            <span>{fname}</span> <span>{lname}</span>
+          </PersonName>
+          <PersonLinks>
+            {website ? (
+              <Action
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                href={`https://${website}/`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="website" size="s" />
+              </Action>
+            ) : null}
+            {bluesky ? (
+              <Action
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                href={`https://bsky.app/profile/${bluesky}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="bluesky" size="s" />
+              </Action>
+            ) : null}
+            {mastodon ? (
+              <Action
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                href={`https://${mastodon}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="mastodon" size="s" />
+              </Action>
+            ) : null}
+            {twitter ? (
+              <Action
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                href={`https://twitter.com/${twitter}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="twitter" size="s" />
+              </Action>
+            ) : null}
+            {github ? (
+              <Action
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                href={`https://github.com/${github}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="github" size="s" />
+              </Action>
+            ) : null}
+          </PersonLinks>
+        </PersonDetails>
+      </Person>
+    </Link>
   );
 }
 
