refactor: use Canto asset for homepage

.eslintignore

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

app/[locale]/[...uriSegments]/page.tsx

@@ -2,16 +2,15 @@ import { FunctionComponent } from "react";
 import { Metadata, ResolvingMetadata } from "next";
 import { draftMode } from "next/headers";
 import { notFound, redirect } from "next/navigation";
-import { OpenGraph } from "next/dist/lib/metadata/types/opengraph-types";
 import striptags from "striptags";
 import { getBreadcrumbsById, getEntryMetadataByUri } from "@/lib/api/metadata";
 import {
   getEntriesByLocale,
   getEntrySectionByUri,
 } from "@/lib/api/entries/index";
 import { getEntryDataByUri } from "@/lib/api/entry";
-import { getReleaseOpenGraph } from "@/lib/api/noirlab";
-import { resizeCantoImage } from "@/lib/api/canto/resize";
+import { generateReleaseMetadata } from "@/lib/api/noirlab";
+import { pickFeaturedImage } from "@/lib/helpers/metadata";
 import PageTemplate from "@/components/templates/Page";
 import NewsPageTemplate from "@/components/templates/NewsPage";
 import GlossaryPageTemplate from "@/components/templates/GlossaryPage";
@@ -20,39 +19,6 @@ import SlideshowPageTemplate from "@/components/templates/SlideshowPage";
 import StaffPageTemplate from "@/components/templates/StaffPage";
 import EventPageTemplate from "@/components/templates/EventPage";
 
-const pickFeaturedImage = async (
-  locale: string,
-  image?: any,
-  cantoAsset?: any,
-  pressReleaseId?: string
-): Promise<OpenGraph["images"] | undefined> => {
-  if (pressReleaseId) {
-    const releaseOpenGraphImage = await getReleaseOpenGraph(
-      locale,
-      pressReleaseId
-    );
-
-    return releaseOpenGraphImage;
-  }
-
-  if (cantoAsset) {
-    const {
-      width,
-      height,
-      url: { directUrlPreview },
-    } = cantoAsset;
-    const url = resizeCantoImage(directUrlPreview, 800);
-
-    return { url, width, height };
-  }
-
-  if (image) {
-    const { url, width, height, altText: alt } = image;
-
-    return { url, width, height, alt };
-  }
-};
-
 export async function generateMetadata(
   { params: { locale, uriSegments }, searchParams = {} }: UriSegmentProps,
   parent: ResolvingMetadata
@@ -80,14 +46,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),

app/[locale]/page.tsx

@@ -1,14 +1,15 @@
 import { FunctionComponent } from "react";
-import { Metadata } from "next";
+import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { draftMode } from "next/headers";
+import { pickFeaturedImage } from "@/lib/helpers/metadata";
 import { getHomepage, getHomepageMetadata } from "@/lib/api/homepage";
 import HomePageTemplate from "@/templates/HomePage";
 
-export async function generateMetadata({
-  params: { locale },
-  searchParams = {},
-}: LocaleProps): Promise<Metadata> {
+export async function generateMetadata(
+  { params: { locale }, searchParams = {} }: LocaleProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
   let previewToken: string | undefined;
 
   if (draftMode().isEnabled) {
@@ -17,11 +18,22 @@ export async function generateMetadata({
       : searchParams?.preview;
   }
 
+  const { openGraph } = await parent;
+
   const {
-    entry: { title, description },
+    entry: { title, description, hero, cantoHero },
   } = await getHomepageMetadata(locale, previewToken);
 
-  return { title, description };
+  const images =
+    (await pickFeaturedImage(hero[0], cantoHero[0])) || openGraph?.images;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      images,
+    },
+  };
 }
 
 const RootPage: FunctionComponent<LocaleProps> = async ({
@@ -43,7 +55,7 @@ const RootPage: FunctionComponent<LocaleProps> = async ({
     notFound();
   }
 
-  return <HomePageTemplate data={data} />;
+  return <HomePageTemplate {...{ locale, data }} />;
 };
 
 export default RootPage;

components/content-blocks/AccordionGroup/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Accordion, Container } from "@rubin-epo/epo-react-lib";

components/content-blocks/Callout/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import CalloutTwoTone from "./CalloutTwoTone";
 import CalloutMain from "./CalloutMain";

components/content-blocks/ComplexTable/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import * as EPOLib from "@rubin-epo/epo-react-lib";
 import { useGlobalData } from "@/lib/utils";

components/content-blocks/Contact/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import ContactInfo from "@/global/ContactInfo";

components/content-blocks/ContactStaff/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Container } from "@rubin-epo/epo-react-lib";

components/content-blocks/DownloadList/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { fileSize } from "@/helpers";
 import * as Styled from "./styles";

components/content-blocks/Embed/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { containerFullBleed } from "@/styles/globalStyles";

components/content-blocks/GridBlock/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Container, MixedLink } from "@rubin-epo/epo-react-lib";

components/content-blocks/Image/styles.js

@@ -1,3 +1,4 @@
+"use client";
 import styled from "styled-components";
 import { containerNarrow, respond, tokens } from "@/styles/globalStyles";
 

components/content-blocks/KeyNumbersGridBlock/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { mixedLinkShape } from "@/shapes/link";
 import * as Styled from "./styles";

components/content-blocks/PeopleBlock/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container } from "@rubin-epo/epo-react-lib";
 import { imageShaper } from "@/lib/utils";

components/content-blocks/PublicationsList/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container } from "@rubin-epo/epo-react-lib";
 import { mixedLinkShape } from "@/shapes/link";

components/content-blocks/Schedule/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Container } from "@rubin-epo/epo-react-lib";

components/content-blocks/ShareBlock/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { Share } from "@/components/atomic";
 import { Container } from "@rubin-epo/epo-react-lib";
 

components/content-blocks/SimpleTable/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import PropTypes from "prop-types";
 import * as EPOLib from "@rubin-epo/epo-react-lib";

components/content-blocks/SlideBlock/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import striptags from "striptags";

components/content-blocks/SummitStatus/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container } from "@rubin-epo/epo-react-lib";
 import { WeatherUnitProvider } from "@/contexts/WeatherUnit";

components/content-blocks/TableGroup/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container } from "@rubin-epo/epo-react-lib";
 import { Tab } from "@headlessui/react";

components/content-blocks/Text/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container } from "@rubin-epo/epo-react-lib";
 

components/content-blocks/Video/index.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { Container, Video, Figure } from "@rubin-epo/epo-react-lib";
 import { useIsMounted } from "@/hooks";

components/dynamic/TempList/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";

components/factories/ContentBlockFactory.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import {
   Image,

components/layout/Tabs/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useRef, Children, cloneElement } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";

components/molecules/Hero/index.tsx

@@ -0,0 +1,42 @@
+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;
+
+  const { srcSet = [] } = imageData;
+
+  const blurImage = srcSet[0]?.src ? `url('${srcSet[0]?.src}')` : undefined;
+
+  return (
+    <Styled.HeroContainer
+      data-cy="hero"
+      style={{
+        "--image-background-hero": blurImage,
+        "--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/molecules/Hero/styles.ts

@@ -0,0 +1,29 @@
+"use client";
+import styled from "styled-components";
+import { fluidScale } from "@/styles/globalStyles";
+import Image from "@rubin-epo/epo-react-lib/Image";
+
+export const HeroContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: var(--Hero-height, ${fluidScale("540px", "400px")});
+  overflow: hidden;
+  position: relative;
+`;
+
+export const HeroImage = styled(Image)`
+  color: transparent;
+  background-image: var(--image-background-hero, none);
+  background-size: cover;
+  background-position: var(--Hero-object-position, center);
+  background-repeat: no-repeat;
+
+  width: unset;
+  height: unset;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: var(--Hero-object-position, center);
+`;