From 783abbabd5570ac5384003cef05f0db3971aaecf Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Tue, 5 Dec 2023 13:53:16 -0500
Subject: [PATCH 1/2] add author list to article

---
 lib/strapi/newsGraphQL.js                 | 41 +++++++++++++++++++++--
 pages/news/[year]/[month]/[day]/[slug].js | 33 +++++++++++++++++-
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index 974d2dac..854b84de 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/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),
diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 1606d69e..2005f411 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/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, Box } 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,32 @@ 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) && <Box sx={{ aspectRatio: '1 / 1', height: '1.5lh', borderRadius: '50%', overflow: 'hidden', mr: 0.5 }}>
+                <Image
+                  src={a.photo.url}
+                  alt={`A thumbnail photo of ${a.name}`}
+                  width={a.photo.width}
+                  height={a.photo.height}
+                  layout="responsive"
+                />
+              </Box>}
+              <span>{a.name}</span>
+            </Stack>
+          </Link>
+
+          acc.push(out);
+          if(i < authors.length - 1) acc.push("·");
+          return acc;
+        }, [])}
+      </Stack>}
+
       <Divider sx={{ margin: '1rem 0'}}/>
 
         

From 5c6aeaf290253970d5d9540719f46b53b4b1abd1 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:30:51 -0500
Subject: [PATCH 2/2] switch to Avatar component

---
 pages/news/[year]/[month]/[day]/[slug].js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 2005f411..d1d8e67f 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/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, Box } 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"
@@ -85,15 +85,7 @@ export default function Article({ article }) {
           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) && <Box sx={{ aspectRatio: '1 / 1', height: '1.5lh', borderRadius: '50%', overflow: 'hidden', mr: 0.5 }}>
-                <Image
-                  src={a.photo.url}
-                  alt={`A thumbnail photo of ${a.name}`}
-                  width={a.photo.width}
-                  height={a.photo.height}
-                  layout="responsive"
-                />
-              </Box>}
+              {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>