Merge pull request #76 from mbwatson/home-page-news

Home page news

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/projectSpotlight.js

@@ -93,7 +93,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,29 @@
+export const fetchHomeNews = async (preview = false) => {
+  try {
+    let bodyContent = JSON.stringify({
+      "pagination": {
+        "pageSize": 3,
+        "page": 1
+      }
+    });
+
+    const response = await fetch('https://api.renci.org/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/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'

pages/index.js

@@ -1,13 +1,15 @@
 import { Fragment } from 'react'
 import Head from 'next/head'
 import Image from 'next/image'
-import { Typography } from '@mui/material'
+import { Typography, Stack } from '@mui/material'
 import { Link, Page } from '../components'
 import homeHero from '../images/racks.jpg'
 import { ProjectSpotlight } from '../components/projectSpotlight'
-import { fetchActiveStrapiProjects } from '../lib/strapi'
+import { fetchActiveStrapiProjects, fetchHomeNews } from '../lib/strapi'
+import { HomePageArticlePreview } from "../components/news/article-preview";
+
+export default function Home({ selectedProjects, newsArray }) {
 
-export default function Home({ selectedProjects}) {
   return (
     <Page
       title="Home"
@@ -24,30 +26,59 @@ export default function Home({ selectedProjects}) {
       </Typography>
 
       <ProjectSpotlight selectedProjects={selectedProjects}/>
+      {
+        newsArray && (
+          <Fragment>
+            <Typography variant='h2' sx={{paddingTop: '1rem'}}>Recent News</Typography>
+            <Stack direction='column' gap={2} paddingY={2}>
+              { newsArray.map((article, i) => (
+                <HomePageArticlePreview
+                  key={i}
+                  article={article}
+                />
+              ))}
+            </Stack>
+          </Fragment>
+        )
+      }
+
     </Page>
   )
 }
 
 export async function getServerSideProps({ res }) {
-  res.setHeader(
-    'Cache-Control',
-    'no-cache, no-store, must-revalidate'
-  )
+  try {
+    res.setHeader(
+      'Cache-Control',
+      'no-cache, no-store, must-revalidate'
+    )
 
-  const projects = await fetchActiveStrapiProjects()
-
-  let projectsCopy = [...projects]
-  let projectSelection = []
-  for (let i = 0; i < 3; i += 1) {
-    const randomIndex = Math.floor(Math.random() * projectsCopy.length)
-    const randomProject = projectsCopy.splice(randomIndex, 1)[0]
-    //add a property that is a snippet of the original description before pushing to the array
-    projectSelection.push({
-      ...randomProject,
-    })
-  }
+    const [newsArray, projects] = await Promise.all([
+      fetchHomeNews(),
+      fetchActiveStrapiProjects(),
+    ]);
+
+    let projectsCopy = [...projects]
+    let projectSelection = []
+    for (let i = 0; i < 3; i += 1) {
+      const randomIndex = Math.floor(Math.random() * projectsCopy.length)
+      const randomProject = projectsCopy.splice(randomIndex, 1)[0]
+      //add a property that is a snippet of the original description before pushing to the array
+      projectSelection.push({
+        ...randomProject,
+      })
+    }
 
-  return {
-    props: { selectedProjects: JSON.parse(JSON.stringify(projectSelection)) },
+    return {
+      props: { 
+        selectedProjects: JSON.parse(JSON.stringify(projectSelection)), 
+        newsArray: JSON.parse(JSON.stringify(newsArray)) 
+      },
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return {
+      props: { selectedProjects: [], newsArray: [] }
+    };
   }
 }