Adjusted markup for metatags to fix scrolling issue

SU-SWS · Dec 13, 2024 · f4cf25c · f4cf25c
1 parent 573d859
commit f4cf25c
Show file tree

Hide file tree

Showing 18 changed files with 337 additions and 327 deletions.
diff --git a/.yarn/releases/yarn-4.5.1.cjs → .yarn/releases/yarn-4.5.3.cjs b/.yarn/releases/yarn-4.5.1.cjs → .yarn/releases/yarn-4.5.3.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript-eslint": "8.18.0"
   },
-  "packageManager": "yarn@4.5.1",
+  "packageManager": "yarn@4.5.3",
   "resolutions": {
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"

diff --git a/src/components/nodes/pages/stanford-course/stanford-course-page.tsx b/src/components/nodes/pages/stanford-course/stanford-course-page.tsx
@@ -15,7 +15,7 @@ const StanfordCoursePage = ({node, ...props}: Props) => {
   if (node.suCourseLink?.url && !isPreviewMode()) redirect(node.suCourseLink?.url)
   return (
     <article className="centered my-32" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <H1>{node.title}</H1>
       <div className="flex flex-col gap-10">
         {node.suCourseSubject && <div>{node.suCourseSubject.name}</div>}

diff --git a/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx b/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx
@@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordEventSeriesPage = ({node, ...props}: Props) => {
   return (
     <article className="centered" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <H1 className="mt-32">{node.title}</H1>
 
       {node.suEventSeriesDek && <div className="type-2 mb-20 font-bold xl:text-[3.3rem]">{node.suEventSeriesDek}</div>}

diff --git a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
@@ -29,7 +29,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
 
   return (
     <article className="centered mt-32 flex flex-col gap-20" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <div className="flex flex-col">
         <H1 className="order-2">{node.title}</H1>
 

diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
@@ -36,7 +36,7 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
 
   return (
     <article className="centered mt-32" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <div className="mx-auto mb-48 lg:w-10/12">
         <div className="flex flex-col">
           <H1 className="order-2">{node.title}</H1>

diff --git a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx b/src/components/nodes/pages/stanford-page/stanford-page-page.tsx
@@ -22,6 +22,7 @@ const StanfordPagePage = ({node, ...props}: Props) => {
   return (
     <article {...props}>
       <NodePageMetadata
+        key={node.id}
         metatags={node.metatag}
         pageTitle={node.title}
         backupDescription={getFirstText(node.suPageComponents)}

diff --git a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx b/src/components/nodes/pages/stanford-person/stanford-person-page.tsx
@@ -21,7 +21,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
 
   return (
     <article className="centered mt-32" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <div className="mb-32 flex flex-col gap-20 lg:flex-row">
         {imageUrl && (
           <div className="relative mx-auto aspect-[1/1] w-[250px] shrink-0 lg:mx-0">

diff --git a/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx b/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx
@@ -17,7 +17,7 @@ const StanfordPolicyPage = async ({node, ...props}: Props) => {
   const changeLog = node.suPolicyChangelog?.filter(change => change.suPolicyPublic) || []
   return (
     <article className="centered pt-32" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <H1>{node.title}</H1>
       <div className="flex flex-col gap-20">
         {(node.suPolicyAuthority || node.suPolicyUpdated || node.suPolicyEffective) && (

diff --git a/src/components/nodes/pages/stanford-publication/stanford-publication-page.tsx b/src/components/nodes/pages/stanford-publication/stanford-publication-page.tsx
@@ -17,7 +17,7 @@ const StanfordPublicationPage = ({node, ...props}: Props) => {
   if (citationUrl) redirect(citationUrl)
   return (
     <article className="centered pt-32" {...props}>
-      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={node.title} />
       <div className="flex flex-col gap-10">
         <H1 className="order-2">{node.title}</H1>
 

diff --git a/src/components/nodes/pages/sup-book-ancilary/sup-book-ancillary-page.tsx b/src/components/nodes/pages/sup-book-ancilary/sup-book-ancillary-page.tsx
@@ -39,7 +39,7 @@ const SupBookAncillaryPage = async ({node, ...props}: Props) => {
       childrenProps={{className: "centered rs-mt-4 flex gap-[17.1rem]"}}
       isArticle
     >
-      <NodePageMetadata metatags={node.metatag} pageTitle={`${book.title}: ${node.title}`} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={`${book.title}: ${node.title}`} />
       <H1 className="sr-only">
         {node.title} for <em>{book.title}</em>
       </H1>

diff --git a/src/components/nodes/pages/sup-book/sup-book-desk-examination-page.tsx b/src/components/nodes/pages/sup-book/sup-book-desk-examination-page.tsx
@@ -24,7 +24,7 @@ const SupBookDeskExaminationPage = ({node, ...props}: Props) => {
       childrenProps={{className: "rs-mt-4 mx-auto max-w-[800px]"}}
       isArticle
     >
-      <NodePageMetadata metatags={node.metatag} pageTitle={`${node.title}: Copy Requests`} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={`${node.title}: Copy Requests`} />
       <H1>
         Desk, Examination, or Review copy request<span className="sr-only">&nbps;{node.title}</span>
       </H1>

diff --git a/src/components/nodes/pages/sup-book/sup-book-excerpt-page.tsx b/src/components/nodes/pages/sup-book/sup-book-excerpt-page.tsx
@@ -27,7 +27,7 @@ const SupBookExcerptPage = async ({node, ...props}: Props) => {
       childrenProps={{className: "rs-mt-4 centered"}}
       isArticle
     >
-      <NodePageMetadata metatags={node.metatag} pageTitle={`${node.title}: Excerpts & More`} />
+      <NodePageMetadata key={node.id} metatags={node.metatag} pageTitle={`${node.title}: Excerpts & More`} />
       <H1>
         Excerpts + more<span className="sr-only">&nbps;{node.title}</span>
       </H1>

diff --git a/src/components/nodes/pages/sup-book/sup-book-page.tsx b/src/components/nodes/pages/sup-book/sup-book-page.tsx
@@ -12,7 +12,7 @@ const SupBookPage = async ({node, ...props}: Props) => {
   if (node.supBookType !== "book") return <DigitalProjectPage node={node} {...props} />
 
   return (
-    <>
+    <div>
       <NodePageMetadata metatags={node.metatag} pageTitle={node.title} backupDescription={node.supBookSubtitle}>
         {node.supBookAuthors?.map(author => (
           <>
@@ -23,7 +23,7 @@ const SupBookPage = async ({node, ...props}: Props) => {
       </NodePageMetadata>
       <BookPage node={node} {...props} />
       <AlgoliaRelatedBooks objectId={node.id} />
-    </>
+    </div>
   )
 }
 export default SupBookPage
diff --git a/src/components/paragraphs/sup-blog-teaser/sup-blog-teaser-paragraph.tsx b/src/components/paragraphs/sup-blog-teaser/sup-blog-teaser-paragraph.tsx
@@ -30,7 +30,7 @@ const SupBlogTeaserParagraph = ({paragraph, ...props}: Props) => {
         <ul className="list-unstyled grid gap-10 @7xl:grid-cols-2">
           {paragraph.supBlogTeaserItems.map(blogItem => (
             <li key={blogItem.id} className="relative h-full min-h-[400px] w-full">
-              <div className="h-full w-full bg-black-true/80 p-20">
+              <div className="relative h-full w-full bg-black-true/80 p-20">
                 {/* URL will always be populated. */}
                 <Link
                   href={blogItem.supBlogUrl.url || "#"}
@@ -51,6 +51,7 @@ const SupBlogTeaserParagraph = ({paragraph, ...props}: Props) => {
                   src={blogItem.supBlogImage.mediaImage.url}
                   alt=""
                   fill
+                  sizes="(max-width: 768px) 100vw, 800px"
                 />
               )}
             </li>

diff --git a/src/components/paragraphs/sup-carousel/sup-carousel-paragraph.tsx b/src/components/paragraphs/sup-carousel/sup-carousel-paragraph.tsx
@@ -117,7 +117,15 @@ const Slide = async ({slideParagraph, isTopHero}: {slideParagraph: ParagraphSupC
       >
         <div className="rs-px-8 w-full lg:px-0">
           {(slideTitle || (!leftImage && image) || eyebrow || subtitle) && (
-            <div className={twMerge("flex flex-col", clsx({"text-left": leftImage, "text-center": !leftImage}))}>
+            <div
+              className={twMerge(
+                "flex flex-col",
+                clsx({
+                  "text-left": leftImage,
+                  "text-center": !leftImage,
+                })
+              )}
+            >
               {slideTitle && (
                 <H2
                   className={twMerge(
@@ -183,7 +191,7 @@ const Slide = async ({slideParagraph, isTopHero}: {slideParagraph: ParagraphSupC
           )}
         </div>
         {leftImage && image && (
-          <div className="relative order-first aspect-[11/16] h-auto w-full max-w-[21rem] shrink-0 md:w-1/2 md:max-w-[34rem]">
+          <div className="order-first aspect-[11/16] h-auto w-full max-w-[21rem] shrink-0 md:w-1/2 md:max-w-[34rem]">
             <CarouselImageLink href={slideParagraph.supSlideButton?.url} title={slideParagraph.supSlideButton?.title}>
               <Image className="object-contain" src={image.url} alt={image.alt || ""} fill sizes="500px" />
             </CarouselImageLink>
@@ -211,7 +219,7 @@ const CarouselImageLink = ({
         title={title || undefined}
         aria-hidden
         tabIndex={-1}
-        className="mx-auto block w-fit *:transition hover:*:scale-[1.02]"
+        className="relative mx-auto block h-full w-full *:transition hover:*:scale-[1.02]"
       >
         {children}
       </Link>

diff --git a/yarn.lock b/yarn.lock
@@ -15469,11 +15469,11 @@ __metadata:
 
 "typescript@patch:typescript@npm%3A^5.7.2#optional!builtin<compat/typescript>":
   version: 5.7.2
-  resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=cef18b"
+  resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=5786d5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/c891ccf04008bc1305ba34053db951f8a4584b4a1bf2f68fd972c4a354df3dc5e62c8bfed4f6ac2d12e5b3b1c49af312c83a651048f818cd5b4949d17baacd79
+  checksum: 10c0/f3b8082c9d1d1629a215245c9087df56cb784f9fb6f27b5d55577a20e68afe2a889c040aacff6d27e35be165ecf9dca66e694c42eb9a50b3b2c451b36b5675cb
   languageName: node
   linkType: hard