From 0f9ce15b39e717cfd8557c16bbecb2587050f4b8 Mon Sep 17 00:00:00 2001 From: Mike Decker Date: Mon, 8 Jan 2024 14:51:32 -0800 Subject: [PATCH] Eager load top banner images and better metadata on homepage --- app/[...slug]/page.tsx | 2 +- app/page.tsx | 21 ++++++++++++++----- .../stanford-news/stanford-news-page.tsx | 1 + .../stanford-page/stanford-page-page.tsx | 6 +++--- .../stanford-person/stanford-person-page.tsx | 1 + .../banner-paragraph-display.tsx | 2 ++ .../stanford-banner/banner-paragraph.tsx | 5 +++-- 7 files changed, 27 insertions(+), 11 deletions(-) diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx index ff583de3..66c33d67 100644 --- a/app/[...slug]/page.tsx +++ b/app/[...slug]/page.tsx @@ -29,7 +29,7 @@ export const generateMetadata = async ({params}: PageProps): Promise = if (!await pathIsValid(path, 'node')) return {}; try { - const routeInfo = await getEntityFromPath(path, isDraftMode()) + const routeInfo = await getEntityFromPath(path) if (routeInfo?.entity) return getNodeMetadata(routeInfo.entity); } catch (e) { } diff --git a/app/page.tsx b/app/page.tsx index 3b4363bc..864da68f 100644 --- a/app/page.tsx +++ b/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 (
- {routeInfo.entity.suPageBanner && + {routeInfo.entity.suPageBanner?.__typename === 'ParagraphStanfordBanner' &&
- +
} {routeInfo.entity.suPageComponents && @@ -26,4 +28,13 @@ const Home = async () => { ) } +export const generateMetadata = async (): Promise => { + try { + const routeInfo = await getEntityFromPath('/') + if (routeInfo?.entity) return getNodeMetadata(routeInfo.entity); + } catch (e) { + } + return {} +} + export default Home; \ No newline at end of file diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx index 6c30c145..e962314c 100644 --- a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx +++ b/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" /> {node.suNewsBannerMediaCaption && diff --git a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx b/src/components/nodes/pages/stanford-page/stanford-page-page.tsx index 296f42cb..eb9ea08c 100644 --- a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx +++ b/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 & { node: NodeStanfordPage @@ -15,9 +15,9 @@ const StanfordPagePage = ({node, ...props}: Props) => { return (
- {node.suPageBanner && + {node.suPageBanner?.__typename === 'ParagraphStanfordBanner' &&
- +
}

diff --git a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx b/src/components/nodes/pages/stanford-person/stanford-person-page.tsx index bd2d0e5c..5991d027 100644 --- a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx +++ b/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" /> } diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx index cdd84598..985e1eb0 100644 --- a/src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx +++ b/src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx @@ -10,6 +10,7 @@ type Props = { imageUrl: string imageAlt?: Maybe placeholder?: Maybe + loading?: 'lazy' | 'eager' } header?: Maybe supHeader?: Maybe @@ -31,6 +32,7 @@ const BannerParagraphDisplay = ({media, header, supHeader, body, link}: Props) = alt={imageAlt ?? ""} fill className="object-cover" + loading={media?.loading || 'lazy'} /> } diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx index 337cec18..90170e22 100644 --- a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx +++ b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx @@ -5,9 +5,10 @@ import {getMediaFromEntityField} from "@lib/drupal/get-media-from-entity"; type Props = HtmlHTMLAttributes & { paragraph: ParagraphStanfordBanner + eagerLoadImage?: boolean } -const BannerParagraph: React.FC = ({paragraph, ...props}: Props) => { +const BannerParagraph: React.FC = ({paragraph, eagerLoadImage, ...props}: Props) => { const image = getMediaFromEntityField(paragraph.suBannerImage); const imageUrl = image?.url const imageAlt = image?.alt || ''; @@ -15,7 +16,7 @@ const BannerParagraph: React.FC = ({paragraph, ...props}: Props) => { return (