Add new page title banner for basic pages

pookmish · Feb 28, 2024 · 1d32657 · 1d32657
1 parent 5750552
commit 1d32657
Show file tree

Hide file tree

Showing 24 changed files with 308 additions and 197 deletions.
diff --git a/app/[...slug]/metadata.tsx b/app/[...slug]/metadata.tsx
@@ -50,11 +50,10 @@ export const getNodeMetadata = (node: NodeUnion): Metadata => {
 }
 
 const getBasicPageMetaData = (node: NodeStanfordPage) => {
-  const pageImage = node.suPageImage?.mediaImage
-  const bannerImage = node.suPageBanner?.suBannerImage?.mediaImage;
+  const pageTitleBannerImage = node.suPageBanner?.__typename === "ParagraphStanfordPageTitleBanner" && node.suPageBanner.suTitleBannerImage.mediaImage;
+  const bannerImage = node.suPageBanner?.__typename === "ParagraphStanfordBanner" && node.suPageBanner.suBannerImage?.mediaImage;
+  const image = node.suPageImage?.mediaImage || pageTitleBannerImage || bannerImage;
 
-  const imageUrl = pageImage?.url || bannerImage?.url
-  const imageAlt = pageImage?.alt || bannerImage?.alt || '';
   const description = node.suPageDescription || getFirstText(node.suPageComponents);
 
   return {
@@ -63,7 +62,7 @@ const getBasicPageMetaData = (node: NodeStanfordPage) => {
       type: 'website',
       title: node.title,
       description: description,
-      images: getOpenGraphImage(imageUrl, imageAlt)
+      images: image ? getOpenGraphImage(image.url, image.alt || "") : []
     }
   }
 }

diff --git a/app/page.tsx b/app/page.tsx
@@ -19,7 +19,7 @@ const Home = async () => {
 
   return (
     <article>
-      {entity.suPageBanner &&
+      {entity.suPageBanner?.__typename === "ParagraphStanfordBanner" &&
         <header aria-label="Home Page banner">
           <BannerParagraph paragraph={entity.suPageBanner} eagerLoadImage/>
         </header>

diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "@mui/base": "^5.0.0-beta.33",
     "@next/third-parties": "^14.1.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.57",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@uidotdev/usehooks": "^2.4.1",
     "algoliasearch": "^4.22.1",
@@ -29,13 +29,13 @@
     "clsx": "^2.1.0",
     "decanter": "^7.2.0",
     "drupal-jsonapi-params": "^2.3.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "^14.1.0",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.4.0",
-    "html-react-parser": "^5.1.7",
+    "html-react-parser": "^5.1.8",
     "next": "^14.1.0",
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.35",
@@ -50,16 +50,15 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "usehooks-ts": "^2.15.0",
+    "usehooks-ts": "^2.15.1",
     "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@graphql-codegen/add": "^5.0.2",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/import-types-preset": "^3.0.0",
-    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "^4.1.3",
+    "@graphql-codegen/typescript-operations": "^4.2.0",
     "@next/bundle-analyzer": "^14.1.0",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",

diff --git a/src/components/elements/wysiwyg.tsx b/src/components/elements/wysiwyg.tsx
@@ -254,7 +254,7 @@ const WysiwygImage = ({src, alt, height, width, className = ''}: {
         src={src.trim()}
         alt={alt?.trim() || ""}
         fill
-        sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 1500px'}
+        sizes="(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 1500px"
       />
     </div>
   )

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -32,7 +32,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
             src={image.url}
             alt={image.alt || ''}
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
           />
         </div>
       }

diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -10,20 +10,22 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
-  const image = node.suPageImage?.mediaImage || node.suPageBanner?.suBannerImage?.mediaImage
+  const pageTitleBannerImage = node.suPageBanner?.__typename === "ParagraphStanfordPageTitleBanner" && node.suPageBanner.suTitleBannerImage.mediaImage;
+  const bannerImage = node.suPageBanner?.__typename === "ParagraphStanfordBanner" && node.suPageBanner.suBannerImage?.mediaImage;
+  const image = node.suPageImage?.mediaImage || pageTitleBannerImage || bannerImage;
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article aria-labelledby={node.id} className="mx-auto shadow-xl border border-black-20 overflow-hidden" {...props}>
-      {image?.url &&
+      {image &&
         <div
           className="relative aspect-[16/9] w-full">
           <Image
             className="object-cover"
             src={image.url}
             alt={image.alt || ''}
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
           />
         </div>
       }

diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -22,7 +22,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
             src={imageUrl}
             alt=""
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
           />
         </div>
       }

diff --git a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
@@ -62,7 +62,7 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
               src={image.url}
               alt={image.alt || ''}
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
             />
           </div>
         }

diff --git a/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx b/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
@@ -10,7 +10,9 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
-  const image = node.suPageImage?.mediaImage || node.suPageBanner?.suBannerImage?.mediaImage;
+  const pageTitleBannerImage = node.suPageBanner?.__typename === "ParagraphStanfordPageTitleBanner" && node.suPageBanner.suTitleBannerImage.mediaImage;
+  const bannerImage = node.suPageBanner?.__typename === "ParagraphStanfordBanner" && node.suPageBanner.suBannerImage?.mediaImage;
+  const image = node.suPageImage?.mediaImage || pageTitleBannerImage || bannerImage;
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
@@ -28,15 +30,15 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
           }
         </div>
 
-        {image?.url &&
+        {image &&
           <div
             className="order-1 @4xl:order-2 relative aspect-[16/9] h-fit w-full @4xl:w-1/4 shrink-0">
             <Image
               className="object-cover"
               src={image.url}
               alt={image.alt || ''}
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, 1000px"
             />
           </div>
         }

diff --git a/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx b/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
@@ -22,7 +22,7 @@ const StanfordPersonListItem = ({node, headingLevel, ...props}: Props) => {
             src={imageUrl}
             alt=""
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
           />
         </div>
       }

diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
@@ -70,7 +70,7 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
               alt={bannerImageAlt}
               loading="eager"
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
             />
           </div>
           {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
@@ -4,6 +4,7 @@ import {H1} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal.d";
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
+import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
@@ -17,12 +18,20 @@ const StanfordPagePage = ({node, ...props}: Props) => {
     <article {...props}>
       {node.suPageBanner &&
         <header aria-label="Page banner">
-          <BannerParagraph paragraph={node.suPageBanner} eagerLoadImage/>
+          {node.suPageBanner.__typename === "ParagraphStanfordBanner" &&
+            <BannerParagraph paragraph={node.suPageBanner} eagerLoadImage/>
+          }
+          {node.suPageBanner.__typename === "ParagraphStanfordPageTitleBanner" &&
+            <PageTitleBannerParagraph paragraph={node.suPageBanner} pageTitle={node.title}/>
+          }
         </header>
       }
-      <H1 className="mt-32 centered">
-        {node.title}
-      </H1>
+
+      {node.suPageBanner?.__typename !== "ParagraphStanfordPageTitleBanner"  &&
+        <H1 className="mt-32 centered">
+          {node.title}
+        </H1>
+      }
 
       {!fullWidth &&
         <InteriorPage currentPath={node.path}>

diff --git a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx b/src/components/nodes/pages/stanford-person/stanford-person-page.tsx
@@ -29,7 +29,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
               alt=""
               loading="eager"
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
             />
           </div>
         }

diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
@@ -25,7 +25,7 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
               alt={paragraph.suBannerImage.mediaImage.alt || ""}
               loading={eagerLoadImage ? "eager" : "lazy"}
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="100vw"
             />
           }
         </div>

diff --git a/src/components/paragraphs/stanford-card/card-paragraph.tsx b/src/components/paragraphs/stanford-card/card-paragraph.tsx
@@ -3,10 +3,11 @@ import {ParagraphStanfordCard} from "@lib/gql/__generated__/drupal.d";
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
 import Image from "next/image";
 import Oembed from "@components/elements/ombed";
-import {H2} from "@components/elements/headers";
+import {H2, H3, H4} from "@components/elements/headers";
 import Wysiwyg from "@components/elements/wysiwyg";
 import ActionLink from "@components/elements/action-link";
 import Button from "@components/elements/button";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordCard
@@ -18,6 +19,12 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
   const image = paragraph.suCardMedia?.__typename === 'MediaImage' ? paragraph.suCardMedia.mediaImage : undefined;
   const videoUrl = paragraph.suCardMedia?.__typename === 'MediaVideo' && paragraph.suCardMedia.mediaOembedVideo;
 
+  const headerTagChoice = (behaviors.su_card_styles?.heading || 'h2').split('.', 2);
+  const headerTag = headerTagChoice[0]
+  const headerClasses = headerTagChoice[1]?.replace('.', ' ').replace('su-font-splash', 'text-m2 font-bold')
+
+  const hideHeader = behaviors.su_card_styles?.hide_heading;
+
   return (
     <div {...props}>
       <div className="centered lg:max-w-[980px] w-full shadow-lg border border-black-10">
@@ -28,7 +35,7 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
               src={image.url}
               alt={image.alt || ""}
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, 1000px"
             />
           </div>
         }
@@ -39,7 +46,20 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
 
         <div className="py-20 px-10 lg:px-20 flex flex-col gap-5">
           {paragraph.suCardHeader &&
-            <H2 className="order-2 text-m2">{paragraph.suCardHeader}</H2>
+            <div className={twMerge("order-2", hideHeader && "sr-only")}>
+              {headerTag === 'h2' &&
+                <H2 className={headerClasses}>{paragraph.suCardHeader}</H2>
+              }
+              {headerTag === 'h3' &&
+                <H3 className={headerClasses}>{paragraph.suCardHeader}</H3>
+              }
+              {headerTag === 'h4' &&
+                <H4 className={headerClasses}>{paragraph.suCardHeader}</H4>
+              }
+              {headerTag === 'div' &&
+                <div className={headerClasses}>{paragraph.suCardHeader}</div>
+              }
+            </div>
           }
 
           {paragraph.suCardSuperHeader &&

diff --git a/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx b/src/components/paragraphs/stanford-gallery/gallery-paragraph.tsx
@@ -55,7 +55,7 @@ const GalleryImage = ({image}: { image: MediaStanfordGalleryImage }) => {
             src={imageUrl}
             alt={image.suGalleryImage?.alt || ''}
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, 1000px"
           />
         </Link>
       </div>

diff --git a/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx b/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
@@ -24,7 +24,7 @@ const MediaCaptionParagraph = ({paragraph, ...props}: Props) => {
               src={image.url}
               alt={image.alt || ""}
               fill
-              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+              sizes="(max-width: 768px) 100vw, 1000px"
             />
           </div>
         }

diff --git a/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx b/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx
@@ -0,0 +1,43 @@
+import React, {HtmlHTMLAttributes} from "react";
+import {ParagraphStanfordPageTitleBanner} from "@lib/gql/__generated__/drupal.d";
+import Image from "next/image";
+import {H1} from "@components/elements/headers";
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  paragraph: ParagraphStanfordPageTitleBanner
+  pageTitle: string
+}
+
+const PageTitleBannerParagraph = ({paragraph, pageTitle, ...props}: Props) => {
+
+  return (
+    <div {...props}>
+      <div className="@container md:min-h-[400px] mb-20">
+        <div
+          className="aspect-[16/9] @6xl:aspect-auto relative @6xl:absolute w-full @6xl:h-full bg-cool-grey">
+          {paragraph.suTitleBannerImage?.mediaImage.url &&
+            <Image
+              className="object-cover"
+              src={paragraph.suTitleBannerImage.mediaImage.url}
+              alt={paragraph.suTitleBannerImage.mediaImage.alt || ""}
+              loading="eager"
+              fill
+              sizes="100vw"
+            />
+          }
+        </div>
+
+
+        <div
+          className="w-full relative shadow-lg flex flex-col gap-10 py-20 px-10 @6xl:bg-white @6xl:max-w-[550px] @6xl:my-20 @6xl:ml-20 @6xl:z-10">
+
+          <H1 className="order-2 text-m2 p-0 m-0 mb-[-10px]">
+            {pageTitle}
+          </H1>
+
+        </div>
+      </div>
+    </div>
+  )
+}
+export default PageTitleBannerParagraph
diff --git a/src/components/paragraphs/stanford-person-cta/person-cta-paragraph.tsx b/src/components/paragraphs/stanford-person-cta/person-cta-paragraph.tsx
@@ -18,7 +18,7 @@ const PersonCtaParagraph = ({paragraph, ...props}: Props) => {
             src={image.url}
             alt={image.alt || ""}
             fill
-            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+            sizes="(max-width: 768px) 100vw, 1000px"
           />
         </div>
       }

diff --git a/src/lib/drupal/drupal-jsonapi.d.tsx b/src/lib/drupal/drupal-jsonapi.d.tsx
@@ -12,6 +12,8 @@ export type ListParagraphBehaviors = {
 }
 
 export type CardParagraphBehaviors = {
+  heading?: string
+  hide_heading?: boolean
   link_style?: 'action' | 'button'
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                 src={imageUrl}
                 alt=""
                 fill
-                sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
+                sizes="(max-width: 768px) 100vw, (max-width: 900px) 75vw, 1000px"
               />
             </div>
           }
@@ Expand Down @@