add author list to article

lib/strapi/newsGraphQL.js

@@ -1,5 +1,26 @@
 import { fetchStrapiGraphQL } from "./fetchStrapiGraphQL";
 
+export const fetchPhotoThumbnailUrl = async (slug) => {
+  let res = await fetchStrapiGraphQL(`
+    query {
+      people(filters: { slug: { eq: "${slug}" }}) {
+        data {
+          attributes {
+            photo {
+              data {
+                attributes {
+                  formats
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  return res?.data?.people?.data?.[0]?.attributes?.photo?.data?.[0]?.attributes?.formats?.thumbnail ?? null;
+}
+
 export const fetchArticle = async (slug) => {
   const articleGql = await fetchStrapiGraphQL(`
     fragment PersonAttributes on PersonRelationResponseCollection {
@@ -8,6 +29,7 @@ export const fetchArticle = async (slug) => {
           firstName
           lastName
           slug
+          active
         }
       }
     }
@@ -105,10 +127,23 @@ export const fetchArticle = async (slug) => {
 
   if (articleGql?.data?.posts?.data?.length !== 1) return null;
 
-  return articleGql.data.posts.data.map(({ attributes }) => ({
+  let photos = await Promise.allSettled(articleGql.data.posts.data[0].attributes.renciAuthors.data.map(({ attributes }) => (
+    fetchPhotoThumbnailUrl(attributes.slug)
+  )))
+
+  console.log(photos);
+
+  return await articleGql.data.posts.data.map(({ attributes }) => ({
     ...attributes,
-    renciAuthors: attributes.renciAuthors.data.map(({ attributes }) => attributes),
-    people: attributes.people.data.map(({ attributes }) => ({ ...attributes, name: `${attributes.firstName} ${attributes.lastName}`})),
+    renciAuthors: attributes.renciAuthors.data.map(({ attributes }, i) => ({
+      ...attributes,
+      name: `${attributes.firstName} ${attributes.lastName}`,
+      photo: photos[i].status === "fulfilled" ? photos[i].value : null,
+    })),
+    people: attributes.people.data.map(({ attributes }) => ({
+      ...attributes,
+      name: `${attributes.firstName} ${attributes.lastName}`
+    })),
     researchGroups: attributes.researchGroups.data.map(({ attributes }) => attributes),
     collaborations: attributes.collaborations.data.map(({ attributes }) => attributes),
     projects: attributes.projects.data.map(({ attributes }) => attributes),

pages/news/[year]/[month]/[day]/[slug].js

@@ -1,7 +1,7 @@
 import { Fragment } from "react"
 import { Page, Section } from "@/components/layout";
 import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
-import { Divider, Typography, Stack, styled } from "@mui/material";
+import { Divider, Typography, Stack, styled, Avatar } from "@mui/material";
 import { Markdown } from "@/components/markdown";
 import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
@@ -26,6 +26,11 @@ export default function Article({ article }) {
     return `/news?${qs.stringify({[type]: id})}`
   }
 
+  let authors = [
+    ...article.renciAuthors,
+    ...article.externalAuthors?.split(",").map((a) => a.trim()) ?? []
+  ]
+
   return (
   <Page hideTitle title={article.title} description={article.subtitle}>
 
@@ -73,6 +78,24 @@ export default function Article({ article }) {
         })}
       </Stack>
 
+      {Boolean(authors.length) && <Stack my={2} flexDirection="row" alignItems="center" gap={1} flexWrap="wrap">
+        {authors.reduce((acc, a, i) => {
+          let out;
+          if (typeof a === "string") out = <span>{a}</span>;
+          else if (!a.active) out = <span>{a.name}</span>;
+          else out = <Link to={`/people/${a.slug}`} key={a.slug}>
+            <Stack flexDirection="row" alignItems="center" sx={{ maxWidth: "fit-content" }}>
+              {Boolean(a.photo) && <Avatar alt={`A thumbnail photo of ${a.name}`} src={a.photo.url} sx={{ mr: 1, width: '2lh', height: '2lh' }} />}
+              <span>{a.name}</span>
+            </Stack>
+          </Link>
+
+          acc.push(out);
+          if(i < authors.length - 1) acc.push("·");
+          return acc;
+        }, [])}
+      </Stack>}
+
       <Divider sx={{ margin: '1rem 0'}}/>