Eager load top banner images and better metadata on homepage

app/[...slug]/page.tsx

@@ -29,7 +29,7 @@ export const generateMetadata = async ({params}: PageProps): Promise<Metadata> =
   if (!await pathIsValid(path, 'node')) return {};
 
   try {
-    const routeInfo = await getEntityFromPath<NodeUnion>(path, isDraftMode())
+    const routeInfo = await getEntityFromPath<NodeUnion>(path)
     if (routeInfo?.entity) return getNodeMetadata(routeInfo.entity);
   } catch (e) {
   }

app/page.tsx

@@ -1,11 +1,13 @@
 import Rows from "@components/paragraphs/rows/rows";
-import Paragraph from "@components/paragraphs/paragraph";
 import {notFound} from "next/navigation";
 import {getEntityFromPath} from "@lib/gql/fetcher";
-import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordPage, NodeUnion} from "@lib/gql/__generated__/drupal";
 import {isDraftMode} from "@lib/drupal/utils";
+import {Metadata} from "next";
+import {getNodeMetadata} from "./[...slug]/metadata";
+import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
 
-// Cache the home page for 24 hours. It should be the most modified and probably changes most frequent.
+// Cache the home page for 24 hours. It's the most likely to have view paragraphs, so let it invalidate more often.
 export const revalidate = 86400;
 
 const Home = async () => {
@@ -14,9 +16,9 @@ const Home = async () => {
 
   return (
     <article>
-      {routeInfo.entity.suPageBanner &&
+      {routeInfo.entity.suPageBanner?.__typename === 'ParagraphStanfordBanner' &&
         <header aria-label="Home Page banner">
-          <Paragraph paragraph={routeInfo.entity.suPageBanner}/>
+          <BannerParagraph paragraph={routeInfo.entity.suPageBanner} eagerLoadImage/>
         </header>
       }
       {routeInfo.entity.suPageComponents &&
@@ -26,4 +28,13 @@ const Home = async () => {
   )
 }
 
+export const generateMetadata = async (): Promise<Metadata> => {
+  try {
+    const routeInfo = await getEntityFromPath<NodeUnion>('/')
+    if (routeInfo?.entity) return getNodeMetadata(routeInfo.entity);
+  } catch (e) {
+  }
+  return {}
+}
+
 export default Home;

src/components/nodes/pages/stanford-news/stanford-news-page.tsx

@@ -72,6 +72,7 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
               alt={bannerImageAlt}
               fill
               className="object-cover"
+              loading="eager"
             />
           </div>
           {node.suNewsBannerMediaCaption &&

src/components/nodes/pages/stanford-page/stanford-page-page.tsx

@@ -1,9 +1,9 @@
 import Rows from "@components/paragraphs/rows/rows";
 import InteriorPage from "@components/layouts/interior-page";
-import Paragraph from "@components/paragraphs/paragraph";
 import {H1} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal";
+import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
@@ -15,9 +15,9 @@ const StanfordPagePage = ({node, ...props}: Props) => {
 
   return (
     <article {...props}>
-      {node.suPageBanner &&
+      {node.suPageBanner?.__typename === 'ParagraphStanfordBanner' &&
         <header aria-label="Page banner">
-          <Paragraph paragraph={node.suPageBanner}/>
+          <BannerParagraph paragraph={node.suPageBanner} eagerLoadImage/>
         </header>
       }
       <H1 className="mt-32 centered">

src/components/nodes/pages/stanford-person/stanford-person-page.tsx

@@ -29,6 +29,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
               alt=""
               fill
               className="rounded-full"
+              loading="eager"
             />
           </div>
         }

src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx

@@ -10,6 +10,7 @@ type Props = {
     imageUrl: string
     imageAlt?: Maybe<string>
     placeholder?: Maybe<string>
+    loading?: 'lazy' | 'eager'
   }
   header?: Maybe<string>
   supHeader?: Maybe<string>
@@ -31,6 +32,7 @@ const BannerParagraphDisplay = ({media, header, supHeader, body, link}: Props) =
             alt={imageAlt ?? ""}
             fill
             className="object-cover"
+            loading={media?.loading || 'lazy'}
           />
         }
       </div>

src/components/paragraphs/stanford-banner/banner-paragraph.tsx

@@ -5,17 +5,18 @@ import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordBanner
+  eagerLoadImage?: boolean
 }
 
-const BannerParagraph: React.FC<Props> = ({paragraph, ...props}: Props) => {
+const BannerParagraph: React.FC<Props> = ({paragraph, eagerLoadImage, ...props}: Props) => {
   const image = getMediaFromEntityField<Image>(paragraph.suBannerImage);
   const imageUrl = image?.url
   const imageAlt = image?.alt || '';
 
   return (
     <div {...props}>
       <BannerParagraphDisplay
-        media={imageUrl ? {imageUrl, imageAlt} : undefined}
+        media={imageUrl ? {imageUrl, imageAlt, loading: eagerLoadImage ? 'eager' : 'lazy'} : undefined}
         header={paragraph.suBannerHeader}
         supHeader={paragraph.suBannerSupHeader}
         body={paragraph.suBannerBody?.processed}