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 }}

pages/index.js

@@ -1,13 +1,50 @@
-import { Fragment } from 'react'
+import { Fragment, useEffect, useState } 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 { HomePageArticlePreview } from "../components/news/article-preview";
 
 export default function Home({ selectedProjects}) {
+  const [newsArray, setNewsArray] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      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();
+        setNewsArray(result.results);
+      } catch (error) {
+        setError(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [setNewsArray, setLoading, setError])
   return (
     <Page
       title="Home"
@@ -24,6 +61,22 @@ 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>
   )
 }