chore(release)

.eslintignore

@@ -1,4 +1,5 @@
 .next/*
 node_modules
 out/*
-storybook-static/*
+storybook-static/*
+lib/api/noirlab/codegen/*

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

components/molecules/Hero/index.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import * as Styled from "./styles";
+
+interface HeroProps {
+  data: Array<any>;
+  focalPointX?: number;
+  focalPointY?: number;
+  className?: string;
+}
+const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
+  data,
+  focalPointX = 50,
+  focalPointY = 50,
+  className,
+  children,
+}) => {
+  const imageData = data && data[0];
+
+  if (!imageData?.url) return null;
+
+  return (
+    <Styled.HeroContainer
+      data-cy="hero"
+      style={{
+        "--Hero-object-position": `${focalPointX || 50}% ${focalPointY || 50}%`,
+      }}
+      className={className}
+    >
+      <Styled.HeroImage image={{ ...imageData, priority: true }} />
+      {children}
+    </Styled.HeroContainer>
+  );
+};
+
+Hero.displayName = "Molecule.Hero";
+
+export default Hero;

components/page/Hero/styles.js → components/molecules/Hero/styles.ts

@@ -1,6 +1,7 @@
+"use client";
 import styled from "styled-components";
 import { fluidScale, containerFullBleed } from "@/styles/globalStyles";
-import { Image } from "@rubin-epo/epo-react-lib";
+import Image from "@rubin-epo/epo-react-lib/Image";
 
 export const HeroContainer = styled.div`
   ${containerFullBleed("CONTAINER_FULL")}
@@ -10,10 +11,6 @@ export const HeroContainer = styled.div`
 `;
 
 export const HeroImage = styled(Image)`
-  --Hero-object-position: ${({ $focalPointX, $focalPointY }) =>
-    `${$focalPointX}% ${$focalPointY}%;`}
-  width: 100%;
-
   /* stylelint-disable declaration-no-important */
   height: 100% !important;
   object-fit: cover;

components/page/PageContent/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import HeroComponent from "@/page/Hero";
+import HeroComponent from "@/components/molecules/Hero";
 import {
   fluidScale,
   respond,
@@ -23,8 +23,6 @@ export const Hero = styled(HeroComponent)`
     WIDE_BREAKPOINT,
     MOBILE_BREAKPOINT
   )};
-  --Hero-object-position: ${({ $focalPointX, $focalPointY }) =>
-    `${$focalPointX}% ${$focalPointY}%;`}
   --hero-overlap: ${HERO_OVERLAP};
 `;
 

components/templates/EventPage/index.js

@@ -6,7 +6,7 @@ import {
   createLocationString,
   useCustomBreadcrumbs,
 } from "@/lib/utils";
-import Hero from "@/page/Hero";
+import Hero from "@/components/molecules/Hero";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
 import { Share } from "@/content-blocks";
 import Breadcrumbs from "@/page/Breadcrumbs";

components/templates/HomePage/index.js

@@ -2,7 +2,7 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
-import Hero from "@/page/Hero";
+import Hero from "@/components/molecules/Hero";
 import { Buttonish, MixedLink } from "@rubin-epo/epo-react-lib";
 import { makeDateString, makeTruncatedString } from "@/lib/utils";
 import { SlideBlock } from "@/components/content-blocks";

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>
     </>
   );
 }

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"
           />