From c67062d3773ae8611505af6b0c0bdd1ccb4d15ea Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 13 Nov 2023 13:07:34 -0500
Subject: [PATCH 01/15] create initial route template

---
 lib/strapi/newsGraphQL.js | 116 ++++++++++++++++++++++++++++++++++++++
 pages/news/[...slug].js   |  50 ++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 pages/news/[...slug].js

diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index fa6e9140..9a5c822f 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/lib/strapi/newsGraphQL.js
@@ -155,4 +155,120 @@ export const useNewsArticles = ({
 
   // dedupingInterval essentially sets cache expiration time to 1 hour
   return useSWR(articlesUrl, fetcher, { dedupingInterval: 1000 * 60 * 60 });
+}
+
+export const fetchArticle = async (slug) => {
+  const articleGql = await fetchStrapiGraphQL(`
+    fragment PersonAttributes on PersonRelationResponseCollection {
+      data {
+        attributes {
+          firstName
+          lastName
+          slug
+        }
+      }
+    }
+    
+    query {
+      posts(filters: { slug: { eq: "${slug}" }}) {
+        data {
+          attributes {
+            title
+            subtitle
+            slug
+            publishDate
+            newsOrBlog
+            renciAuthors {
+              ...PersonAttributes
+            }
+            externalAuthors
+            metadata {
+              metaTitle
+              metaDescription
+              shareImage {
+                data {
+                  attributes {
+                    url
+                  }
+                }
+              }
+            }
+            people {
+              ...PersonAttributes
+            }
+            researchGroups {
+              data {
+                attributes {
+                  name
+                  slug
+                }
+              }
+            }
+            collaborations {
+              data {
+                attributes {
+                  name
+                  slug
+                }
+              }
+            }
+            projects {
+              data {
+                attributes {
+                  name
+                  slug
+                }
+              }
+            }
+            organizations {
+              data {
+                attributes {
+                  name
+                  slug
+                }
+              }
+            }
+            tags {
+              data {
+                attributes {
+                  name
+                }
+              }
+            }
+            content {
+              __typename
+              ...on ComponentPostSectionsImage {
+                caption
+                altText
+                image {
+                  data {
+                    attributes {
+                      url
+                    }
+                  }
+                }
+              }
+              ...on ComponentPostSectionsRichText{
+                content
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  console.log(articleGql)
+
+  if (articleGql?.data?.posts?.data?.length !== 1) return null;
+
+  return articleGql.data.posts.data.map(({ attributes }) => ({
+    ...attributes,
+    renciAuthors: attributes.renciAuthors.data.map(({ attributes }) => attributes),
+    people: attributes.people.data.map(({ attributes }) => attributes),
+    researchGroups: attributes.researchGroups.data.map(({ attributes }) => attributes),
+    collaborations: attributes.collaborations.data.map(({ attributes }) => attributes),
+    projects: attributes.projects.data.map(({ attributes }) => attributes),
+    organizations: attributes.organizations.data.map(({ attributes }) => attributes),
+  }))
 }
\ No newline at end of file
diff --git a/pages/news/[...slug].js b/pages/news/[...slug].js
new file mode 100644
index 00000000..b7efb025
--- /dev/null
+++ b/pages/news/[...slug].js
@@ -0,0 +1,50 @@
+import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
+
+export default function NewsArticle({ article }) {
+  return <pre>{JSON.stringify(article, null, 2)}</pre>
+}
+
+export async function getStaticPaths() {
+  const postsGql = await fetchStrapiGraphQL(`query {
+    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
+      data {
+        attributes {
+          slug
+          publishDate
+        }
+      }
+    }
+  }`);
+
+  const paths = postsGql.data.posts.data.map(({
+    attributes: { slug: postSlug, publishDate }
+  }) => {
+    // this matches the functionality in article-preview.js
+    // maybe extract both to a common function?
+    const date = new Date(publishDate);
+    const [day, month, year] = [
+      date.getUTCDate().toString(),
+      (date.getUTCMonth() + 1).toString(),
+      date.getUTCFullYear().toString(),
+    ];
+
+    return {
+      params: { slug: [year, month, day, postSlug] }
+    };
+  });
+
+  return {
+    paths,
+    fallback: 'blocking', 
+  };
+}
+
+export async function getStaticProps({ params }) {
+  console.log("params", params.slug[3]);
+  
+  const article = await fetchArticle(params.slug[3]);
+
+  if (article === null) return { notFound: true };
+  
+  return { props: { article } }
+}
\ No newline at end of file

From 9f4f12fa0e5606144a6235c306ebacc5e556aba1 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 13 Nov 2023 22:01:15 -0500
Subject: [PATCH 02/15] year month and date route handling

---
 components/news/time-grouping.js          | 47 +++++++++++++
 lib/strapi/newsGraphQL.js                 |  4 +-
 pages/news/[...slug].js                   | 50 -------------
 pages/news/[year]/[month]/[day]/[slug].js | 45 ++++++++++++
 pages/news/[year]/[month]/[day]/index.js  | 86 +++++++++++++++++++++++
 pages/news/[year]/[month]/index.js        | 81 +++++++++++++++++++++
 pages/news/[year]/index.js                | 72 +++++++++++++++++++
 utils/date.js                             |  7 ++
 utils/slug.js                             | 15 ++++
 9 files changed, 354 insertions(+), 53 deletions(-)
 create mode 100644 components/news/time-grouping.js
 delete mode 100644 pages/news/[...slug].js
 create mode 100644 pages/news/[year]/[month]/[day]/[slug].js
 create mode 100644 pages/news/[year]/[month]/[day]/index.js
 create mode 100644 pages/news/[year]/[month]/index.js
 create mode 100644 pages/news/[year]/index.js
 create mode 100644 utils/date.js
 create mode 100644 utils/slug.js

diff --git a/components/news/time-grouping.js b/components/news/time-grouping.js
new file mode 100644
index 00000000..e4dd442b
--- /dev/null
+++ b/components/news/time-grouping.js
@@ -0,0 +1,47 @@
+import { dateToSlug } from "@/utils/slug"
+import { Page } from "../layout"
+import { Link } from "../link"
+import { Typography } from "@mui/material"
+
+const MONTHS = [ undefined, "Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."]
+const DAYS = 
+  [undefined, "1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th","9th", "10th",
+  "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th",
+  "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"]
+
+export const TimeGrouping = ({
+  year,
+  month,
+  day,
+  posts,
+}) => {
+  const title = `Articles during ${
+    month !== undefined ? `${MONTHS[Number(month)]} ` : ''
+  }${
+    day !== undefined ? `${DAYS[Number(day)]}, ` : ''
+  }${year}`
+  
+  return <Page title={title}>
+    <Typography variant="subtitle2" sx={{ textTransform: 'uppercase' }}>
+      <Link to='/news'>← Back to news</Link>
+    </Typography>
+    {posts.length === 0 ? "No articles for this period." : (
+      <ul>
+        {
+          posts.map(({ title, publishDate, slug }, i) => {
+            const d = new Date(publishDate)
+            return (
+              <li key={i}>
+                <Link to={`/news/${dateToSlug(d)}/${slug}`}>
+                  {`${d.getUTCMonth() + 1}/${d.getUTCDate()}/${d.getUTCFullYear()}`}
+                  {" - "}
+                  {title}
+                </Link> 
+              </li>
+            )
+          })
+        }
+      </ul>
+    )}
+  </Page>
+}
\ No newline at end of file
diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index 9a5c822f..a902a5c4 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/lib/strapi/newsGraphQL.js
@@ -258,8 +258,6 @@ export const fetchArticle = async (slug) => {
     }
   `);
 
-  console.log(articleGql)
-
   if (articleGql?.data?.posts?.data?.length !== 1) return null;
 
   return articleGql.data.posts.data.map(({ attributes }) => ({
@@ -270,5 +268,5 @@ export const fetchArticle = async (slug) => {
     collaborations: attributes.collaborations.data.map(({ attributes }) => attributes),
     projects: attributes.projects.data.map(({ attributes }) => attributes),
     organizations: attributes.organizations.data.map(({ attributes }) => attributes),
-  }))
+  }))[0];
 }
\ No newline at end of file
diff --git a/pages/news/[...slug].js b/pages/news/[...slug].js
deleted file mode 100644
index b7efb025..00000000
--- a/pages/news/[...slug].js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
-
-export default function NewsArticle({ article }) {
-  return <pre>{JSON.stringify(article, null, 2)}</pre>
-}
-
-export async function getStaticPaths() {
-  const postsGql = await fetchStrapiGraphQL(`query {
-    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
-      data {
-        attributes {
-          slug
-          publishDate
-        }
-      }
-    }
-  }`);
-
-  const paths = postsGql.data.posts.data.map(({
-    attributes: { slug: postSlug, publishDate }
-  }) => {
-    // this matches the functionality in article-preview.js
-    // maybe extract both to a common function?
-    const date = new Date(publishDate);
-    const [day, month, year] = [
-      date.getUTCDate().toString(),
-      (date.getUTCMonth() + 1).toString(),
-      date.getUTCFullYear().toString(),
-    ];
-
-    return {
-      params: { slug: [year, month, day, postSlug] }
-    };
-  });
-
-  return {
-    paths,
-    fallback: 'blocking', 
-  };
-}
-
-export async function getStaticProps({ params }) {
-  console.log("params", params.slug[3]);
-  
-  const article = await fetchArticle(params.slug[3]);
-
-  if (article === null) return { notFound: true };
-  
-  return { props: { article } }
-}
\ No newline at end of file
diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
new file mode 100644
index 00000000..fcba55bf
--- /dev/null
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -0,0 +1,45 @@
+import { Page } from "@/components/layout";
+import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
+
+export default function Article({ article }) {
+  return <Page title={article.title} description={article.subtitle}>
+    <pre>{JSON.stringify(article, null, 2)}</pre>
+  </Page>
+}
+
+export async function getStaticPaths() {
+  const postsGql = await fetchStrapiGraphQL(`query {
+    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
+      data {
+        attributes {
+          slug
+          publishDate
+        }
+      }
+    }
+  }`);
+
+  const paths = postsGql.data.posts.data.map(({  attributes: { publishDate, slug } }) => {
+    const date = new Date(publishDate);
+    
+    return {
+      params: {
+        year: date.getUTCFullYear().toString(),
+        month: (date.getUTCMonth() + 1).toString(),
+        day: date.getUTCDate().toString(),
+        slug,
+      }
+    }
+  });
+
+  return {
+    paths,
+    fallback: 'blocking', 
+  };
+}
+
+export async function getStaticProps({ params: { slug } }) {
+  const article = await fetchArticle(slug);
+  if (article === null || article.length) return { notFound: true };
+  return { props: { article } }
+}
diff --git a/pages/news/[year]/[month]/[day]/index.js b/pages/news/[year]/[month]/[day]/index.js
new file mode 100644
index 00000000..2212edea
--- /dev/null
+++ b/pages/news/[year]/[month]/[day]/index.js
@@ -0,0 +1,86 @@
+import { TimeGrouping } from "@/components/news/time-grouping";
+import { fetchStrapiGraphQL } from "@/lib/strapi";
+import { isValidDate } from "@/utils/date";
+
+export default function MonthCatalog({ year, month, day, posts }) {
+  return <TimeGrouping
+    year={year}
+    month={month}
+    day={day}
+    posts={posts}
+  />
+}
+
+export async function getStaticPaths() {
+  const postsGql = await fetchStrapiGraphQL(`query {
+    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
+      data {
+        attributes {
+          publishDate
+        }
+      }
+    }
+  }`);
+
+  // we need to create a list of paths for each year/month/day group. In order to avoid duplicates,
+  // here we create a Set of JSON.stringify({ year, month, day }), which can then be cast to an array and parsed
+  const yearSet = new Set(postsGql.data.posts.data.map(({  attributes: { publishDate } }) => {
+    const date = new Date(publishDate);
+    
+    return JSON.stringify({
+      year: date.getUTCFullYear().toString(),
+      month: (date.getUTCMonth() + 1).toString(),
+      day: date.getUTCDate().toString(),
+    })
+  }));
+
+  const paths = Array.from(yearSet).map((date) => ({ params: JSON.parse(date) }));
+
+  return {
+    paths,
+    fallback: 'blocking', 
+  };
+}
+
+export async function getStaticProps({ params }) {
+  
+  const date = new Date(params.year, params.month - 1, params.day);
+
+  if (!isValidDate(date)) return {
+    notFound: true,
+  }
+
+  const dateStr = date.toISOString().split('T')[0];
+  
+  const postsGql = await fetchStrapiGraphQL(`
+    query {
+      posts(
+        sort: "publishDate:desc"
+        filters: { publishDate: { eq: "${dateStr}" } }
+        pagination: { limit: 1000 }
+      ) {
+        data {
+          attributes {
+            title
+            publishDate
+            slug
+          }
+        }
+      }
+    }
+  `);
+
+  console.log(dateStr);
+  console.log(postsGql);
+
+  const posts = postsGql.data.posts.data.map(({ attributes }) => attributes);
+
+  return {
+    props: {
+      year: params.year,
+      month: params.month,
+      day: params.day,
+      posts
+    }
+  }
+}
diff --git a/pages/news/[year]/[month]/index.js b/pages/news/[year]/[month]/index.js
new file mode 100644
index 00000000..ddfd28c8
--- /dev/null
+++ b/pages/news/[year]/[month]/index.js
@@ -0,0 +1,81 @@
+import { TimeGrouping } from "@/components/news/time-grouping";
+import { fetchStrapiGraphQL } from "@/lib/strapi";
+import { isValidDate } from "@/utils/date";
+
+export default function MonthCatalog({ year, month, posts }) {
+  return <TimeGrouping
+    year={year}
+    posts={posts}
+  />
+}
+
+export async function getStaticPaths() {
+  const postsGql = await fetchStrapiGraphQL(`query {
+    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
+      data {
+        attributes {
+          publishDate
+        }
+      }
+    }
+  }`);
+
+  // we need to create a list of paths for each year/month pair. In order to avoid duplicates,
+  // here we create a Set of JSON.stringify({ year, month }), which can then be cast to an array and parsed
+  const yearSet = new Set(postsGql.data.posts.data.map(({  attributes: { publishDate } }) => {
+    const date = new Date(publishDate);
+    
+    return JSON.stringify({
+      year: date.getUTCFullYear().toString(),
+      month: (date.getUTCMonth() + 1).toString(),
+    })
+  }));
+
+  const paths = Array.from(yearSet).map((yearAndMonth) => ({ params: JSON.parse(yearAndMonth) }));
+
+  return {
+    paths,
+    fallback: 'blocking', 
+  };
+}
+
+export async function getStaticProps({ params }) {
+  
+  const firstDayOfMonth = new Date(params.year, params.month - 1, 1);
+  const lastDayOfMonth = new Date(params.year, params.month - 1 + 1, 0); // 0th day of the next month, i.e. last day of this month
+
+  if (!isValidDate(firstDayOfMonth) || !isValidDate(lastDayOfMonth)) return {
+    notFound: true,
+  }
+
+  const firstDayOfMonthStr = firstDayOfMonth.toISOString().split('T')[0];
+  const lastDayOfMonthStr = lastDayOfMonth.toISOString().split('T')[0];
+  
+  const postsGql = await fetchStrapiGraphQL(`
+    query {
+      posts(
+        sort: "publishDate:desc"
+        filters: { publishDate: { between: ["${firstDayOfMonthStr}", "${lastDayOfMonthStr}"] } }
+        pagination: { limit: 1000 }
+      ) {
+        data {
+          attributes {
+            title
+            publishDate
+            slug
+          }
+        }
+      }
+    }
+  `);
+
+  const posts = postsGql.data.posts.data.map(({ attributes }) => attributes);
+
+  return {
+    props: {
+      year: params.year,
+      month: params.month,
+      posts
+    }
+  }
+}
diff --git a/pages/news/[year]/index.js b/pages/news/[year]/index.js
new file mode 100644
index 00000000..ddae6daf
--- /dev/null
+++ b/pages/news/[year]/index.js
@@ -0,0 +1,72 @@
+import { TimeGrouping } from "@/components/news/time-grouping";
+import { fetchStrapiGraphQL } from "@/lib/strapi";
+import { isValidDate } from "@/utils/date";
+
+export default function YearCatalog({ year, posts }) {
+  return <TimeGrouping
+    year={year}
+    posts={posts}
+  />
+}
+
+export async function getStaticPaths() {
+  const postsGql = await fetchStrapiGraphQL(`query {
+    posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {
+      data {
+        attributes {
+          publishDate
+        }
+      }
+    }
+  }`);
+
+  const yearSet = new Set(postsGql.data.posts.data.map(({  attributes: { publishDate } }) => (
+    new Date(publishDate).getUTCFullYear().toString() 
+  )));
+
+  const paths = Array.from(yearSet).map((year) => ({ params: { year } }));
+
+  return {
+    paths,
+    fallback: 'blocking', 
+  };
+}
+
+export async function getStaticProps({ params }) {
+  const firstDayOfYear = new Date(params.year, 0, 1);
+  const lastDayOfYear = new Date(params.year, 11, 31);
+
+  if (!isValidDate(firstDayOfYear) || !isValidDate(lastDayOfYear)) return {
+    notFound: true,
+  }
+
+  const firstDayOfYearStr = firstDayOfYear.toISOString().split('T')[0];
+  const lastDayOfYearStr = lastDayOfYear.toISOString().split('T')[0];
+  
+  const postsGql = await fetchStrapiGraphQL(`
+    query {
+      posts(
+        sort: "publishDate:desc"
+        filters: { publishDate: { between: ["${firstDayOfYearStr}", "${lastDayOfYearStr}"] } }
+        pagination: { limit: 1000 }
+      ) {
+        data {
+          attributes {
+            title
+            publishDate
+            slug
+          }
+        }
+      }
+    }
+  `);
+
+  const posts = postsGql.data.posts.data.map(({ attributes }) => attributes);
+
+  return {
+    props: {
+      year: params.year,
+      posts
+    }
+  }
+}
diff --git a/utils/date.js b/utils/date.js
new file mode 100644
index 00000000..16921d4d
--- /dev/null
+++ b/utils/date.js
@@ -0,0 +1,7 @@
+/**
+ * Checks if a JS Date object is valid
+ */
+export const isValidDate = (d) => {
+  if (!(d instanceof Date)) return false;
+  return d.toUTCString() !== "Invalid Date"
+}
\ No newline at end of file
diff --git a/utils/slug.js b/utils/slug.js
new file mode 100644
index 00000000..91c34a8f
--- /dev/null
+++ b/utils/slug.js
@@ -0,0 +1,15 @@
+/**
+ * create a slug string from a date
+ * @example ```js
+ * slugFromDate(new Date("2023-02-01"))   // "2023/02/01"
+ * ```
+ */
+export const dateToSlug = (d) => {
+  const date = new Date(d)
+  const [day, month, year] = [
+    date.getUTCDate(),
+    date.getUTCMonth() + 1,
+    date.getUTCFullYear(),
+  ]
+  return `${year}/${month}/${day}`;
+}
\ No newline at end of file

From e20376a103ea972fd6d2e98d6f945fca3784c404 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 13 Nov 2023 23:05:17 -0500
Subject: [PATCH 03/15] add forgotten month prop

---
 pages/news/[year]/[month]/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/news/[year]/[month]/index.js b/pages/news/[year]/[month]/index.js
index ddfd28c8..c486df72 100644
--- a/pages/news/[year]/[month]/index.js
+++ b/pages/news/[year]/[month]/index.js
@@ -5,6 +5,7 @@ import { isValidDate } from "@/utils/date";
 export default function MonthCatalog({ year, month, posts }) {
   return <TimeGrouping
     year={year}
+    month={month}
     posts={posts}
   />
 }

From de3d75a781e3bdb3e079abf6823d3b9ef386b555 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Thu, 16 Nov 2023 11:37:49 -0500
Subject: [PATCH 04/15] add article title, subtitle, and content sections

---
 pages/news/[year]/[month]/[day]/[slug].js | 54 +++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index fcba55bf..d10106da 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -1,10 +1,58 @@
-import { Page } from "@/components/layout";
+import { Page, Section } from "@/components/layout";
 import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
+import { Divider, Typography, Box, Stack } from "@mui/material";
+import { Markdown } from "@/components/markdown";
+import Image from "next/image";
 
 export default function Article({ article }) {
-  return <Page title={article.title} description={article.subtitle}>
-    <pre>{JSON.stringify(article, null, 2)}</pre>
+  return (
+  <Page hideTitle title={article.title} description={article.subtitle}>
+
+    {/* Defines the article width, does not include next/previous article buttons */}
+    <Section>
+      {/* container that holds the date and label on the same line */}
+
+      {/*title moved down here below the date/label line*/}
+      <Typography variant="h1">
+        { article.title }
+      </Typography>
+
+      {/*Subheading/subtitle if one exists*/}
+      {
+        article.subtitle && (
+          <Typography variant="subtitle1">
+            {article.excerpt}
+          </Typography>
+        )
+      }
+
+      <Divider sx={{ margin: '1rem 0'}}/>
+
+        
+      {/*Article content is mapped over because each section is grouped by content type, separating rich text from images*/}
+      {
+        article.content.map((item)=> {
+          return item.__typename == "ComponentPostSectionsImage" ? (
+            <Image 
+              priority
+              src={item.image.url}
+              alt={item.altText}
+              width= {item.image.width}
+              height={item.image.height}
+              layout="responsive"
+              objectFit='cover'
+            />
+          ) : (
+            <Markdown>{item.content}</Markdown>
+          )
+        })
+      }
+
+    {/* <pre>{JSON.stringify(article, null, 2)}</pre> */}
+
+    </Section>
   </Page>
+  )
 }
 
 export async function getStaticPaths() {

From 0041aaf75ef77def14a991d77d2849bb2e83ed89 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Fri, 17 Nov 2023 13:04:03 -0500
Subject: [PATCH 05/15] fix image query for single news article

---
 lib/strapi/newsGraphQL.js                 | 2 ++
 pages/news/[year]/[month]/[day]/[slug].js | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index a902a5c4..278a87ea 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/lib/strapi/newsGraphQL.js
@@ -244,6 +244,8 @@ export const fetchArticle = async (slug) => {
                   data {
                     attributes {
                       url
+                      width
+                      height
                     }
                   }
                 }
diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index d10106da..c00b6e16 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -35,10 +35,10 @@ export default function Article({ article }) {
           return item.__typename == "ComponentPostSectionsImage" ? (
             <Image 
               priority
-              src={item.image.url}
+              src={item.image.data.attributes.url}
               alt={item.altText}
-              width= {item.image.width}
-              height={item.image.height}
+              width= {item.image.data.attributes.width}
+              height={item.image.data.attributes.height}
               layout="responsive"
               objectFit='cover'
             />

From a1d366f335323b4119c79505e91d744f9ce51ab1 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Fri, 17 Nov 2023 13:27:23 -0500
Subject: [PATCH 06/15] add formatted article date to single article page

---
 components/news/article-date.js           | 13 +++++++++++++
 pages/news/[year]/[month]/[day]/[slug].js | 12 ++++++++++++
 utils/date.js                             |  7 +++++++
 3 files changed, 32 insertions(+)
 create mode 100644 components/news/article-date.js

diff --git a/components/news/article-date.js b/components/news/article-date.js
new file mode 100644
index 00000000..89a66f76
--- /dev/null
+++ b/components/news/article-date.js
@@ -0,0 +1,13 @@
+import { styled } from '@mui/system'
+import { formatDate } from '@/utils/date'
+
+export const DateSpan = styled('span')({
+  fontSize: '95%',
+  fontWeight: 'bold',
+  margin: 0,
+  lineHeight: 2,
+})
+
+export const ArticleDate = ({ date }) => {
+  return <DateSpan>{ formatDate(date) }</DateSpan>
+}
\ No newline at end of file
diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index c00b6e16..9f81b349 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -3,6 +3,7 @@ import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
 import { Divider, Typography, Box, Stack } from "@mui/material";
 import { Markdown } from "@/components/markdown";
 import Image from "next/image";
+import { ArticleDate } from "@/components/news/article-date"
 
 export default function Article({ article }) {
   return (
@@ -10,7 +11,18 @@ export default function Article({ article }) {
 
     {/* Defines the article width, does not include next/previous article buttons */}
     <Section>
+
       {/* container that holds the date and label on the same line */}
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+      >
+        <ArticleDate date={article.publishDate}/>
+
+        <div>
+          Label
+        </div>
+      </Stack>
 
       {/*title moved down here below the date/label line*/}
       <Typography variant="h1">
diff --git a/utils/date.js b/utils/date.js
index 16921d4d..1530bbdc 100644
--- a/utils/date.js
+++ b/utils/date.js
@@ -4,4 +4,11 @@
 export const isValidDate = (d) => {
   if (!(d instanceof Date)) return false;
   return d.toUTCString() !== "Invalid Date"
+}
+
+const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+
+export const formatDate = dateString => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', dateOptions)
 }
\ No newline at end of file

From 57a943090360104c9f688aedd8758dcd0be97638 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Fri, 17 Nov 2023 16:47:24 -0500
Subject: [PATCH 07/15] add news or blog tag

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

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 9f81b349..ef5695b5 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -4,6 +4,7 @@ import { Divider, Typography, Box, Stack } from "@mui/material";
 import { Markdown } from "@/components/markdown";
 import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
+import { Tag } from "@/components/news/tag"
 
 export default function Article({ article }) {
   return (
@@ -18,9 +19,9 @@ export default function Article({ article }) {
         justifyContent="space-between"
       >
         <ArticleDate date={article.publishDate}/>
-
+        
         <div>
-          Label
+          <Tag contents={article.newsOrBlog}/>
         </div>
       </Stack>
 

From f563900637905b90b8e0ecc2b6c44a6a0c8d1c83 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 10:12:11 -0500
Subject: [PATCH 08/15] add full name to people tags

---
 lib/strapi/newsGraphQL.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index 278a87ea..a2e78c9f 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/lib/strapi/newsGraphQL.js
@@ -265,7 +265,7 @@ export const fetchArticle = async (slug) => {
   return articleGql.data.posts.data.map(({ attributes }) => ({
     ...attributes,
     renciAuthors: attributes.renciAuthors.data.map(({ attributes }) => attributes),
-    people: attributes.people.data.map(({ attributes }) => attributes),
+    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),

From 848d6ce834074912bc7536514543664d3f7e3b46 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 10:12:49 -0500
Subject: [PATCH 09/15] fix postTags tag for single article view

---
 lib/strapi/newsGraphQL.js                 |  1 +
 pages/news/[year]/[month]/[day]/[slug].js | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/lib/strapi/newsGraphQL.js b/lib/strapi/newsGraphQL.js
index a2e78c9f..066288ca 100644
--- a/lib/strapi/newsGraphQL.js
+++ b/lib/strapi/newsGraphQL.js
@@ -270,5 +270,6 @@ export const fetchArticle = async (slug) => {
     collaborations: attributes.collaborations.data.map(({ attributes }) => attributes),
     projects: attributes.projects.data.map(({ attributes }) => attributes),
     organizations: attributes.organizations.data.map(({ attributes }) => attributes),
+    postTags: attributes.tags.data.map(({ attributes }) => attributes),
   }))[0];
 }
\ No newline at end of file
diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index ef5695b5..4fab5b61 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -7,6 +7,16 @@ import { ArticleDate } from "@/components/news/article-date"
 import { Tag } from "@/components/news/tag"
 
 export default function Article({ article }) {
+  
+  const tags = [
+    article.projects.map((x) => ({ ...x, type: 'projects' })),
+    article.people.map((x) => ({ ...x, type: 'people' })),
+    article.collaborations.map((x) => ({ ...x, type: 'collaborations' })),
+    article.researchGroups.map((x) => ({ ...x, type: 'researchGroups' })),
+    article.organizations.map((x) => ({ ...x, type: 'organizations' })),
+    article.postTags.map((x) => ({ ...x, type: 'postTags' }))
+  ].flat();
+
   return (
   <Page hideTitle title={article.title} description={article.subtitle}>
 

From 5185f40f706e0531ba2f56eee5827edf821cf0c6 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 13:44:40 -0500
Subject: [PATCH 10/15] add clickable link aspect to tags

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

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 4fab5b61..931e6e60 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -5,6 +5,7 @@ import { Markdown } from "@/components/markdown";
 import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
 import { Tag } from "@/components/news/tag"
+import qs from "qs";
 
 export default function Article({ article }) {
   
@@ -17,6 +18,10 @@ export default function Article({ article }) {
     article.postTags.map((x) => ({ ...x, type: 'postTags' }))
   ].flat();
 
+  const createTagLinkURL = (id, type) => {
+    return `/news?${qs.stringify({[type]: id})}`
+  }
+
   return (
   <Page hideTitle title={article.title} description={article.subtitle}>
 
@@ -48,6 +53,22 @@ export default function Article({ article }) {
           </Typography>
         )
       }
+      <Stack direction="row" flexWrap="wrap" gap={1}>
+        {tags.map(({ name, slug, type }, i) => {
+          const id = type === 'postTags' ? name : slug;
+
+          return (
+            <Tag
+              type={type}
+              contents={name}
+              sx={{ minWidth: 'fit-content' }}
+              component="a"
+              href={createTagLinkURL(id, type)}
+              key={i}
+            />
+          )
+        })}
+      </Stack>
 
       <Divider sx={{ margin: '1rem 0'}}/>
 

From 4b4e89d3d1455bf60d9211819119976c4fd39723 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 14:47:41 -0500
Subject: [PATCH 11/15] add related content at bottom of single article

---
 pages/news/[year]/[month]/[day]/[slug].js | 64 ++++++++++++++++++++++-
 style/theme.js                            |  1 +
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 931e6e60..2d037f9a 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -1,3 +1,4 @@
+import { Fragment } from "react"
 import { Page, Section } from "@/components/layout";
 import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
 import { Divider, Typography, Box, Stack } from "@mui/material";
@@ -6,6 +7,7 @@ import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
 import { Tag } from "@/components/news/tag"
 import qs from "qs";
+import { Link } from "@/components/link"
 
 export default function Article({ article }) {
   
@@ -36,7 +38,7 @@ export default function Article({ article }) {
         <ArticleDate date={article.publishDate}/>
         
         <div>
-          <Tag contents={article.newsOrBlog}/>
+          <Typography sx={{textTransform: "capitalize", fontWeight: "500",  padding: "0.25rem 0.5rem", backgroundColor:"#D9D9D9"}}>{article.newsOrBlog}</Typography>
         </div>
       </Stack>
 
@@ -92,8 +94,66 @@ export default function Article({ article }) {
         })
       }
 
-    {/* <pre>{JSON.stringify(article, null, 2)}</pre> */}
+    </Section>
 
+    <Divider sx={{ margin: '1rem 0'}}/>
+
+    <Section title="Read More">
+      {article.researchGroups[0] && (
+        <Fragment>
+          <Typography variant="h3">Research Groups:</Typography>
+          {
+            article.researchGroups.map((item) => (
+              <li><Link to={`researchGroups/${item.slug}`}>{item.name}</Link></li>
+            ))
+          }
+          <br/>
+        </Fragment>
+      )}
+      {article.collaborations[0] && (
+        <Fragment>
+          <Typography variant="h3">Collaborations:</Typography>
+          {
+            article.collaborations.map((item) => (
+              <li><Link to={`collaborations/${item.slug}`}>{item.name}</Link></li>
+            ))
+          }
+          <br/>
+        </Fragment>
+      )}
+      {article.projects[0] && (
+        <Fragment>
+          <Typography variant="h3">Projects:</Typography>
+          {
+            article.projects.map((item) => (
+              <li><Link to={`projects/${item.slug}`}>{item.name}</Link></li>
+            ))
+          }
+          <br/>
+        </Fragment>
+      )}
+      {article.people[0] && (
+        <Fragment>
+          <Typography variant="h3">People:</Typography>
+          {
+            article.people.map((item) => (
+              <li><Link to={`people/${item.slug}`}>{item.name}</Link></li>
+            ))
+          }
+          <br/>
+        </Fragment>
+      )}
+      {article.postTags[0] && (
+        <Fragment>
+          <Typography variant="h3">Post Tags:</Typography>
+          {
+            article.postTags.map((item) => (
+              <li><Link to={`postTags/${item.slug}`}>{item.name}</Link></li>
+            ))
+          }
+          <br/>
+        </Fragment>
+      )}
     </Section>
   </Page>
   )
diff --git a/style/theme.js b/style/theme.js
index 3db7fad7..d6e84537 100644
--- a/style/theme.js
+++ b/style/theme.js
@@ -32,6 +32,7 @@ const typography = {
   },
   h3: {
     fontSize: 'clamp(1.3rem, 0.986rem + 0.571vw, 1.7rem)',
+    paddingBottom: '0.5rem'
   },
   h4: {
     fontSize: 'clamp(1.2rem, 3vw, 1.6rem)',

From 43387343867961e6feeaf58e46a314be1be26bd8 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 15:45:37 -0500
Subject: [PATCH 12/15] change subtitle to correct field name

---
 pages/news/[year]/[month]/[day]/[slug].js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 2d037f9a..980fb63e 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -51,7 +51,7 @@ export default function Article({ article }) {
       {
         article.subtitle && (
           <Typography variant="subtitle1">
-            {article.excerpt}
+            {article.subtitle}
           </Typography>
         )
       }

From 6748df59465b0d8539ea66512742d3d2a782eaf1 Mon Sep 17 00:00:00 2001
From: suejinkim20 <kim.suejin.20@gmail.com>
Date: Mon, 20 Nov 2023 15:46:36 -0500
Subject: [PATCH 13/15] add <ul> to list items

---
 pages/news/[year]/[month]/[day]/[slug].js | 49 ++++++++++-------------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 980fb63e..7b7119ce 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -102,22 +102,26 @@ export default function Article({ article }) {
       {article.researchGroups[0] && (
         <Fragment>
           <Typography variant="h3">Research Groups:</Typography>
-          {
-            article.researchGroups.map((item) => (
-              <li><Link to={`researchGroups/${item.slug}`}>{item.name}</Link></li>
-            ))
-          }
+          <ul>
+            {
+              article.researchGroups.map((item) => (
+                <li><Link to={`/groups/${item.slug}`}>{item.name}</Link></li>
+              ))
+            }
+          </ul>
           <br/>
         </Fragment>
       )}
       {article.collaborations[0] && (
         <Fragment>
           <Typography variant="h3">Collaborations:</Typography>
-          {
-            article.collaborations.map((item) => (
-              <li><Link to={`collaborations/${item.slug}`}>{item.name}</Link></li>
-            ))
-          }
+          <ul>
+            {
+              article.collaborations.map((item) => (
+                <li><Link to={`/collaborations/${item.slug}`}>{item.name}</Link></li>
+              ))
+            }
+          </ul>
           <br/>
         </Fragment>
       )}
@@ -126,7 +130,7 @@ export default function Article({ article }) {
           <Typography variant="h3">Projects:</Typography>
           {
             article.projects.map((item) => (
-              <li><Link to={`projects/${item.slug}`}>{item.name}</Link></li>
+              <li><Link to={`/projects/${item.slug}`}>{item.name}</Link></li>
             ))
           }
           <br/>
@@ -135,22 +139,13 @@ export default function Article({ article }) {
       {article.people[0] && (
         <Fragment>
           <Typography variant="h3">People:</Typography>
-          {
-            article.people.map((item) => (
-              <li><Link to={`people/${item.slug}`}>{item.name}</Link></li>
-            ))
-          }
-          <br/>
-        </Fragment>
-      )}
-      {article.postTags[0] && (
-        <Fragment>
-          <Typography variant="h3">Post Tags:</Typography>
-          {
-            article.postTags.map((item) => (
-              <li><Link to={`postTags/${item.slug}`}>{item.name}</Link></li>
-            ))
-          }
+          <ul>
+            {
+              article.people.map((item) => (
+                <li><Link to={`/people/${item.slug}`}>{item.name}</Link></li>
+              ))
+            }
+          </ul>
           <br/>
         </Fragment>
       )}

From 968db5faa99c22366cdc4bfb03837770f0a6685c Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:57:54 -0500
Subject: [PATCH 14/15] add key to mapped items

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

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 7b7119ce..33fd773a 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -104,8 +104,8 @@ export default function Article({ article }) {
           <Typography variant="h3">Research Groups:</Typography>
           <ul>
             {
-              article.researchGroups.map((item) => (
-                <li><Link to={`/groups/${item.slug}`}>{item.name}</Link></li>
+              article.researchGroups.map((item, i) => (
+                <li key={i}><Link to={`/groups/${item.slug}`}>{item.name}</Link></li>
               ))
             }
           </ul>
@@ -117,8 +117,8 @@ export default function Article({ article }) {
           <Typography variant="h3">Collaborations:</Typography>
           <ul>
             {
-              article.collaborations.map((item) => (
-                <li><Link to={`/collaborations/${item.slug}`}>{item.name}</Link></li>
+              article.collaborations.map((item, i) => (
+                <li key={i}><Link to={`/collaborations/${item.slug}`}>{item.name}</Link></li>
               ))
             }
           </ul>
@@ -129,8 +129,8 @@ export default function Article({ article }) {
         <Fragment>
           <Typography variant="h3">Projects:</Typography>
           {
-            article.projects.map((item) => (
-              <li><Link to={`/projects/${item.slug}`}>{item.name}</Link></li>
+            article.projects.map((item, i) => (
+              <li key={i}><Link to={`/projects/${item.slug}`}>{item.name}</Link></li>
             ))
           }
           <br/>
@@ -141,8 +141,8 @@ export default function Article({ article }) {
           <Typography variant="h3">People:</Typography>
           <ul>
             {
-              article.people.map((item) => (
-                <li><Link to={`/people/${item.slug}`}>{item.name}</Link></li>
+              article.people.map((item, i) => (
+                <li key={i}><Link to={`/people/${item.slug}`}>{item.name}</Link></li>
               ))
             }
           </ul>

From 97f8da0d391064c547efedcaa7a98fe1fae185f6 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:43:01 -0500
Subject: [PATCH 15/15] use next link and fix rever maxWidth on tags

---
 pages/news/[year]/[month]/[day]/[slug].js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
index 33fd773a..daf7fe86 100644
--- a/pages/news/[year]/[month]/[day]/[slug].js
+++ b/pages/news/[year]/[month]/[day]/[slug].js
@@ -60,14 +60,13 @@ export default function Article({ article }) {
           const id = type === 'postTags' ? name : slug;
 
           return (
-            <Tag
-              type={type}
-              contents={name}
-              sx={{ minWidth: 'fit-content' }}
-              component="a"
-              href={createTagLinkURL(id, type)}
-              key={i}
-            />
+            <Link key={i} to={createTagLinkURL(id, type)}>
+              <Tag
+                type={type}
+                contents={name}
+                sx={{ minWidth: 'fit-content', maxWidth: 'revert' }}
+              />
+            </Link>
           )
         })}
       </Stack>