docs/organization: Re-add support for middle names

I had already done this, but I have no idea where the commit went.
Clearly, it did not make its way to the final PR adding the
organizational documentation.

Signed-off-by: Evan Maddock <maddock.evan@vivaldi.net>

Author: EbonJaeger

src/components/Person.tsx

@@ -20,7 +20,7 @@ export const Person = ({ embeddedIn, isBadge = false, onAvatarClick, person, sx
   const usePersonRow = useMediaQuery(SiteTheme.breakpoints.up("sm"));
   const key = `Person-${embeddedIn}-${person.names.first}${person.names.last}`;
   const avatar = useBaseUrl(`/img/avatars/${person.names.first}${person.names.last}.webp`);
-  const name = `${person.names.first} ${person.names.last}`;
+  const name = `${person.names.first} ${person.names.middle ?? ""} ${person.names.last}`;
 
   const github = person.websites.find((w) => w.type === WebsiteType.GITHUB);
   const primarySite = person.websites.find((w) => w.type === WebsiteType.WEBSITE) ?? github;

src/components/Teams.tsx

@@ -36,7 +36,7 @@ export const TeamMember = ({ haveSupplementalInfo, teamName, person, supplementa
         person={person}
         sx={{ minWidth: 240 }}
       />
-      {haveSupplementalInfo && <Box sx={{ fontWeight: "bold", lineHeight: "40px" }}>{supplementalInfo}</Box>}
+      {haveSupplementalInfo && <Box sx={{ fontWeight: "bold", lineHeight: "40px", marginInlineStart: "6px" }}>{supplementalInfo}</Box>}
     </Stack>
   );
 };

src/data/people.tsx

@@ -186,6 +186,7 @@ export const People: Record<string, Person> = {
     matrix: "@alfisya:matrix.org",
     names: {
       first: "Muhammad",
+      middle: "Alfi",
       last: "Syahrin",
     },
     websites: [

src/types.ts

@@ -24,6 +24,7 @@ export type Person = {
 
 export type PersonName = {
   first: string;
+  middle?: string;
   last: string;
 };