feat: server rendered press releases + tests

lsst-epo · Oct 14, 2024 · c20982f · c20982f
1 parent d701799
commit c20982f
Show file tree

Hide file tree

Showing 20 changed files with 3,668 additions and 138 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,5 @@
 .next/*
 node_modules
 out/*
-storybook-static/*
+storybook-static/*
+lib/api/noirlab/codegen/*
diff --git a/app/[locale]/[...uriSegments]/page.tsx b/app/[locale]/[...uriSegments]/page.tsx
@@ -10,7 +10,7 @@ import {
   getEntrySectionByUri,
 } from "@/lib/api/entries/index";
 import { getEntryDataByUri } from "@/lib/api/entry";
-import { getReleaseOpenGraph } from "@/lib/api/noirlab";
+import { generateReleaseMetadata } from "@/lib/api/noirlab";
 import { resizeCantoImage } from "@/lib/api/canto/resize";
 import PageTemplate from "@/components/templates/Page";
 import NewsPageTemplate from "@/components/templates/NewsPage";
@@ -21,20 +21,9 @@ import StaffPageTemplate from "@/components/templates/StaffPage";
 import EventPageTemplate from "@/components/templates/EventPage";
 
 const pickFeaturedImage = async (
-  locale: string,
   image?: any,
-  cantoAsset?: any,
-  pressReleaseId?: string
+  cantoAsset?: any
 ): Promise<OpenGraph["images"] | undefined> => {
-  if (pressReleaseId) {
-    const releaseOpenGraphImage = await getReleaseOpenGraph(
-      locale,
-      pressReleaseId
-    );
-
-    return releaseOpenGraphImage;
-  }
-
   if (cantoAsset) {
     const {
       width,
@@ -80,14 +69,14 @@ export async function generateMetadata(
     pressReleaseId,
   } = entry;
 
-  const featuredImage = await pickFeaturedImage(
-    locale,
-    image[0],
-    cantoAssetSingle[0],
-    pressReleaseId
-  );
   const previousImages = (await parent).openGraph?.images || [];
 
+  if (pressReleaseId) {
+    return generateReleaseMetadata(pressReleaseId, locale);
+  }
+
+  const featuredImage = await pickFeaturedImage(image[0], cantoAssetSingle[0]);
+
   return {
     title,
     description: striptags(description),

diff --git a/components/content-blocks/GridBlock/NewsGrid.js b/components/content-blocks/GridBlock/NewsGrid.js
@@ -42,7 +42,6 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => {
             (
               {
                 date,
-                release_date: releaseDate,
                 description,
                 subtitle,
                 id,
@@ -70,7 +69,7 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => {
                 isFeature={i === 0}
                 link={uri}
                 pretitle={postType?.[0]?.title ? postType[0].title : " "}
-                subtitle={makeDateString(date || releaseDate, lang)}
+                subtitle={makeDateString(date, lang)}
                 text={makeTruncatedString(subtitle || description, 30)}
                 title={title}
                 type="news"

diff --git a/components/dynamic/NewsList/index.js b/components/dynamic/NewsList/index.js
@@ -48,7 +48,6 @@ const NewsList = ({
                 (
                   {
                     date,
-                    release_date: releaseDate,
                     description,
                     subtitle,
                     id,
@@ -84,7 +83,7 @@ const NewsList = ({
                         ? postType[0].title
                         : null
                     }
-                    subtitle={makeDateString(date || releaseDate, lang)}
+                    subtitle={makeDateString(date, lang)}
                     text={makeTruncatedString(description || subtitle, 30)}
                     title={title}
                     titleTag={"h2"}

diff --git a/components/templates/NewsPage/Contacts.js b/components/templates/NewsPage/Contacts.js
@@ -1,5 +1,4 @@
 import PropTypes from "prop-types";
-import Link from "next/link";
 import { useTranslation } from "react-i18next";
 import * as Styled from "./styles";
 
@@ -10,73 +9,71 @@ export default function Contacts({ contacts }) {
   return (
     <>
       <Styled.ArticleHeading>{t(`news.contacts`)}</Styled.ArticleHeading>
-      <div>
+      <Styled.ContactList>
         {contacts.map((contact, i) => {
           const { name, affiliation, city, telephone, email } = contact;
           return (
-            <Styled.ContactList key={`contact-${i}`}>
-              {name && (
-                <Styled.ContactListItem>
-                  <Styled.IconWrapper className="name">
-                    <Styled.ContactListItemIcon
-                      icon="Account"
-                      size={iconSize}
-                    />
-                  </Styled.IconWrapper>
-                  <div className="c-content-rte">
-                    <p>{name}</p>
-                  </div>
-                </Styled.ContactListItem>
-              )}
-              {affiliation && (
-                <Styled.ContactListItem>
-                  <Styled.IconWrapper className="affiliation">
-                    <Styled.ContactListItemIcon icon="Globe" size={iconSize} />
-                  </Styled.IconWrapper>
-                  <div className="c-content-rte">
-                    <p>{affiliation}</p>
-                  </div>
-                </Styled.ContactListItem>
-              )}
-              {city && (
-                <Styled.ContactListItem>
-                  <Styled.IconWrapper className="city">
-                    <Styled.ContactListItemIcon icon="Team" size={iconSize} />
-                  </Styled.IconWrapper>
-                  <div className="c-content-rte">
-                    <p>{city}</p>
-                  </div>
-                </Styled.ContactListItem>
-              )}
-              {telephone && (
-                <Styled.ContactListItem>
-                  <Styled.IconWrapper className="telephone">
-                    <Styled.ContactListItemIcon icon="Phone" size={iconSize} />
-                  </Styled.IconWrapper>
-                  <div className="c-content-rte">
-                    <a href={`tel:${telephone}`}>{telephone}</a>
-                    <Link prefetch={false} href={`tel:${telephone}`}>
-                      {telephone}
-                    </Link>
-                  </div>
-                </Styled.ContactListItem>
-              )}
-              {email && (
-                <Styled.ContactListItem>
-                  <Styled.IconWrapper className="email">
-                    <Styled.ContactListItemIcon icon="Mail" />
-                  </Styled.IconWrapper>
-                  <div className="c-content-rte">
-                    <Link prefetch={false} href={`mailto:${email}`}>
-                      {email}
-                    </Link>
-                  </div>
-                </Styled.ContactListItem>
-              )}
-            </Styled.ContactList>
+            <li key={name}>
+              <Styled.Contact>
+                {name && (
+                  <Styled.ContactRow>
+                    <Styled.IconWrapper className="name">
+                      <Styled.ContactListItemIcon
+                        icon="Account"
+                        size={iconSize}
+                      />
+                    </Styled.IconWrapper>
+                    <div className="c-content-rte">{name}</div>
+                  </Styled.ContactRow>
+                )}
+                {affiliation && (
+                  <Styled.ContactRow>
+                    <Styled.IconWrapper className="affiliation">
+                      <Styled.ContactListItemIcon
+                        icon="Globe"
+                        size={iconSize}
+                      />
+                    </Styled.IconWrapper>
+                    <div className="c-content-rte">{affiliation}</div>
+                  </Styled.ContactRow>
+                )}
+                {city && (
+                  <Styled.ContactRow>
+                    <Styled.IconWrapper className="city">
+                      <Styled.ContactListItemIcon icon="Team" size={iconSize} />
+                    </Styled.IconWrapper>
+                    <div className="c-content-rte">{city}</div>
+                  </Styled.ContactRow>
+                )}
+                {telephone && (
+                  <Styled.ContactRow>
+                    <Styled.IconWrapper className="telephone">
+                      <Styled.ContactListItemIcon
+                        icon="Phone"
+                        size={iconSize}
+                      />
+                    </Styled.IconWrapper>
+                    <div className="c-content-rte">
+                      <a href={`tel:${telephone}`}>{telephone}</a>
+                      <a href={`tel:${telephone}`}>{telephone}</a>
+                    </div>
+                  </Styled.ContactRow>
+                )}
+                {email && (
+                  <Styled.ContactRow>
+                    <Styled.IconWrapper className="email">
+                      <Styled.ContactListItemIcon icon="Mail" />
+                    </Styled.IconWrapper>
+                    <div className="c-content-rte">
+                      <a href={`mailto:${email}`}>{email}</a>
+                    </div>
+                  </Styled.ContactRow>
+                )}
+              </Styled.Contact>
+            </li>
           );
         })}
-      </div>
+      </Styled.ContactList>
     </>
   );
 }

diff --git a/components/templates/NewsPage/NewsArticle.js b/components/templates/NewsPage/NewsArticle.js
@@ -22,16 +22,13 @@ export default function NewsArticle({ data }) {
     subtitle,
     contacts,
     links,
-    /* eslint-disable camelcase */
-    more_information: moreInformation,
-    release_date: releaseDate,
-    /* eslint-enable camelcase */
+    moreInformation,
     headline,
     releaseUrl,
   } = data;
 
   const { t } = useTranslation();
-  const localizedDate = useDateString(date || releaseDate);
+  const localizedDate = useDateString(date);
   const { ref } = useResizeObserver({
     box: "border-box",
     onResize: ({ height }) => {
@@ -58,7 +55,7 @@ export default function NewsArticle({ data }) {
           {subtitle && (
             <Styled.SubtitleSecondary>{subtitle}</Styled.SubtitleSecondary>
           )}
-          <Styled.Pretitle className="t-heading-quaternary">
+          <Styled.Pretitle dateTime={date} className="t-heading-quaternary">
             {localizedDate}
           </Styled.Pretitle>
           <Styled.Subtitle>{description || headline}</Styled.Subtitle>
@@ -69,6 +66,7 @@ export default function NewsArticle({ data }) {
       {releaseDescription && (
         <Container paddingSize="medium">
           <div
+            data-cy="press-release-text"
             dangerouslySetInnerHTML={{ __html: releaseDescription }}
             className="c-content-rte"
           />

diff --git a/components/templates/NewsPage/NewsHero.js b/components/templates/NewsPage/NewsHero.js
@@ -17,9 +17,9 @@ export default function NewsHero({
   if (caption)
     return (
       <Styled.HeroFigure className={className}>
-        <Styled.HeroImageContainer>
+        <Styled.HeroImageContainer data-cy="hero">
           <Styled.HeroImage
-            image={imageData}
+            image={{ ...imageData, priority: true }}
             $focalPointX={focalPointX || 50}
             $focalPointY={focalPointY || 50}
           />
@@ -29,10 +29,10 @@ export default function NewsHero({
     );
 
   return (
-    <Styled.Hero className={className}>
+    <Styled.Hero className={className} data-cy="hero">
       <Styled.HeroImage
         role="presentation"
-        image={imageData}
+        image={{ ...imageData, priority: true }}
         $focalPointX={focalPointX || 50}
         $focalPointY={focalPointY || 50}
       />

diff --git a/components/templates/NewsPage/index.js → components/templates/NewsPage/client.js b/components/templates/NewsPage/index.js → components/templates/NewsPage/client.js
@@ -1,24 +1,16 @@
 "use client";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import {
-  getSiteString,
-  useCustomBreadcrumbs,
-  makeReleaseFeature,
-} from "@/lib/utils";
-import { useRelease } from "@/lib/api/noirlabReleases";
+import { useCustomBreadcrumbs } from "@/lib/utils";
 import Breadcrumbs from "@/page/Breadcrumbs";
 import NewsHero from "./NewsHero";
 import NewsArticle from "./NewsArticle";
 import NewsList from "@/dynamic/NewsList";
 import NewsAside from "@/components/page/Aside/patterns/Media";
 import * as Styled from "./styles";
+import { getReleaseHero } from "@/lib/api/noirlab";
 
 export default function NewsPage({ data }) {
-  const { data: entryWithRelease } = useRelease(
-    getSiteString(data?.siteHandle || "default"),
-    data
-  );
   const {
     contentBlocksNews = [],
     hero = [],
@@ -32,10 +24,11 @@ export default function NewsPage({ data }) {
     uri,
     images: releaseImages,
     videos: releaseVideos,
-  } = entryWithRelease || data;
+  } = data;
 
-  const heroImage =
-    hero?.length > 0 ? hero : makeReleaseFeature(releaseImages, "banner1920");
+  if (hero.length === 0 && releaseImages) {
+    hero.push(getReleaseHero(releaseImages));
+  }
 
   const { t } = useTranslation();
 
@@ -74,7 +67,7 @@ export default function NewsPage({ data }) {
     }
   });
   // If there is a hero then combine it with the content block media assets
-  if (heroBlock) mediaContentBlocks.unshift(heroBlock);
+  if (heroBlock && !releaseImages) mediaContentBlocks.unshift(heroBlock);
 
   // Only show the aside if there are news assets
   const showAside =
@@ -89,14 +82,12 @@ export default function NewsPage({ data }) {
       <Breadcrumbs breadcrumbs={[...customBreadcrumbs, pageLink]} />
       <NewsHero
         caption={heroCaption}
-        data={heroImage}
+        data={hero}
         narrowCaption={showAside}
         {...{ focalPointX, focalPointY }}
       />
       <Styled.NewsDetail $showAside={showAside}>
-        {(entryWithRelease || data) && (
-          <NewsArticle data={entryWithRelease || data} />
-        )}
+        {data && <NewsArticle data={data} />}
         {showAside && (
           <NewsAside
             manualAssets={manualAssets}