Merge branch 'develop' into dashboard-api

README.md

@@ -1,5 +1,9 @@
 # renci-dot-org
 
+## Project deployment overview
+*Note that this diagram is for the entire project, while this repo represents the Next.js application exclusively.*
+![image](https://github.com/mbwatson/renci-dot-org/assets/16181779/26d297d4-867d-4cdc-90b8-6ad3088a3b14)
+
 This is a [Next.js](https://nextjs.org/) project. To run the development server:
 
 ```bash
@@ -44,4 +48,4 @@ If it already exists, you can update the secret by editing the `token` field in
 ```bash
 kubectl edit secret renci-dot-org-api
 ```
-Note that is it needs to be base64 encoded, so translate the token with `echo "YOUR_TOKEN" | base64` before copying it into the yaml file.
+Note that is it needs to be base64 encoded, so translate the token with `echo "YOUR_TOKEN" | base64` before copying it into the yaml file.

components/layout/menu/our-work-tray.js

@@ -1,4 +1,4 @@
-import { Container, Fade, Grid, List, ListItem, ListSubheader, Paper, Typography } from '@mui/material'
+import { Container, Fade, Grid, List, ListItem, ListSubheader, Paper, Divider, Typography } from '@mui/material'
 import style from './menu.module.css'
 import { useConfig } from '../../../context'
 import { Link } from '../../'
@@ -53,6 +53,11 @@ export const OurWorkTray = ({
                     </ListItem>
                   ))
                 }
+                {/* Add a one-off menu item that links to the list of all RENCI projects */}
+                <Divider sx={{ paddingTop: '0.5rem' }}/>
+                <ListItem sx={{ padding: '0.5rem', fontWeight: '500' }}>
+                  <Link to="/projects">See All Projects</Link>
+                </ListItem>
               </List>
             </Grid>
 

components/layout/section/section.js

@@ -29,7 +29,7 @@ export const Section = ({ title, children }) => {
           )
         }
       </Box>
-      <Box sx={{ flex: '1' , wordWrap: 'break-word'}} >
+      <Box sx={{ flex: '1' , wordWrap: 'break-word', minWidth: 0 }} >
           { children }
       </Box>
     </Stack>

components/news/article-preview.js

@@ -84,7 +84,6 @@ export const ArticlePreview = ({
         }</Link>
       </Typography>
     </Box>
-
 
     <Typography paragraph className="excerpt" sx={{
       '--maxHeight': 'calc(4rem * 1.5)',
@@ -111,4 +110,72 @@ export const ArticlePreview = ({
       <Link to={articleLink} className='hover-link'>Read more →</Link>
     </Typography>
   </Stack>
+}
+
+export const HomePageArticlePreview = ({article }) => {
+  const date = new Date(article.publishDate)
+  const [day, month, year] = [
+    date.getUTCDate(),
+    date.getUTCMonth() + 1,
+    date.getUTCFullYear(),
+  ]
+  const dateString = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+
+  const articleLink = `/news/${year}/${month}/${day}/${article.slug}`;
+
+  return <Stack gap={1}>
+    <Box>
+      <Box sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'column', md: 'row' },
+        alignItems: { xs: 'initial', sm: 'initial', md: 'baseline' },
+        gap: { xs: 1, sm: 1, md: 2 },
+        mb: { xs: 1, sm: 1, md: 0 },
+      }}>
+        <Stack direction='row' alignItems='center' gap={1}>
+          <Typography variant="subtitle2" whiteSpace='nowrap'>{dateString}</Typography>
+          <Box sx={{ width: '0.3em', height: '0.3em', backgroundColor: '#b6b6b6', borderRadius: '50%', flex: '0 0 auto' }} />
+          <Typography variant="subtitle2" textTransform='uppercase'>{
+            article.newsOrBlog === 'blog' ? 'Blog' : 'Feature'
+          }</Typography>
+        </Stack>
+      </Box>
+      <Typography variant="h3" sx={{ 
+        '& a': { 
+          textDecoration: 'none', 
+          fontWeight: '400'
+        },
+        paddingBottom: '0',
+        paddingTop: '0.5rem'
+      }}>
+        <Link to={articleLink}>{article.title}</Link>
+      </Typography>
+    </Box>
+
+
+    <Typography paragraph className="excerpt" sx={{
+      '--maxHeight': 'calc(3rem * 1.5)',
+      '&:before': {
+        content: "''",
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        pointerEvents: 'none',
+        background: 'linear-gradient(transparent 0px, white calc(var(--maxHeight) - 4px ))'
+      },
+      '& > .hover-link': {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+      },
+      position: 'relative',
+      maxHeight: 'var(--maxHeight)',
+      overflow: 'hidden',
+    }}>
+      {article.excerpt}
+      <Link to={articleLink} className='hover-link'>Read more →</Link>
+    </Typography>
+  </Stack>
 }

components/news/tag.js

@@ -25,7 +25,7 @@ const TYPES = {
   },
   default: {
     bgColor: "#ededed",
-    color: "#414141",
+    color: "#474747",
   },
 };
 

components/projectSpotlight.js

@@ -95,7 +95,7 @@ export const ProjectSpotlight = ({ selectedProjects }) => {
 
   return (
     <Fragment>
-      <Typography variant='h3' style={{margin: '2rem 0'}}>Project Spotlight</Typography>
+      <Typography variant='h2'>Project Spotlight</Typography>
       <Stack
         direction={{ sm: 'column', md: 'row' }}
         spacing={{ xs: 1, sm: 2, md: 4 }}

lib/strapi/fetchHomeNews.js

@@ -0,0 +1,31 @@
+import { getStrapiURL } from "@/utils/api";
+
+export const fetchHomeNews = async (preview = false) => {
+  try {
+    let bodyContent = JSON.stringify({
+      "pagination": {
+        "pageSize": 3,
+        "page": 1
+      }
+    });
+
+    const response = await fetch(getStrapiURL('/api/post-list'), {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: bodyContent
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const result = await response.json();
+    return result.results
+
+  } catch (error) {
+    console.log(error);
+  } 
+}

lib/strapi/fetchOurWorkTrayItems.js

@@ -33,7 +33,7 @@ export const fetchOurWorkTrayItems = async (preview = false) => {
   }`,
     preview
   );
-  const payload = {
+  let payload = {
     collaborationCollection: data.collaborations.data.map((group) => ({
       id: group.id,
       name: group.attributes.name,
@@ -50,5 +50,11 @@ export const fetchOurWorkTrayItems = async (preview = false) => {
       slug: group.attributes.slug,
     })),
   };
+  // sort everything alphabetically -- groups, collabs, and ops teams
+  payload = Object.keys(payload)
+    .reduce((acc, key) => {
+      acc[key] = payload[key].sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1)
+      return acc
+    }, {})
   return payload;
 };

lib/strapi/fetchStrapiGraphQL.js

@@ -1,5 +1,7 @@
+import { getStrapiURL } from "@/utils/api";
+
 export const fetchStrapiGraphQL = async (query, preview = false, signal = undefined) => {
-  return fetch(`https://api.renci.org/graphql`, {
+  return fetch(getStrapiURL("/graphql"), {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

lib/strapi/index.js

@@ -8,4 +8,5 @@ export * from './peopleGraphQL'
 export * from './fetchOurWorkTrayItems'
 export * from './newsAppearancesGraphQL'
 export * from './newsSWR'
-export * from './newsGraphQL'
+export * from './newsGraphQL'
+export * from './fetchHomeNews'

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),

lib/strapi/newsSWR.js

@@ -1,3 +1,4 @@
+import { getStrapiURL } from '@/utils/api';
 import useSWR from 'swr';
 
 export const useTags = () => {
@@ -16,7 +17,7 @@ export const useTags = () => {
     });
 
   // dedupingInterval essentially sets cache expiration time to 1 hour
-  return useSWR('https://api.renci.org/api/all-post-tags', fetcher, { dedupingInterval: 1000 * 60 * 60 });
+  return useSWR(getStrapiURL("/api/all-post-tags"), fetcher, { dedupingInterval: 1000 * 60 * 60 });
 }
 
 /**
@@ -72,7 +73,7 @@ export const useNewsArticles = ({
     excerptLength,
   }
 
-  const articlesUrl = `https://api.renci.org/api/post-list`;
+  const articlesUrl = getStrapiURL("/api/post-list");
 
   const cacheKey = JSON.stringify({articlesUrl, reqBody});
 

pages/[...slug].js

@@ -5,6 +5,7 @@ import Seo from "@/components/elements/seo"
 import { useRouter } from "next/router"
 import Layout from "../components/layout"
 import { getLocalizedPaths } from "utils/localize"
+import Head from "next/head"
 
 // The file is called [[...slug]].js because we're using Next's
 // optional catch all routes feature. See the related docs:
@@ -14,6 +15,7 @@ const DynamicPage = ({
   sections,
   metadata,
   preview,
+  title,
   global,
   pageContext
 }) => {
@@ -31,6 +33,10 @@ const DynamicPage = ({
 
   return (
     <div>
+      {Boolean(title) && <Head>
+        <title> { title } | RENCI.org</title>
+      </Head>}
+
       {/* Add meta tags for SEO*/}
       <Seo metadata={metadata} />
       {/* Display content sections */}
@@ -81,6 +87,7 @@ export async function getServerSideProps(context) {
       sections: contentSections,
       metadata: pageData.metaData,
       global: globalLocale,
+      title: pageData.title,
       pageContext: {
         ...pageContext,
         // localizedPaths,